jQuery Mobile和MVC3自动提交

如果我把jQuery Mobile置之度外，下面的代码完美地工作！jQuery Mobile和MVC3自动提交

形式：

@using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" })) 
{ 
    @Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town") 
}

的JavaScript：

<script type="text/javascript"> 
    $(function() { 
     $("#TownID").live('change', function() { 
      //$("#TownID").change(function() { 
      var actionUrl = $('#TheForm1').attr('action') + '/' + $('#TownID').val(); 
      $('#TheForm1').attr('action', actionUrl); 
      $('#TheForm1').submit(); 
     }); 
    }); 
</script>

但是，如果我换行jQuery Mobile的现场周围，然后我每次提交表单，在我的日志只它会一次又一次地将ID字段粘贴到URL字符串的末尾。这只发生在我的日志中，而不是在浏览器中。在浏览器中，它仍然看起来喜欢它正在做正确的事情！例如。

www.mysite.com/Home/SearchTown/2首次

www.mysite.com/Home/SearchTown/2/2所述第二时间

WWW .mysite.com /主页/ SearchTown/2/2/2第三次

但在浏览器中它仍然看起来正确www.mysite.com/Home/SearchTown/2

为什么jQuery Mobile会这样做？

来源

2012-04-24 Bojangles

Iv'e离开了这一个足够长了，没有人有答案！

来源

2012-05-27 10:05:12 Bojangles

这很可能发生，因为每次POST表单时，它都使用AJAX加载响应，并且加载的页面在其中重复了元素ID。

我在这里猜测，但基于你所描述的，它听起来像你的表单发回到一个页面上有相同的形式标记。每当您的表单帖子呈现下一页时，您将获得另一个#TheForm1添加到您的DOM（因为jQuery Mobile保留之前在DOM中加载的页面并且简单地在活动的data-role="page"元素之间交换）。由于这种行为，一旦页面上有多个#TheForm1，选择器$('#TheForm')将永远只返回与该ID相匹配的DOM中的第一个元素 - 这将是您第一次发布的表单。因此，每次发布时，代码都将使用最初修改的表单元素的action属性 - 这就是为什么您会看到多个值附加到URL中的原因。

在jQuery Mobile的，几乎总是更好地确定使用一个类名称和活动页面的容器元素，因为你永远不知道多少次的ID可能跨多个页面的变化DOM重复。因此，不要使用$('#TheForm1')，请指定一个类名并将其与$.mobile.activePage：$('.Form1', $.mobile.activePage)结合使用。（你的选择框也是一样）。

作为一种替代方法，您可以通过将data-ajax="false"添加到表单标记来告诉jQuery Mobile不增强您的表单。这会导致它像没有任何AJAX的正常的完整页面回传。

编辑

我在第3段提出的一点是，你需要确保你总是选择正确的表单元素为当前可见的页面，而不是无意中返回一个是从隐藏视图。全局变量$.mobile.activePage将为您提供当前可见页面的上下文，然后基于类的选择器（而不是基于Id）将确保在更改处理程序中检索到正确的表单元素。事情是这样的：

<form class="town-form" action="#"> 
    <select class="town-selector"> 
     <option value="1">Town A</option> 
     <option value="2">Town B</option> 
     <option value="3">Town C</option> 
    </select> 
</form> 

<script type="text/javascript"> 
    $(function() { 
     $(".town-selector").live('change', function() { 
      var form = $('.town-form', $.mobile.activePage); 
      var actionUrl = form.attr('action') + '/' + $(this).val(); 
      form.attr('action', actionUrl); 
      alert('submitting to: ' + form.attr('action')); 
      form.submit(); 
     }); 
    }); 
</script>

来源

2012-04-24 02:23:04

我了解DOM所发生的一切，但您能否向我展示第三段中所说的内容？ – Bojangles 2012-04-24 08:34:06

，因为您所提交的孔页和jQuery移动不是做花哨这样的事情，每个POST后，它只是附加标识加入document.location ...我已经了解到，在一些移动项目...

，而不是这一行$('#TheForm1').submit();做这样的事情：

var url = $('#TheForm1').attr('action') + '/' + $('#TownID').val(); 

$.post(url, $('#TheForm1').serialize(), function(data) { 
    // do something with data if you send back something... 
    // or just change page with jQuery Mobile API 
}); 

return false;

来源

2012-04-24 19:09:09 balexandre

jQuery Mobile和MVC3自动提交

回答

相关问题