當打開對話框時，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(); 
}