Question

我有一个用于在MVC3应用程序中搜索的对话框。对话框上的“搜索”按钮发布到MVC3 Controller操作，该操作返回搜索结果的JSON，然后将其解析为HTML表。当用户单击对话框上的“搜索”按钮时，所有这些都可以正常工作。

但是，在某些情况下，我希望一旦对话框打开，搜索就会自动启动。不幸的是，这不起作用。用户必须以物理方式单击“搜索”按钮才能启动“搜索”。

我的代码如下：

$('#RepSearchDialog').dialog({
          autoOpen: true,
          width: 1050,
          height: 500,
          resizable: false,
          title: 'Rep Search',
          modal: true,
          open: function () {
            $('.ui-dialog-titlebar').hide();
            $('#RepSearchStoreId').val($('#StoreId').val());

            // This part doesn't work, not sure why
            //RepSearchDialog_SearchForReps();
          }
        });

搜索按钮的JS如下：

 $('#RepSearchButton').click(function (e) {
      RepSearchDialog_SearchForReps();
    });

RepSearchDialog_SearchForReps看起来像这样：

function RepSearchDialog_SearchForReps() {
    $('#RepSearchForm').submit(function () {
      $.ajax({
        url: this.action,
        type: "POST",
        cache: false,
        dataType: 'text json',
        data: $(this).serialize(),
        success: RepSearchDialog_SearchForRepsComplete,
        error: function (request, status, error) {
          alert("An error occurred submitting the form. \r\n\r\n Error: " + request.responseText);
        }
      });
      return false;
    });
  }

  function RepSearchDialog_SearchForRepsComplete(response, status, xhr) {
    $('#RepSearchButton').unbind(); // NECESSARY, or you will get stacked calls!!
    if (status == "error") {
      alert('failed');
    }
    else {
      LoadRepSearchResults(response);
    }
  }

RepSearchDialog_SearchForReps调用只是对MVC3控制器进行AJAX调用，并将返回值附加到Dialog中托管的DIV中的HTML表中。当用户单击“搜索”按钮时，所有这些都有效。但是试图在OPEN功能中自动启动它不会。任何线索为什么？

Answer 1

您的搜索按钮正常工作的原因是它仍在使用普通帖子以及调用您的javascript。您需要将其更改为：

$('#RepSearchButton').click(function (e) {
    e.preventDefault();
    RepSearchDialog_SearchForReps();
});

此处e.preventDefault()将停止发生本机提交事件。

另一个问题是你的RepSearchDialog_SearchForReps。设置它的方式是，每次调用RepSearchDialog_SearchForReps时，都会将$ .ajax调用绑定到submit事件。你有两种选择。你可以这样做：

function RepSearchDialog_SearchForReps() {
    var form = $('#RepSearchForm');
    $.ajax({
        url: form.attr('action'),
        type: "POST",
        cache: false,
        dataType: 'text json',
        data: form.serialize(),
        success: RepSearchDialog_SearchForRepsComplete,
        error: function (request, status, error) {
          alert("An error occurred submitting the form. \r\n\r\n Error: " + request.responseText);
        }
    });
}

或者

// this goes in your document ready code elsewhere...
$(function() {
    $('#RepSearchForm').submit(function () {
        $.ajax({
            url: this.action,
            type: "POST",
            cache: false,
            dataType: 'text json',
            data: $(this).serialize(),
            success: RepSearchDialog_SearchForRepsComplete,
            error: function (request, status, error) {
              alert("An error occurred submitting the form. \r\n\r\n Error: " + request.responseText);
            }
        });
        return false;
    });
});

function RepSearchDialog_SearchForReps() {
    $('#RepSearchForm').submit();
}

MVC3＆amp;打开对话框时，JQuery Dialog不会提交表单

1 个答案: