Question

我的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数据库中。但是当它将我重定向到保存列表视图的页面时，我看不到新的行程。我必须点击＆＃39;刷新＆＃39;按钮看到它。这对我没有好处，因为这将是一个移动应用程序。

有人可以帮助我。在此先感谢=）

Answer 1

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

Answer 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);

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

2 个答案: