javascript - Call an web api in pageshow event of jquery

Question

I am writing a JqueryMobile and jquery based web application. I have three data-pages in my index.html . I am calling an web api in pageshow event of data-page in first page and filling the list view. and then by clicking on that list itam getting an id of that list item and moving to the next page and calling again the web api to get detail of that list item in page show event. and then i am again moving to the 3rd page from detail page to call another api. It is all working fine but problem is coming when i am moving back to detail page and then from detail page to index page. on moving back pageshow event of page is calling again and it is again calling the api in all pages. If i am use oncrete then it will only call api for the very first time. Can any body tell me how to call api in this type of structure.

Answer 1

看看这个小提琴：

http://jsfiddle.net/ezanker/tAB7x/

---

有多种方法可以解决您的问题，这只是其中一种...

我已将用于填充初始列表的 web api 放在第一页的“pageinit”中。当您加载页面时，这将运行一个。如果您需要刷新此列表，您可以添加一个刷新按钮。列表中的每个附加项目都链接到 page2，其中包含项目 ID 的查询字符串。然后添加列表视图项的单击处理程序以获取单击项的 id 并从 web api 填写详细信息表单 (page2)（在示例中，我只是将 id 写入第 2 页中的文本框）。

$('#page1').on('pageinit', function () {

    //get list from web api (hardcoded for this example
    var $ul = $("#dynamicList");
    $ul.append('<li><a href="#page2?id=1" class="detailLink">A</a></li>');
    $ul.append('<li><a href="#page2?id=2" class="detailLink">B</a></li>');
    $ul.append('<li><a href="#page2?id=3" class="detailLink">C</a></li>');
    $ul.listview("refresh");

    $('.detailLink').on('click', function () {
      var l = $(this).attr("href");
      l = l.substring(l.indexOf('?') + 1);
      var id = getUrlVars(l);
      $('#detalText').val(id['id']);
    });
});

Page2 有一个链接到第 3 页的按钮和一个从 web api 填写第 3 页的单击处理程序（在示例中，我再次将 id 写入第 3 页的文本框）：

$('#linkPage2').on('click', function () {
    var id = $('#detalText').val();
    $('#detalText2').val(id);
});

当您单击任一页面上的后退按钮时，不会运行任何代码并保持页面的先前状态。