jquery mobile - 将内容加载到div中

时间:2011-06-13 14:59:42

标签: jquery ajax jquery-mobile

Jquery Mobile通过“劫持”页面并加载内容并将其注入页面来工作。

当我尝试将其他内容注入页面时,这似乎会产生问题。

我有index.html,然后是page2.html文件。我正在以正常方式设置jquery mobile,将每个页面的内容包装在div中,如下所示:

<div id="container" data-role="page">
   // my content
<a href="page2.html">go to page 2</a>
</div>

当用户点击进入第2页时,它会产生漂亮的幻灯片效果。位置栏中的网址如下所示:index.html#page2.html

jquery mobile使用锚点注入页面内容并应用转换。很好,所以在下一部分工作很好。

在page2.html上,我有一个部分正在加载一些外部数据并将其注入div。

<a href="http://www.somedomain.com/myata.php" class="ajaxtrigger" data-role="none">mydata</a>
<div id="target"></div>
<script src="js/code.js"></script>
<script src="js/loader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('.ajaxtrigger').trigger('click');
});
</script>

我遇到的问题是,当我在jquery mobile中启用转换时,此脚本不起作用。它不会将数据加载到div中。无赖。

任何人都知道我需要做些什么来让它触发并将内容加载到该div中?

4 个答案:

答案 0 :(得分:0)

您是否尝试使用$(document).ready(function(){ $('.ajaxtrigger').trigger('click'); });捕获index.html中的click / tap to page2,然后将数据插入page2.html?

如果是这样,那就行不通,因为你不能以这种方式在页面之间传递数据。尝试为page2.html的主div提供#page2的ID并使用pagebeforeshow方法(http://jquerymobile.com/test/#/test/docs/api/events.html)

$('div#page2').live('pagebeforeshow',function(event, ui){
  $('div#page2 div#ajax_loaded_content').load('url_to_load_from.php');
});

答案 1 :(得分:0)

我遇到了类似的问题(如上面的评论所述),我只是想出来(至少对我而言)。当jQuery Mobile通过ajax加载下一页时,它会将前一页保留在DOM中,以便后退按钮能够正常工作。现在的问题是,如果你在第二页上使用javascript引用任何DOM元素(特别是ID),你必须考虑到上一页中的元素仍然在DOM中。由于ID设计为唯一,因此document.getElementById()不可靠,因此$("#myDiv")也不是。

我刚刚开始做的是按类名引用DOM元素(例如$(".myDivClass")),因为css类被设计为不是唯一的并且似乎可以解决问题。副作用是,您在javascript中所做的任何更改都将对所有隐藏页面进行,但它可以完成工作。我输入此内容时想到的另一个想法是使用<div data-role="page">代替$("#myUniquePage #myInnerDiv")为每个$("#myInnerDiv")提供一个唯一ID,从现在开始查询元素。

希望这有帮助。

答案 2 :(得分:0)

试试这个:

$('page2.html').bind('pageshow', function() {
   $('.ajaxtrigger').trigger('click');
});

答案 3 :(得分:0)

另一种选择是为每个页面加载时要操作的DOM元素生成一个唯一的id,这样就不会出现Adam描述的重复ID的问题。我用C#(w / Razor语法)完成了这样做:

@{ string headerAutoGenSym = "header_" + new System.Random().Next(1000000000); }
@section header
{
    <div id="@headerAutoGenSym"></div>

    <script type="text/javascript">
        $(function () {
            $(document).bind("pageinit", function () {
                $.get(
                    '@Url.Action("myAjaxURL")',
                    function (data) {
                        $('#@headerAutoGenSym').append(data);
                    }
                );
            });
        });
    </script>
}