0

我有 2 页：#page_contact_list 和 #page_contact_edit。单击列表中的联系人后，我希望转换到#page_contact_edit，加载我单击的记录的联系人数据并通过单击“保存”按钮保存它。

我的问题是：

  • 我应该在列表中的哪个位置放置记录 id (mysql contacts.id)，这是一个特殊属性，一个 href 参数，...
  • 哪个事件旨在捕获我传递的联系人 ID
  • 我应该使用哪个事件来进行 AJAX 调用以从数据库加载联系人数据并填写表单

  • 如果成功#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

4

1 回答 1

1

请将这个 url 中的内容复制粘贴到一个 html 文件并在本地测试。http://pastebin.com/LyhLrK7Q。

  • 我应该在列表中的哪个位置放置记录 id (mysql contacts.id)，这是一个特殊属性，一个 href 参数 ---您可以自由使用任何属性名称前缀，data-参考随附的示例代码
  • 哪个事件旨在捕获我传递的联系人 ID --- 附加单击li列表视图以捕获data-contact-id ="1". 这在样本中也被覆盖了。
  • 我应该使用哪个事件来进行 AJAX 调用以从数据库加载联系人数据并填写表单 --- changePage 方法应该是使用 ajax 获取记录的一个好地方。我曾经 setTimeout模拟ajax。您可以将此计时器回调用作您的 ajax 回调
  • 如果成功#page_contact_edit 转换回#page_contact_list，我应该如何进行“保存”事件 -编辑页面上的一些 javascript 验证应该没问题。一旦用户单击取消或保存按钮，我已将转换设置为反向。
于 2013-01-01T02:50:07.693 回答