Как повторно вызвать событие отправки формы в обратном вызове диалогового окна jQuery UI - PullRequest
Новая
       35

Как повторно вызвать событие отправки формы в обратном вызове диалогового окна jQuery UI

2 голосов
/ 19 июня 2011

Я пытаюсь использовать JQuery UI Dialog для своего рода «мягкой» проверки - если форма выглядит подозрительно, предупредите пользователя, но все равно разрешите ему продолжить отправку: 

// multiple submit buttons...
var whichButton;
$("#myForm").find("[type=submit]").click(function()
{
  whichButton = this;
}

var userOkWithIt = false;
$("#myForm").submit(function()
{
  if (dataLooksFishy() && !userOkWithIt)
  {
    $("Are you sure you want to do this?").dialog(
    {
      buttons:
      {
        "Yes": function()
        {
          $(this).dialog("close");

          // override check and resubmit form
          userOkWithIt = true;
          // save submit action on form
          $("#myForm").append("<input type='hidden' name='" +
            $(whichSubmit).attr("name") + "' value='" +
            $(whichSubmit).val() + "'>");
          $("#myForm").submit(); /******  Problem *********/
        },
        "No": function() { $(this).dialog("close"); }
      }
    });
    return false; // always prevent form submission here
  } // end data looks fishy

  return true; // allow form submission 
});

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

Нажатие «да» вызывает этот метод повторно, и на этот раз метод возвращает значение true, однако , форма на самом деле не отправляется ...

Я уверен, что мне здесь не хватает лучшей методологии, но главная цель - смоделировать поведение синхронного подтверждения () с асинхронным диалогом ().

1 Ответ

0 голосов
/ 20 августа 2012

Если я правильно понимаю вашу проблему - вот решение.(Я разделил действия на отдельные функции (проще в управлении)):

  1. отправка формы (обычно) проверяет наличие ошибок - dataLooksFishy ()
  2. , если естьошибки - должно появиться диалоговое окно

  3. , если пользователь нажимает «да» - форма будет отправлена ​​с «force = true» 

    var
form = $("#myForm"),

formSubmit = function(force){
    if (dataLooksFishy() && force !== true) return showWarning();   // show warning and prevent submit
    else return true;                                               // allow submit
},

showWarning = function(){
    $("Are you sure you want to do this?").dialog({ buttons: {
        "Yes": function(){ $(this).dialog("close"); formSubmit(true); },
        "No": function() { $(this).dialog("close"); }
    }});
    return false;
},
dataLooksFishy = function(){ 
    return true;     // true when there are validation errors
};

// plain JS form submitting (also works if you hit enter in a text field in a form)
form[0].onsubmit = formSubmit;

Iне удалось проверить его с помощью вашей формы, поскольку вы не разместили его здесь.Если у вас возникли проблемы с этим решением, опубликуйте здесь больше кода, и я постараюсь помочь.

...