JQuery Mobile loses formatting when content is updated

Question

First, I call getJSON to pull down the appropriate data. I then use the following code to update an already existing <a href=""></a> element.

$.getJSON("http://URL.com?unitnumber="+query+"", function(data) {
    var encounter = $('#encounter');
    $.each(data, function(i) {
        if(i==0){
            $('#date1').text(""+data[i].DateDisp+"").trigger('create');
        }
     });
});

The initial <a> element is formatted correctly:

But as soon as I update the text inside that link element (whose ID is #date1), I lose the formatting. This is despite trying to use .trigger('create')...

Answer 1

You can use the structure that jQuery Mobile adds to your button (<a> tag) and only replace the button text. Below is an example of a button after jQuery Mobile has styled it:

<a data-role="button" data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Updated Text (6)</span>
    </span>
</a>

A Note: The above HTML structure of a button is for jQuery Mobile 1.0RC2.

Notice the <span> with the ui-btn-text class. What you want to do is target this <span> and change its text, if you try to change the text of the whole <a> tag you will lose the inner <span> tags that style the button.

So your selector should look like this:

$('#date1').find('.ui-btn-text').text(...);

And you will not have to use .trigger('create') because the styling will not be lost.

Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/4DAfn/3/

Also, if you are iterating through your returned JSON data and only using the first row of information then consider replacing the following:

$.each(data, function(i) {
    if(i==0){
        $('#date1').text(""+data[i].DateDisp+"").trigger('create');
    }
});

With:

$('#date1').text(""+data[0].DateDisp+"").trigger('create');

Or you could just return false; within your if statement (which will break the $.each() loop):

$.each(data, function(i) {
    if(i==0){
        $('#date1').text(""+data[i].DateDisp+"").trigger('create');
        return false;
    }
});