Best practice for constructing a jQuery mobile page by json parse

Question

I am developing an android app using phonegap which call an api on page load getting a json object as a return parameter.

now I have to construct the page using jQuery mobile by extracting values from the recieved object.

So I am asking what will be the best practice for this which can reduce its loading time.

Thanks for helping.

Presently what I am doing

<script>
    $(document).ready( function() {
        $.ajax({
            url : "demourl.com",
            type : "GET",
            success : function(data) {
                var obj = $.parseJSON(data);
                $("#results").html(obj.messagedetails[0].spamReason.userApprove);},
            fail : function() {
                $("#notification").text("Try again after some time.");
            }
        });
    });
</script>

Getting objects from this call and setting it in

<div id="results"></div>

This is not related to mobile, it just general loading time behaviour. Why do you need to JSON the data, is it not possible to directly get the data serverside and insert it into the html? — RvdK, Feb 27 '13 at 11:32
@RvdK: Server side content generation is a bad choice when using jQuery Mobile with a Phonegap. — Gajotres, Feb 27 '13 at 11:37

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

There's nothing you can do about $.ajax / $.getJSON loading time, it will depend on your internet connection.
Never load data during the page transitions, do it ether before page change or after a page change. Best practice is to do it before page change (just show AJAX loader to indicate AJAX content is loading).
When data is loaded use .append( and not .html( to append data.
In case you are using each or for loop to add a dynamic content (laoded with an AJAX) UNDER NO CIRCUMSTANCES enhance page markup (apply jOuery Mobile style to new added content) during each loop, THIS IS A HUGE TIME SINK, do it only after all content has been added.

You can find more about this in my ARTICLE, or find it HERE.
Do not use document ready, it could trigger before page is loaded. Instead use correct page event.

Find more about document ready vs page events in my other ARTICLE, here you will also find a way to benchmark jQuery Mobile and some statistic about how much time is needed for some jQM actions.

Very helpful thank you so much. You always help me can I have you mail id please. — , Feb 27 '13 at 11:46

Best practice for constructing a jQuery mobile page by json parse

1 Answers1