JQuery UI подтвердить диалог на нескольких формах - PullRequest
Новая
       25

JQuery UI подтвердить диалог на нескольких формах

3 голосов
/ 07 октября 2010

У меня есть несколько форм на одной странице, и я хочу добавить диалог подтверждения ко всем из них, используя один и тот же код. Все они имеют класс подтверждения-формы, и заголовок диалогового окна подтверждения должен генерироваться динамически (что не работает в АТМ).

В html у меня есть диалоговое окно, которое скрывается при загрузке страницы, а затем отображается при вызове функции dialog('open').

Это то, что у меня сейчас, и оно просто не работает, диалог загружается, но как только вы нажимаете «Подтвердить», он многократно повторяет предложение else и не отправляет форму: 

var deleteConfirmed = false;
$('form.confirm-form').submit(function(e) {
if ( ! deleteConfirmed)
{
    e.preventDefault();
    var title = $(this).find('input.action').val();
    var $this = $(this);
    console.log('title: ' + title);

    $('#confirm-dialog').attr('title', title);

    $('#confirm-dialog').dialog({
        buttons : {
            "Confirm" : function() {
                deleteConfirmed = true;
                $(this).dialog('close');
                $this.submit();
            },
            "Cancel" : function() {
                $(this).dialog('close');
            }
        }
    });

    $('#confirm-dialog').dialog('open');
}
else
{
    $(this).submit();
    deleteConfirmed = false;
}
});

Ответы [ 2 ]

2 голосов
/ 07 октября 2010

РЕДАКТИРОВАТЬ

Вот одно из возможных решений.Я протестировал его на живом сервере, так как у меня было необычное поведение на jsFiddle.Примечание: я удалил оригинальное сообщение, так как оно не касалось нескольких форм.И, скорее всего, отправка формы будет отправлена ​​с AJAX.

Источник x.html 


<!DOCTYPE html>
<html>
<head><title>SO</title>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">
</script>
<link
  rel="stylesheet"
  type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/>
</head>
<body>

<div id="dlg1"></div>
<form method="post" action="/so/x.php" id="frm1" name="frm1">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm1_submit">
</form>
<form method="post" action="/so/x.php" id="frm2" name="frm2">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm2_submit">
</form>
<form method="post" action="/so/x.php" id="frm3" name="frm3">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm3_submit">
</form>


<script type="text/javascript">
var $current = { form : null, do_submit : false };

$('#dlg1').dialog({
    title: "Confirmation",
    width: 300,
    height: 200,
    autoOpen: false,
    modal: true,
    buttons : {
      "Confirm" : function(e){
        $current.do_submit = true;
        $(this).dialog('close');
      },
      "Cancel"  : function(e){
         $current.do_submit = false;
         $(this).dialog('close');
      }
    }
});

$('#dlg1').bind('dialogbeforeclose', function(){
    if($current.do_submit){
      ($current.form).submit();
      $current.form = null;
      $current.do_submit = false;
    }
});

$('.submitter_btn').click(function(e){
    e.preventDefault();
    $current.form = $(this).parents('form:first');
    $('#dlg1').dialog('open');
});


</script>
</body>
</html>

Источник x.php 


<?php
echo "HELLO";
0 голосов
/ 08 октября 2010

Раньше я сам проверял, пока не нашел этот скрипт .Это НАМНОГО меньше повреждений мозга и, кажется, хорошо справляется с проверкой практически любого типа или комбинации элементов формы.Только одно объявление класса на элемент включает проверку как минимум.Чтобы сделать два (или более) на страницу, вы должны просто создать один экземпляр для каждого идентификатора или имени формы.Довольно просто!

...