jquery mobile - 将内容加载到div中

Jquery Mobile works by “hijacking” a page and loading content and injecting it into the page.

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

It seems that this creates a problem when i try to inject other content into the page.

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

I have my index.html and then a page2.html file. I'm setting up jquery mobile in the normal fashion wrapping the contents of each page in a div like so:

我有我的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>

when the user taps go to page 2, it does the nice slide effect. The url in the location bar looks like this: index.html#page2.html

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

jquery mobile inject the content of the page using the anchors and applies the transition. nice so everthing works great up to the next part.

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

On page2.html, i have a section that is loading some external data and injecting it into a div.

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

The problem i am having is that when i enable the transitions in jquery mobile this script doesn't work. It won't load the data into the div. bummer.

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

Anyone know what i need to do to get it to trigger and load the content into that div?

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

4 个解决方案

#1

Are you trying to use $(document).ready(function(){ $('.ajaxtrigger').trigger('click'); }); to capture the click/tap to page2 in index.html, and then insert data onto page2.html?

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

If so, that wont work, as you cant pass data between pages in that manner. Try giving page2.html's main div an id of #page2 and use the pagebeforeshow method (http://jquerymobile.com/test/#/test/docs/api/events.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');
});

#2

I'm having a similar issue (as mentioned in the comment above) and I just figured it out (at least for me). When jQuery Mobile loads the next page via ajax, it keeps the previous page in the DOM so that the back button will work correctly. The problem now is that if you use javascript on the second page to reference any of the DOM elements (particularly by ID) you have to take into account that the elements from the previous page are still in the DOM. Since IDs are designed to be unique, document.getElementById() isn't as reliable and so $("#myDiv") isn't either.

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

What I just started doing is referencing the DOM elements by class name (e.g. $(".myDivClass")) since css classes are designed NOT to be unique and that seems to do the trick. The side effect is that whatever changes you make in javascript will be made to all hidden pages as well but it gets the job done. Another idea that's coming to mind as I'm typing this is to give each <div data-role="page"> a unique ID and from now on query elements using $("#myUniquePage #myInnerDiv") instead of $("#myInnerDiv").

我刚刚开始做的是按类名引用DOM元素(例如$(“。myDivClass”)),因为css类被设计为不是唯一的并且似乎可以解决问题。副作用是,您在javascript中所做的任何更改都将对所有隐藏页面进行,但它可以完成工作。我输入此内容时想到的另一个想法是给每个

一个唯一的ID,从现在开始使用$(“#myUniquePage #myInnerDiv”)代替$(“ #myInnerDiv“)。

Hopefully that helps.

希望这会有所帮助。

#3

Try this:

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

#4

Another option would be to generate a unique id for the DOM element you want to manipulate on each page load, so that you don't have the problem with duplicate ids that Adam describes. I've done this in C# (w/Razor syntax) like so:

另一种选择是为每个页面加载时要操作的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>
}

#1