Question

我正在编写Rails应用程序，我正在使用jQueryMobile来获取移动视图。

大多数时候，我希望允许JQM通过按常规添加和删除“页面”来操作DOM。但是，在某些情况下，我想覆盖默认行为，并执行一些我自己的简单DOM操作。

例如，我有一个用户列表，每个用户都有一个“添加到联系人”链接/表单。

<ul data-role='listview'>

  <li>
    <span class='name' id="user_56757234">Jim</span>
    <form action="/contacts" class="new_contact_form" data-remote="true" data-type="json" id="new_contact_form_56757234" method="post">
      <!-- form info here -->
      <input name="commit" type="submit" value="Add Contact" />
    </form>
  </li>

  <li>
    <span class='name' id="user_975827294">Fred</span>
    <form action="/contacts" class="new_contact_form" data-remote="true" data-type="json" id="new_contact_form_975827294" method="post">
      <!-- form info here -->
      <input name="commit" type="submit" value="Add Contact" />
    </form>
  </li>

  <!-- etc... -->

</ul>

在用户点击添加给定联系人后，假设请求成功，给定表单应该消失，表示已添加联系人。

我需要符合标准的Rails RESTFUL样式控制器，因此这些表单将提交给ContactsController创建操作，该操作将返回（例如）新联系人的JSON表示。

同样，我想阻止JQM尝试插入新页面 - 我只想删除触发事件的特定表单。但我不想禁用我依赖其他地方的标准JQM行为。

有一种干净，简单的方法吗？

我收集'pagebeforeload'事件是我的朋友，但我不清楚如何设置它。

此帖似乎相关（jquery mobile prevent page change depending on calling page）......但我是否认为这是一个全球性的设置？在我的案例中似乎有点矫枉过正。

这是一个Rails 3.1项目，所以理想情况下我可以在特定于控制器的javascript资源文件中设置它，以一种与标准Rails-UJS相称的方式。

非常感谢任何帮助，

热烈，

Answer 1

类似的东西：

$('#new_contacts').live('pageinit', function(event) {
  $('.new_contact_form_mobile').submit(function(e) {  
    var form = $(this);
    var formData = $(this).serialize();
    var request = $.ajax("/contacts", {
      type: "POST", 
      data: formData,
      dataType: "json"
    });

    request.done(function(msg) {
      form.fadeOut();
    });

    return false;
  });
 });

Answer 2

在表单标记中尝试data-ajax="false"作为属性。这将禁用JQuery Mobile的ajax行为并允许您在Rails中执行ajax调用。

如何在某些情况下禁用jQueryMobile页面更改？

2 个答案: