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

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


jquery ajax asp.net-mvc-3 jquery-dialog
person Chris Holmes    schedule 01.12.2011    source источник
comment
Мне нужно увидеть функцию RepSearchDialog_SearchForReps. У вас есть событие клика, связанное с вашей кнопкой поиска?   -  person John Kalberer    schedule 01.12.2011

Ответы (1)


arrow_upward
1
arrow_downward

Причина, по которой ваша кнопка поиска работает, заключается в том, что она по-прежнему использует обычный пост, а также вызывает ваш 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();
}
person John Kalberer    schedule 01.12.2011
comment
Джон, я попробовал первый вариант с RepSearchDialog_SearchForReps, но возникли две проблемы. Во-первых, this.action, который по праву равен нулю, поэтому я переключил его на селектор $(#'RepSearchForm'). Но, когда я это делаю, это все еще равно нулю. Таким образом, действие для сообщения «не определено». Любая причина для этого? Похоже, что в этот момент JS ничего не знает о форме. Я читал кое-что о том, что вещи перемещаются за пределы BODY при вводе в диалог JQuery. Это влияет на вещи здесь? - person Chris Holmes; 01.12.2011
comment
Джон, у меня получилось. Мне пришлось изменить синтаксис с $('#RepSearchForm').action на $('#RepSearchForm').attr('action'). Есть идеи, почему? Пометка вашего ответа как правильного, потому что вы направили меня в правильном направлении :-) Спасибо! - person Chris Holmes; 02.12.2011
comment
Вы пробовали $(#RepSearchForm).attr(action) ? Я обновил свой пример. - person John Kalberer; 02.12.2011
comment
Да, $(#RepSearchForm) указывает на своего рода объект массива. Это не элемент формы html. - person John Kalberer; 02.12.2011