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

Question

我有一个用于在MVC3应用程序中搜索的对话框。对话框上的搜索按钮发布到MVC3控制器操作，该操作返回搜索结果的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调用并附加返回的值es转换为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(); 
}