Диалог MVC3 и JQuery не будет отправлять форму при открытии диалога - PullRequest
Новая
       4

Диалог MVC3 и JQuery не будет отправлять форму при открытии диалога

2 голосов
/ 01 декабря 2011

У меня есть диалог, который используется для поиска в приложении 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 просто вызывает AJAX-вызов контроллера MVC3 и добавляет возвращаемые значения в таблицу HTML в DIV, размещенном в диалоге. Когда пользователь нажимает кнопку «Поиск», все это работает. Но попытка автоматически отключить это в функции ОТКРЫТЬ не дает. Любые подсказки почему?

1 Ответ

1 голос
/ 01 декабря 2011

Причина, по которой ваша кнопка поиска работает, заключается в том, что она по-прежнему использует обычный пост, а также вызывает ваш javascript. Вам нужно изменить это на: 

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

Здесь e.preventDefault() остановит собственное событие отправки.

Другая проблема - ваш RepSearchDialog_SearchForReps. Как вы его настроили, вы связываете вызов $ .ajax с событием submit каждый раз, когда вызывается RepSearchDialog_SearchForReps. У вас есть два варианта для этого. Вы можете просто сделать это: 

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