Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging jQuery UI button text dynamically - Firefox inconsistent
    primarykey
    data
    text
    <p>I have a jQuery UI button and I want to change its text dynamically. I've got no issue on Chrome and IE when I do this:</p> <pre><code>$('#myButton').find('span:first').text("myText"); </code></pre> <p>However, Firefox seems to handle buttons differently and doesn't find a span for my button. So when on Firefox, I do that instead:</p> <pre><code>$('#myButton').text("myText"); </code></pre> <p><strong>It works most of the times</strong>, but sometimes, somehow my button isn't ready when I try to change its text, or maybe there's another reason that prevents Firefox to load the button correctly and I end up with a button like this: <em>(I spare you the numerous attributes added by jQuery UI)</em></p> <pre><code>&lt;button id="myButton"&gt;myText&lt;/button&gt; </code></pre> <p>instead of that:</p> <pre><code>&lt;button id="myButton"&gt; &lt;span class="ui-button-text"&gt;myText&lt;/span&gt; &lt;/button&gt; </code></pre> <p>and thus my button's styling goes wrong, just like in these threads: <a href="https://stackoverflow.com/questions/11599721/jquery-ui-button-issue">Jquery UI button issue</a> and <a href="https://stackoverflow.com/questions/12180945/jquery-ui-changing-button-text-distorts-button-sizing">jQuery UI: changing button text distorts button sizing</a></p> <p>I have also tried this, following some advice found here:</p> <pre><code>$("#myButton).button('option', 'label', 'myText'); </code></pre> <p>but I get an error saying I can't call button methods prior to initialization.</p> <p>It's infuriating since Chrome and IE handle this perfectly every time. Is there a way to get a consistent behaviour ?</p> <p>Thank you.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload