Question

我正在使用一个jQuery插件，它在表单的.submit期间执行一些魔术（创建一个隐藏的字符串并将其写入<input type="hidden">项目）。在IE上，如果我通过POST提交表单，那么效果很好，但如果我使用Ajax，则永远不会调用.submit回调。以下是流程示例：

<script type="text/javascript">
    (function (jQuery) {
        jQuery.fn.createHidden = function () {
            // 1. What I want to have called
            $(this).submit(function () {
                var hiddenText = $(document.createElement('input'));
                hiddenText.attr('name', 'hidden');
                hiddenText.attr('type', 'hidden');
                hiddenText.val('1');
                $(this).append(hiddenText);
                alert("1");
            });
            // 2. What I came up with as a workaround
            $(this).parents('div.FormWrapper').submit(function () {
                var form = this.children('form');
                if (form && form.tagName == "FORM") {
                    var hiddenText = $(document.createElement('input'));
                    hiddenText.attr('name', 'hidden');
                    hiddenText.attr('type', 'hidden');
                    hiddenText.val('2');
                    $(form).append(hiddenText);
                    alert("2");
                }
            });
        };
    })(jQuery);
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $(".form").createHidden();
    });
</script>

<div class="FormWrapper">
@*using (Html.BeginForm("About", "Home", FormMethod.Post, new { @class = "form", @id = "form" }))*@
@using (Ajax.BeginForm("About", "Home", new AjaxOptions { UpdateTargetId = "myReply", HttpMethod = "post" }, new { @class = "form", @id = "form" }))
{
    <div class="ExposedData">
        @Html.TextBox("data", "", new { @class = "data" })
        <input type="submit" value="Button" />
        <span id="myReply"></span>
    </div>
}
</div>

// MVC HomeController.cs
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public string About(string hidden)
    {
        return hidden;
    }
}

在IE上使用Http POST时，我看到警报1＆amp; 2，但是当使用Ajax时我只看到警报2. Firefox只显示1. Chrome，Safari和Opera显示1＆amp; 2.

有没有更好的方法来解决这个问题，以便适用于所有浏览器？这可能与我在MVC3中使用的jquery.unobtrusive-ajax.js有关吗？

我已经尝试了$('form').ajaxStart()，AjaxOptions{OnBegin=...}，<form onsubmit=...>但他们没有做到这一点，因为大多数人在访问控制器后被称为，并且因此，hiddenText不包含在表单中。

Answer 1

您应该尝试jQuery froms plugin - 适用于所有浏览器。

也许摆脱表单必须提交的想法，AJAX不需要表单。

表格中的隐藏输入并不是真正推荐的，可以轻松操作。

编辑：

将插件插入插件可能不是最佳方式......

我宁愿建议使用原生$ .ajax函数，这是我刚写的一个现实世界的例子：

$('li.sheet').unbind().bind('click', function() {
    $.id = $(this).attr('id');
    if($(this).next('div.edit').length == 0){
        $.ajax({
                url: 'ajax_handler.php?mode=form&sheet='+$.id,
                success:function(r){
                    $('li#'+$.id).after(r);
                    $('li#'+$.id).next('div.edit').toggle(200);
                }
        });
    }
    else {
        $(this).next('div.edit').toggle(200, function(){
            $(this).remove();
        });
    }
});

Answer 2

如果你想要做的就是在ajax请求中包含更多数据，那么我建议使用数据参数：

$.ajax(...,
       data: {
           hidden: function() { ...build string here...  } 
       });

Answer 3

看起来您的第二个警报来自尝试捕获div上的提交事件。这绝对是一个奇怪的，不一致的事件。

可能发生的事情是，在附加了不显眼的ajax之后，你的createHidden被附加到表单上。所以，当你提交时，它会首先调用unobtrusive-ajax，这很可能会阻止事件传播到其他函数。

尝试使用不显眼的ajax并再次提交，看看你的功能是否会触发。如果是这样，你将不得不试图找出如何首先附加createHidden或使用除了unobtrusive-ajax以外的东西。

Answer 4

我希望我能找到一种使用Ajax.BeginForm()的方式而不必触及我正在使用的外部插件，但最后我遵循了给出的建议，这就是它的结果：

<script type="text/javascript">
    $(document).ready(function () {
        $('.form').createHidden();
        $('.form').unbind('submit.plugin').bind('submit.mything', function (event) {
            event.preventDefault();
            $.ajax({
                url: '/Home/About',
                data: { hidden: $('.form').getHidden() },
                success: function (reply) { $('#myReply').html(reply); }
            });
        });
    });

    (function (jQuery) {
        jQuery.fn.createHidden = function () {
            jQuery.fn.getHidden = function () {
                return 'message';
            };
            $(this).bind('submit.plugin', function () {
                // let it do whatever it does...
            });
        };
    })(jQuery);
</script>

@using (Html.BeginForm("About", "Home", FormMethod.Post, new { @class = "form", @id = "form" }))
{
    @Html.TextBox("data", "", new { @class = "data" })
    <input type="submit" value="Button" />
}
<div id="myReply"></div>

在IE上使用Ajax时，jQuery不会调用表单.submit（）

4 个答案: