[Jquery Mobile] Dynamically added content doesn’t rendering proper

Jquery mobile is widely used to develop mobile application as its compatible with all mobile devices. We can add and remove the data or content to particular div in jquery mobile very easily.

But when we add dynamically content to existing div or page, it breaks the page and doesn’t render it in proper way as required. Its works when we reload the page. Its mostly occur due element is not painted properly mean to say no all styles applied to added content.

In the Jquery Mobileto paint element completely with dynamically added content, we need to trigger a event. You have to add a line of code after data is dynamically added to particular element of the page.

 function Load() {        
        $("#mainData").empty().load("/controller/action", function () {
            $("#mainData").trigger('create');
       })
    }

In the above code example I have a Load method, which is loading data. Once data is loaded I have trigger that element div with $(“#mainData”).trigger(‘create’); code. It will fix your problem to and data will load properly in the element tag and all styles applied to div as needed, which is mainData

If it doesn’t work then please a reload the whole page by using below code

 function Load() {        
        $("#mainData").empty().load("/controller/action", function () {
            $("#mainData").trigger('create');
            $("#page").page();
       })
    }

#page is the id of your page in the master page. Check your id page id it would work like charm.

If you still unable to fix the bug then please hire me.

Happy coding..

Posted by | View Post | View Group