CODEWITHSUNDEEP
jqueryandroidcordovarefresh
Fosco
Fosco

Reputation: 38526

Phonegap dom update not immediately reflected in display

I have a Phonegap/jQuery application which is working great, however in one area the DOM is being changed and not displayed until some user input (a touch, drag, anything) triggers the display to re-render. (This happens on my android phone and tablet, but works in Chrome)

function reloadSubscriptions(num) {
    if (subscriptionsStore[num]) {
        for (var x in subscriptionsStore[num]) {
            $('#' + x + 'Subscribe').html('<a href="#" onclick="unsubscribe(\'' + x + '\',\'' + num + '\'); return false;">[UN-SUBSCRIBE]</a>');
        }
    }
    $('#busy').hide();  
}

This is the final function in a chain, which does the DOM updates... Any ideas how I can trigger the application to refresh the display?

I'd be willing to provide the APK and a larger script chunk for demonstration.

I've since gotten this to occur elsewhere, basically any time I update the DOM without changing a lot of the display.

Edit:

The original HTML page includes:

<div id="wrapper">
    <ul id="menuList" class="menu-list"></ul>
    <div id="otherContent"></div>
</div>

When a certain button is pressed, a list of options is loaded into the #menuList. When they are loaded, a span #<item-id>Subscribe is created inside each <li>. After the list is loaded, the original function I posted conditionally updates the span #<item-id>Subscribe.

The display changes when the list of options is loaded, but not when the spans are updated after the fact. Touching the screen then shows the update.

Upvotes: 2

Views: 4307

Answers (3)

user2304165
user2304165

Reputation: 9

I have seen in 2 applications before. It seems to happen when you make minor changes like just updating a label text. I think Android "thinks" that nothing has changed and doesn't refresh the webview.

Try changing somethin "bigger" along with your small changed like making toggling a transparend div visibility (or anything that the user won't notice).

Upvotes: 1

dhaval
dhaval

Reputation: 7659

I tried following script code in my application which worked without any issue. Although this is just a test code so there is no additionally code running aside.

<body>
    <div id="wrapper">
        <ul id="menuList" class="menu-list"></ul>
        <div id="otherContent"></div>
    </div>
</body>

<script type="text/javascript">
    function reloadSubscriptions(num) {

        // Tried with comments enabled as well
        //for (i = 0; i < num; i += 1) {
        $('#' + i + 'Subscribe').html(
                '<a href="#" onclick="unsubscribe(\'' + i + '\',\'' + i
                        + '\'); return false;">[UN-SUBSCRIBE]</a>');
        //}

        $('#busy').hide();
    }

    function loadList(num) {
        for (i = 0; i < num; i += 1) {
            $("<li>List text <span id='"+ i+"Subscribe'></span></li>")
                    .appendTo($("#menuList"));

            reloadSubscriptions(i);
        }
    }

    loadList(5);
    // reloadSubscriptions(5);
</script>

Upvotes: 0

Zaher
Zaher

Reputation: 1150

i think that you have to trigger a JQM refresh action on the page thats your working with like :

$('#somepage').trigger('refresh');

since from the small code that you have your changing the markup check page scripting section Create vs. refresh: An important distinction

Upvotes: 1

Related Questions