Home/ Questions/Q 7625509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T05:12:05+00:00

I have a Phonegap/jQuery application which is working great, however in one area the

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0