0

如果我将 jQuery Mobile 排除在外，则以下代码可以完美运行！

表格：

@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/Home/SearchTown/2/2/2第三次

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

为什么 jQuery Mobile 会这样做？

4

3 回答 3

0

我已经把这个留了足够长的时间，没有人有答案！

于 2012-05-27T10:05:12.437 回答
0

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

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

在 jQuery Mobile 中，使用类名和活动页面作为容器来识别元素几乎总是更好，因为您永远不知道一个 ID 在 DOM 中可能在多个页面更改中重复多少次。因此，不要使用 ，而是$('#TheForm1')分配一个类名并将其与$.mobile.activePage:结合使用$('.Form1', $.mobile.activePage)。（您的选择框也是如此）。

作为替代方案，您可以告诉 jQuery Mobile 不要通过添加data-ajax="false"到表单标签来增强您的表单。这将使其表现得像没有任何 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-24T02:23:04.513 回答
0

因为您正在提交漏洞页面，而 jQuery mobile 不喜欢这样的东西，并且每次POST它只是将 ID 附加到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-24T19:09:09.727 回答