Проблема с ajaxForm

Итак, вот проблема, которая у меня есть: я пытаюсь отправить форму, используя jQuery и ajaxForm (плагин Form). Однако, когда я нажимаю кнопку отправки, я не получаю ответа (и никаких ошибок). В форме есть обязательные поля, и ответ, который я сейчас ожидаю, представляет собой предупреждение, информирующее меня о том, что одно (или несколько) обязательных полей отсутствует, и подробное описание того, какие поля нуждаются в данных для успешного заполнения формы.

Приложение построено в CodeIgniter, поэтому действие формы выглядит именно так.

Вот мой код jQuery:

$(function () {

  $("#div_id").dialog({

    autoOpen: false,
    closeOnEscape: true,
    modal: true,
    width: 600,
    title: "A Title",
    buttons: {

      "SUBMIT": function() {

        $("#form_id").ajaxForm({

          dataType: "json",
          success: function(response) {

            response = $.parseJSON(response);
            alert(response['message']);
          }
        });
      },
      "CANCEL": function() {

        // Some clean up here
        $("#div_id").dialog("close");
      }
    },
    close: function() {

      // Some clean up here
      $("#div_id").dialog("close");
    }
  });
});

Вот тег формы:

<form method="post" id="form_id" action="/controller/function">

Кроме того, я правильно подключаюсь к плагину ajaxForm. Так что проблема там не живет. Я все еще изучаю jQuery, и любая помощь приветствуется. Я просматривал http://www.malsup.com/jquery/form/ и документацию jQuery, но не нашел ответа.

Заранее спасибо!


person Clement Smith    schedule 24.03.2013    source источник
comment
Вы получаете какие-либо ошибки консоли? Можно ли вызвать действие формы напрямую, чтобы убедиться, что ci-контроллер и маршрут работают нормально? Изменить: может быть, поможет action=‹?php echo base_url()?›controller/function. Просто догадываюсь, потому что я не знаю ваших точных маршрутов/настройки контроллера   -  person hyde    schedule 24.03.2013
comment
К сожалению, я вообще не получаю ошибок консоли. Мои маршруты CI — это просто настройка по умолчанию. Эта форма основана на существующей рабочей форме, выполняющей ту же функцию, которая будет заменена, если я смогу заставить ее работать. Ничего страшного, если мне придется обновить страницу. В основном, я надеялся сделать форму липкой. Если я использую обычный код CI, в котором вы вызываете redirect('/controller', 'refresh'), то я могу заставить его работать, заставив Javascript проверять, что во все необходимые поля введены данные. Затем, если они это сделают, отправьте форму, обработайте ее, а затем перенаправьте на исходную страницу.   -  person Clement Smith    schedule 24.03.2013
comment
Однако мне нужно это выяснить, потому что будут формы, которые нужно отправлять без обновления страницы.   -  person Clement Smith    schedule 24.03.2013


Ответы (1)


Я решил проблему. Для тех, кто найдет этот вопрос и ответ в будущем, это то, что я должен был сделать:

Во-первых, это пример функции загрузки (при условии, что вы используете jQuery):

$(function () {
  $("#div_id").dialog({

  autoOpen: false,
  closeOnEscape: true,
  modal: true,
  width: 600,
  title: "Your Title",
  buttons: {

    "SUBMIT": function() { $("#form_id").submit() },
    "CANCEL": function() {

      // Other clean-up functions here
      $("#div_id").dialog("close");
    }
  },
  close: function() {

    // Other clean-up functions here
    $("#div_id").dialog("close");
  }
  });
});

Убедитесь, что ваш вызов submit() помещен внутри

function(){ }

Когда я этого не делал, мои формы продолжали пытаться отправить себя, как только страница загружалась. Когда я поместил их в строку кода выше, это прекратилось.


Все, что последует, идет после функции onload, описанной выше.

Во-вторых, установите переменную параметров ajaxForm:

var ajaxFormOptionsVariable = {

  beforeSubmit:  ajaxFormPreSubmitFunction,
  success:       ajaxFormPostSubmitFunction,
  type:          "post",
  dataType:      "json"
};

Теперь несколько слов о параметрах ajaxForm. Что должно быть очевидным (но может и не быть — и это нормально), так это то, что вы можете назвать свою переменную как угодно. Что может быть менее очевидным, так это то, что вам понадобится отдельная переменная для каждого диалогового окна формы, которое вы будете иметь на странице. Будьте осторожны с именами!

Функции, названные вашей функцией «beforeSubmit» и функциями «успеха», также могут называться как угодно. Если у вас есть разные формы, требующие разной обработки, вам нужно определить разные функции для каждой формы. Опять же, будьте осторожны с вашим именем!

Ваша функция «beforeSubmit» не является обязательной. Вы также можете использовать «get» для «type», и я знаю, что есть другие параметры для «dataType», но я их не знаю (и в настоящее время они не нужны). Однако, если вы не хотите, чтобы ваши данные отправлялись в виде объекта json, изучите подключаемый модуль, чтобы найти свои варианты.

В-третьих, создайте экземпляр объекта ajaxForm:

$('#form_id').ajaxForm(ajaxFormOptionsVariable);

В-четвертых, определите свои функции «beforeSubmit» и «success»:

function ajaxFormPreSubmitFunction(response, statusText, xhr, $form) {

  // Whatever processing you want to do before the form is submitted - 
  // probably validation
}

function ajaxFormPostSubmitFunction(response, statusText, xhr, $form) {

  // Whatever processing you want to do after the form is submitted
  // This is where displaying a message to the user happens
}

Несколько слов об аргументах, предоставляемых вашим функциям обратного вызова. Во-первых, ответ — это то, где будет находиться то, что вы получите от сервера. Во-вторых, вам не нужно

response = $.parseJSON(response);

Ответ обрабатывается автоматически. В обратном вызове отправки сообщения моего скрипта я фактически возвращаю массив, в котором один элемент является значением true/false, а другой — любым сообщением, которое я хочу отобразить пользователю, например:

if (response['result'] == true) {

  $("#success_dialog").html(response['message']);
  $("#success_dialog").dialog("open");
}
else {

  $("#error_dialog").html(response['message']);
  $("#error_dialog").dialog("open");
}

Итак, это все. У меня был неправильный код, чтобы это сделать. После некоторого разочарования у меня это работает. Я хотел вернуться и поделиться им, чтобы вопрос можно было пометить как ответ (чтобы никто не тратил на это время, так как я решил его), а также помочь всем, кто может наткнуться на это сообщение в будущем.

person Clement Smith    schedule 28.03.2013