Question

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

我今天早上阅读并试验过，按设计，点击链接显示/加载的页面的javascript代码不会被执行。

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

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

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

通过这种方式，我能够：

顺利过渡到我的页面
有一个加载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')
        });                 
    });

我的解决方案很痛苦，我相信我可以轻松加载我的图表有人有更好的解决方案吗？更好的代码实现？

Answer 1

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

我对你对链接的担忧并不完全清楚，但肯定在链接的“点击”处理程序中使用JQuery .load（）也可以。

您的代码看起来很合理，在异步加载发生时，您可以看到正在应用加载层。我不确定100％确定该图层对你有用，但我想你可能需要在.load()完成后隐藏/删除它，所以也许你的帖子中需要一些额外的代码这样做的加载处理程序？

JQuery-mobile：通过AJAX请求加载JQPlot图

1 个答案: