は私のindex.htmlでリストビューを持っているのAjax

Question

を使用してjQueryのモバイルリストにリスト項目を追加は：

<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データベースに項目を正常に追加します。しかし、リストビューが保存されているページに私をリダイレクトすると、新しい旅行は表示されません。私はそれを見るために 'リフレッシュ'ボタンをクリックしなければならない。これはモバイルアプリケーションになるので、これは私にとっては良いことではありません。

誰かが私を助けてくれますか？おかげで事前に=）

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

ます。また `は何$('#tripData').append(tripDetails);