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

【问题标题】：Appending list items to jquery mobile list using Ajax使用 Ajax 将列表项附加到 jquery 移动列表
【发布时间】：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');？

标签： javascript jquery ajax jquery-mobile

【解决方案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); 之后

【讨论】：