jQuery-mobile:通过AJAX请求加载JQPlot图 [英] JQuery-mobile : Load JQPlot graph through AJAX request

问题描述

我是JQuery Mobile的新手，我试图根据用户选择显示带有JqPlot图形的页面.

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

我今天上午阅读并尝试过，通过设计，不会执行通过单击链接显示/加载的页面的javascript代码.

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.

要考虑要加载的页面的JS脚本，必须将链接的数据属性data-ajax设置为false.但是在这种情况下，浏览器会重新加载所有页面，并且对用户来说不是平稳过渡.

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">  

我找到了一种解决方法，但是我需要对代码进行专家审查.这个想法是在图形容器页面#page-detail上声明一个事件pageshow，以通过JQuery .load()函数加载图形创建页面.

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 :

• 顺利过渡到我的页面
• 具有一个将在其中加载我的图形的加载div
• 在数据加载和JqPlot图形准备就绪时呈现我的图形

我的代码:

  $(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?

推荐答案

JQuery .load()是加载页面的好选择，包括按照标准页面加载执行Javascript和应用CSS.我在MVC单页网站的部分页面中使用了此技术，并发现它非常有效.

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.

我对您对链接的关注并不完全清楚，但可以肯定的是，在点击"处理程序中使用JQuery .load()进行链接也可以.

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.

您的代码看起来不错，很高兴看到在异步加载发生时您正在应用加载层.我不确定100％确定该层如何工作，但是我想.load()完成后您可能需要隐藏/删除它，因此也许在加载后需要一些额外的代码处理程序这样做吗?

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?

这篇关于jQuery-mobile:通过AJAX请求加载JQPlot图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！