jQuery Moblie:传递参数并动态加载页面内容 [英] jQuery Moblie: passing parameters and dynamically load the content of a page

问题描述

我知道这是一个基本问题，但是我找不到适合我情况的东西.

我有一个包含元素列表的jQuery Mobile页面.这些元素引用第二个页面，该页面的内容取决于选择哪个元素(例如，文章列表和选择应该显示相对文本的文章).基本上，我必须在页面之间传递参数.

我尝试使用AJAX做到这一点:

$.ajax({
    url : "index.html#page2",
    data : "id="+id,    
    dataType : 'json'
    type: "GET"
});

但是我无法在第二页中得到结果.

我该怎么做?

解决方案

通过您的URL:index.html#page2.您正在尝试导航到内部页面(DOM中已经存在一个页面).如果是这种情况，请在#page2上的JavaSCript中进行逻辑处理，并在链接到#page2时，将id值保存在#page2上的JavaScript可以访问的变量中.

类似的东西:

<ul data-role="listview" id="myList">
    <li>
        <a href="#page2" data-id="987">This is some fake text... Click for More</a>
    </li>
</ul>
<script>
$(document).delegate('#page1', 'pageinit', function () {

    //bind to click event for all links in the `#myList` UL
    $(this).find('#myList').find('a').bind('click', function () {

        //save the ID of this list-item to a global variable so it can be used later
        window.myId = $(this).attr('data-id');
    });
});
$(document).delegate('#page2', 'pageshow', function () {

    //get the ID saved as a global variable
    var currentId = window.myId;

    //now do logic for second page
});
</script>

这是一个演示: http://jsfiddle.net/jasper/wFdet/

I know it's a base problem, but I wasn't able to find anything fitting my situation.

I have a jQuery Mobile page with a list of elements. The elements references to a second pages which has a content that depends on what element where choose (for example a list of articles and choosing an article it should show the relative text). Basically I have to pass a parameter between pages.

I tried to do that using AJAX:

$.ajax({
    url : "index.html#page2",
    data : "id="+id,    
    dataType : 'json'
    type: "GET"
});

But i wasn't able to get the results in the second page.

How can I do that?

解决方案

By the look of your URL: index.html#page2. You are trying to navigate to an internal page (one already in the DOM). If this is the case, then make the logic in JavaSCript on #page2 and when you link to #page2, save the id value in a variable that the JavaScript on #page2 can access.

Something like:

<ul data-role="listview" id="myList">
    <li>
        <a href="#page2" data-id="987">This is some fake text... Click for More</a>
    </li>
</ul>
<script>
$(document).delegate('#page1', 'pageinit', function () {

    //bind to click event for all links in the `#myList` UL
    $(this).find('#myList').find('a').bind('click', function () {

        //save the ID of this list-item to a global variable so it can be used later
        window.myId = $(this).attr('data-id');
    });
});
$(document).delegate('#page2', 'pageshow', function () {

    //get the ID saved as a global variable
    var currentId = window.myId;

    //now do logic for second page
});
</script>

Here is a demo: http://jsfiddle.net/jasper/wFdet/

这篇关于jQuery Moblie:传递参数并动态加载页面内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！