Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Never mind; just found this at the top of the documentation:</p> <blockquote> <p>Note: Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the button plugin and only just use the underlying buttonMarkup plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.</p> </blockquote> <p>Although this doesn't actually solve my problem (of how to update the button text) - at least it answers why the "refresh" method isn't supported.</p> <p><strong>Edit:</strong></p> <p>I am aware that I can <em>directly</em> update the text on the button; I said as much in the original question:</p> <blockquote> <p><strong>I know that I can work around this problem by manipulating the .ui-btn-text span that's nested inside the button</strong>; however, this seems like the wrong approach as it requires explicit knowledge of the internal workings of jquery Mobile.</p> </blockquote> <p>I was hoping to avoid this solution by somehow getting the "refresh" method to work. However, based on the snippet of documentation that I later found (and have quoted above), I realised that using the "refresh" method was not an option.</p> <p>Given that; I was still hoping there was another way to update the text on the button without explicitly addressing the generated DOM elements (i.e. by using the jQM API) - but so far as I can see, there's no API method to do so. Updating the DOM elements seems like the only way to achieve the desired result.</p> <p>Both of the selectors provided by @Phil Pafford (<code>$(this).find('span span')</code>) and @OmarNew2PHP (<code>$button.children().children()</code>) are (in my opinion) incorrect. Yes, they work perfectly in the example given above, however, if you add an icon to the button:</p> <pre><code>&lt;a id="myCrapButton" href="#" data-icon="delete"&gt;Click me!&lt;/a&gt; </code></pre> <p>Then jQM adds in an additional <code>span</code> to display that icon (anchor tag attributes trimmed for brevity):</p> <pre><code>&lt;a href="#"&gt; &lt;span class="ui-btn-inner"&gt; &lt;span class="ui-btn-text"&gt;Delete&lt;/span&gt; &lt;span class="ui-icon ui-icon-delete ui-icon-shadow"&gt;&amp;nbsp;&lt;/span&gt; &lt;/span&gt; &lt;/a&gt; </code></pre> <p>Using the selectors above will add the text to <strong>both</strong> of the inner <code>span</code> tags. This is another example of why I was hoping to avoid updating the DOM directly - because you can't (and shouldn't have to) predict what jQM is going to generate.</p> <p>But, at the end of the day, it looks like the best way of updating the text inside the button is using the method I was hoping to avoid:</p> <pre><code>$button.click(function() { $(".ui-btn-text", this).text("Awesome Button"); }); </code></pre> <p>Thanks for your answers.</p>
    singulars
    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. VO
      singulars
      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