jQuery Mobile：如何點擊列表中的記錄並對其進行編輯

Question

我有2個頁面：#page_contact_list和#page_contact_edit。點擊列表中的聯繫人後，我希望轉換到#page_contact_edit，加載我單擊的記錄的聯繫人數據並通過單擊保存'保存'按鈕進行保存。

我的問題是：

• 凡在列表中，我應該把記錄ID（MySQL的contacts.id），這是一個特殊的屬性，href參數，...
• 哪個事件是意在趕上我通過我應該用
• 哪個事件作出AJAX調用從數據庫中加載的聯繫資料和填寫表格

• 我應該怎麼做「保存」事件，如果全成接觸ID #page_contact_edit轉回#page_contact_list

  <div data-role="page" id="page_contact_list"> 
      <div data-role="content"> 
       <ul data-role="listview" data-divider-theme="b" data-inset="true"> 
       <li data-role="list-divider" role="heading"> 
        Contacts 
       </li> 
       <li data-theme="c"> 
        <a href="#page_contact_edit" data-transition="slide"> 
         James 
        </a> 
       </li> 
       <li data-theme="c"> 
        <a href="#page_contact_edit" data-transition="slide"> 
         Jenna 
        </a> 
       </li> 
       <li data-theme="c"> 
        <a href="#page_contact_edit" data-transition="slide"> 
         Mark 
        </a> 
       </li> 
       </ul> 
      </div> 
  </div> 
  
  <div data-role="page" id="page_contact_edit"> 
      <div data-role="content"> 
       <form action=""> 
        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup"> 
          <label for="textinput1"> 
           Name 
          </label> 
          <input name="name" id="textinput1" value="" type="text" /> 
         </fieldset> 
        </div> 
        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup"> 
          <label for="textinput2"> 
           Second name 
          </label> 
          <input name="second_name" id="textinput2" value="" type="text" /> 
         </fieldset> 
        </div> 
        <div data-role="fieldcontain"> 
         <fieldset data-role="controlgroup"> 
          <label for="textinput3"> 
           Phone 
          </label> 
          <input name="phone" id="textinput3" value="" type="text" /> 
         </fieldset> 
        </div> 
        <a data-role="button" href="#page_contact_list"> 
         Save 
        </a> 
        <a data-role="button" href="#page_contact_list"> 
         Cancel 
        </a> 
       </form> 
      </div> 
  </div> 
  

JSFIDDLE

Answer 1

請複製粘貼此鏈接到一個html文件的內容，並在本地進行測試。 http://pastebin.com/LyhLrK7Q。

• 凡在列表中，我應該把記錄ID（MySQL的contacts.id），是 這個特殊的屬性，href參數--- 您可以自由使用 由data-任何前綴屬性名參見附件
• 哪個事件是爲了趕上我通過了接觸式ID示例代碼 --- 附着在列表視圖趕data-contact-id ="1"的li點擊。樣本中包含的內容太多了。
• 我應該使用哪個事件作出AJAX調用從數據庫中加載的接觸 數據並填寫表格--- changePage方法 應該是一個很好的地方使用AJAX來獲取該記錄。我用 setTimeout來模擬ajax。您可以使用此計時器回調爲 你的Ajax回調
• 我應該怎麼做「保存」事件，如果全成#page_contact_edit 轉移回#page_contact_list - 編輯頁面上一些JavaScript驗證 應精細。一旦用戶點擊取消或保存 按鈕，我已經向 反向過渡。