动态填充JQUERY移动多页页面

Dynamically Populate JQUERY Mobile Multi-Page Page

本文关键字：移动 填充 JQUERY 动态      更新时间：2023-09-26

JQUERY Mobile初学者问题:我有两个页面在我的简单多页JQUERY移动'应用程序'。当用户导航到PAGE2时，我想执行一个AJAX调用来获取一个JSON对象，该对象包含人员列表+ DB ID对。我想在PAGE2上以按钮的形式显示人员列表。

代码片段:

<div id="PAGE2" data-role="page">
  <div class="ui-content">
     // I want buttons to appear sequentially here
  </div>
</div>

PAGE2是我的"占位符"填充:

<input type="button" id="id1" name="id1" value="Bob Smith"/>
<input type="button" id="id2" name="id2" value="Jane Doe"/>
<input type="button" id="id3" name="id3" value="Kayla Kaye"/>

我还需要在脚本中添加一个'click'事件处理程序来响应按钮。所有按钮的反应都是一样的(动态地用人物细节填充PAGE3，但我认为如果我看到如何正确处理PAGE2填充，我就能弄清楚)。使用适当的框架动态"创建"PAGE2的正确方法是什么?

如果允许使用jquery:

    var elements = { id1:'Bob Smith', id2:'Jane Doe', id3:'Kayla Kaye'};
    $.each( elements, function( key, value ) {
        $("#PAGE2 .ui-content").append('<input type="button" id="' + key + '" name=" + key " value " + value +'"/>');
    }

你可以试试这个

$('#PAGE2').on('pagebeforeshow', function(){
    var people = [
      { name:'Bob Smith', age:'56', place:'London'},
      { name:'John', age:'65', place:'USA'},
    ];
  var btns;
   $.each(people,function(indx,ppl){
      btns = btns + '<input type="button"  name="id1" value="' +  ppl.name +'"/>';
    });
   $('#content_div').html(btns);
});

设置id为div内容为content_div

这是一个DEMO

像这样设置你的3页(我已经为按钮和细节添加了容器div):

<div data-role="page" id="PAGE1">
     <div data-role="header">
        <h1>PAGE 1</h1> 
    </div>  
    <div role="main" class="ui-content">
        <a href="#PAGE2" class="ui-btn">Go to page 2</a>
    </div> 
</div>  
<div data-role="page" id="PAGE2">
     <div data-role="header">
        <h1>PAGE 2</h1> 
    </div>  
    <div role="main" class="ui-content">
        <div id="thePeople"></div>
    </div> 
</div>  
<div data-role="page" id="PAGE3">
     <div data-role="header">
        <a data-rel="back" class="ui-btn ui-btn-icon-left ui-icon-back">Back </a>
        <h1>PAGE 3</h1> 
    </div>  
    <div role="main" class="ui-content">
        <div id="theDetails"></div>
    </div> 
</div>

您可以使用页面容器小部件的beforeshow事件来进行ajax调用:

http://api.jquerymobile.com/pagecontainer/event-beforeshow

在我的例子中，我检查你从哪里来，你要去哪里。因此，从PAGE1到PAGE2，我进行AJAX调用并创建按钮。但是如果从PAGE3返回到PAGE2，我只保留已经创建的按钮。将按钮添加到页面后，请确保在容器上调用. enhancewithin ()，以便jQM增强按钮。

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    var prevID = ui.prevPage.prop("id");
    var newID = ui.toPage.prop("id");
    if (prevID == "PAGE1" && newID == "PAGE2") {
        //we have come from page 1 to page 2, so make AJAX call and populate page 2
         var data = [
              { "id": "id1", "name":'Bob Smith'},
              { "id": "id2", "name":'Jane Doe'},
              { "id": "id3", "name":'Kayla Kaye'},
        ];
        var buttons = '';
        $.each(data, function(indx){
            buttons += '<input type="button" name="' + this.id + '" value="' +  this.name +'"/>';
        });
        $("#thePeople").empty().append(buttons).enhanceWithin();  
    }
});

最后，在创建PAGE2时，我使用事件委托为可能添加的任何按钮创建单击事件(使用事件委托，在绑定事件时按钮不必存在)。在这种情况下，获取所单击按钮的id/名称，获取详细信息(另一个AJAX调用?)，填充PAGE3，然后使用页面容器小部件更改方法导航到PAGE3:

http://api.jquerymobile.com/pagecontainer/method-change 

$(document).on("pagecreate","#PAGE2", function(){ 
    $(document).on('click', '#thePeople input[type="button"]', function(e){
        var personid = $(this).prop("id");
        var name = $(this).val();
        $("#theDetails").text('Details for ' + name);
        $( ":mobile-pagecontainer" ).pagecontainer( "change", "#PAGE3", { transition: "slide" });
    });
});

相关文章：