使用 Ajax 将列表项附加到 jquery 移动列表

Posted 2023-05-09

【中文标题】使用 Ajax 将列表项附加到 jquery 移动列表

【英文标题】：Appending list items to jquery mobile list using Ajax

【发布时间】：2017-04-16 11:29:29

【问题描述】：

我的 index.html 中有一个列表视图：

    <section id="dashboard" data-role="page" data-transition="slide">
            <header data-role="header">
                <h1>Trips</h1>
      <a href="#addTrip" id="createNewTrip" data-icon="plus" class="ui-btn-right"></a>

            </header>
      <div class="content" data-role="content">
      <ul id="tripData" data-role="listview">

      </ul>
      </div>
    </section>

我可以使用这个控制器从 SQL 数据库中填充这个列表：

$(function() 
  'use strict';

  $.ajax(
    type: 'GET',
    dataType: "json",

    url: '/webApp/models/class.model.getAllTrips.php?action=getAllTrips',

    success: function(data) 

      //inspect the incoming data objects
      console.log(data);

      $.mobile.loading('hide');

      var dataLength = data.rec.length;

      for (var i = 0; i < data.rec.length; i++) 

        var item = data.rec[i];
        var tripId = item.tripId;
        var userId = item.userId;
        var name = item.name;
        var startDate = item.startDate;
        var endDate = item.endDate;

        var tripDetails = '<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">' + name + '<p><b> Start Date: ' + startDate + '</b></p>' + '<p><b> End Date: ' + endDate + '</b></p>' +
          '<input type="hidden"  value=' + tripId + '>' + '</li></a>';

        //push data into dashboard
        $('#tripData').append(tripDetails);

       //close outer loop

    ,

    error: function() 
      console.log(addTripPostData);
      alert('There was an error handling your request!');
      $.mobile.loading('hide');

    

  );

); 

我现在想让用户能够使用此控制器添加行程：

$(document).ready(function() 

  $('#addTripForm').submit(function() 

    var addTripPostData = $(this).serialize();
    console.log(addTripPostData);

    $.mobile.loading('show', 
      text: 'Adding New Trip - Please Wait',
      textVisible: true,
      theme: 'a'
    );

    $.ajax(
      type: 'POST',
      dataType: "json",
      data: addTripPostData,

      url: '/webApp/models/class.model.addTrip.php?action=addTrip',

      success: function(addTripPostData) 

        console.log(addTripPostData);

        $.mobile.loading('hide');

                $('#tripData').append(tripDetails);
                $$('#activity_contacts').listview('refresh');



      ,

      error: function() 
        console.log(addTripPostData);
        alert('There was an error handling your request!');
        $.mobile.loading('hide');

      

    );

    $.mobile.changePage('#dashboard');

    return false;
  );
);

这适用于我创建的表单。它成功地将项目添加到我的 SQL 数据库中。但是，当它把我重定向到保存我的列表视图的页面时，我看不到新的行程。我必须单击“刷新”按钮才能看到它。这对我没有好处，因为这将是一个移动应用程序。

有人可以帮助我吗？提前致谢 =)

【问题讨论】：

什么是$$('#activity_contacts').listview('refresh');？

【参考方案1】：

我要做的是在添加的元素上添加一个刷新类，检查元素，当一个元素有一个刷新类时刷新它，这样你就可以绕过它。因此，如果您想将其包含在其他页面中，则只刷新页面的一部分。

【讨论】：

它是在线的还是在本地服务器上，如果它在线我可以看到它，如果它离线可能会添加一些错误捕获

【参考方案2】：

您可能需要增强页面的主要内容，列表视图将被包括在内：

$(document).on("pagecontainershow", function(e, ui)  
    var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
    if (typeof ui.toPage == "object") 
        /* manipulate page navigating to */
        switch(pageId) 
            case "dashboard":
                $('.ui-content').enhanceWithin();
                break;
        
    
);

您也可以将$.mobile.changePage('#dashboard'); 移动到 ajax addTrip 成功处理程序中，在$('#tripData').append(tripDetails); 之后