JQuery-mobile : Load JQPlot graph through AJAX request

问题

I am new on JQuery Mobile and I am trying to display a page with a JqPlot graphic depending on the user choice.

I read and experimented this morning that by design the javascript code of a page displayed/loaded by clicking on a link is not executed.

To taking into account JS script of a page to load, the data attribute data-ajax of the link must be set to false. But in this case, the browser reload all the page and the is no smooth transition for the user.

<p><a href="myUrl.php" data-ajax= "false" data-transition="slideup" data-role="button" data-theme="c">  

I have found a way to figure it out, but I need an expert review of my code. The idea is to declare an event pageshow on the graph container page #page-detail to load the graph creation page through the JQuery .load() function.

By this way, I am able to :

• Have a smooth transition to my page
• Have a loading div where my graph will be loaded
• Render my graph when the data loading and JqPlot graph is ready

My code :

  $(document).on('pageshow','#page-detail',function(){       
        //Apply a loading layer to the graph container
        $('#graph-container').html("<div id='graph-loading-layer' class='loading loading-col2a'>"+g_graphLoadingText+"</div>");                    

        //Load my graphic page creation. In this page, there are JS code to create the JQplot graphic
        $('#graph-container').load(g_baseUrl+"index/graph/format/html",{chartHeight : newHeight+'px'},function(response, status, xhr) {
            console.log('loaded')
        });                 
    });

My solution above is painful an I am sure that I could load my graph easily Is there someone with a better solution? Better code implementation?

回答1:

JQuery .load() is a good option for loading pages including having the Javascript executed and CSS applied as per a standard page load. I used this technique with partial pages in an MVC single-page website and found it to be very effective.

I wasn't entirely clear on your concerns around the links, but certainly using JQuery .load() within a 'click' handler for links will also work.

Your code looks sound, and it's good to see that you are applying a loading layer while the async load happens. I'm not sure 100% sure how that layer works for you, but I'm thinking you probably need to hide/remove it once the .load() has completed, so perhaps there needs to be some extra code in your post-load handler to do so?

来源：https://stackoverflow.com/questions/13761878/jquery-mobile-load-jqplot-graph-through-ajax-request