MVC3 & JQuery Dialog won't Submit Form when Opening the Dialog

Question

I have a dialog that is used for searching in an MVC3 application. The Search button on the dialog posts to an MVC3 Controller action that returns JSON of search results which then get parsed into an HTML table. All of that works fine when the user clicks the Search button on the dialog.

However, in some circumstances, I want the search to kick off automatically as soon as the dialog opens. Unfortunately, this doesn't work. The user has to physically click on the Search button in order to initiate the Search.

My code looks like such:

$('#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();
          }
        });

The search button has JS like this:

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

And the RepSearchDialog_SearchForReps looks like this:

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);
    }
  }

The RepSearchDialog_SearchForReps call simply makes an AJAX call to the MVC3 controller and appends the returning values to an HTML table in a DIV hosted inside the Dialog. When the user clicks the Search button all of this works. But trying to kick this off automatically in the OPEN function does not. Any clues why?

Answer 1

The reason that your search button is working is that it is still using the normal post as well as calling your javascript. You need to change it to this:

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

Here the e.preventDefault() will stop the native submit event from occurring.

Another problem is your RepSearchDialog_SearchForReps. The way you have it set up, you are binding the $.ajax call to a submit event every time RepSearchDialog_SearchForReps is called. You have two options for this. You can simply do this:

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);
        }
    });
}

or this

// 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();
}