jQuery ui диалог подтверждения на нескольких формах

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

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

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

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

источник

2010-10-07 Becky

EDIT

Это одно из возможных решений. Я тестировал его на реальном сервере, так как я получал какое-то необычное поведение на 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";

источник

2010-10-07 12:54:25 JTP

это сделал работа спасибо! Я решил это по-другому, но прежде чем я прочитаю ваш пост, он, вероятно, не так хорош, как ваш, но он работает! когда они подтвердили действие, я просто отправлю их туда, где происходит обработка формы, вместо того, чтобы пытаться отправить форму. это было бы намного проще, хотя если бы существовала противоположная функция «preventDefault()» – Becky

Добро пожаловать. Я рад, что это помогло. У меня было аналогичное требование вместо обычных диалоговых окон предупреждения о ванильном JavaScript с диалоговом окне jQuery. После немного поиграв с опубликованным фрагментом кода, я смог разделить атрибут «.bind» и «do_submit» объектного литерала, назначенного на $ current. Что касается обратного или обратного события event.preventDefault(), то на соответствующей странице API jQuery есть интересные комментарии, связанные с этим http://api.jquery.com/event.preventDefault/. – JTP

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

источник

2010-10-07 22:13:42 bpeterson76

Это потрясающе. Должен попробовать это сам. Спасибо за ссылку. – JTP

Моя форма проверки все сделано изнутри kohana, я хотел что-то, что бы появилось небольшое окно подтверждения, говоря «вы уверены, что хотите удалить это и т. Д.», Когда пользователь решил удалить что-то, спасибо за ссылку, хотя! – Becky

Бекки, мы также выполняем нашу проверку на внутреннем интерфейсе ... этот скрипт позволяет легко выполнить проверку на уровне входа. Несмотря на то, что он не может ответить на ваш вопрос, проверка на стороне клиента почти всегда предпочтительнее, чем просто назад, потому что она быстрее и прерывает работу пользователя только намного меньше. Он также сохраняет хиты на вашем сервере. – bpeterson76

jQuery ui диалог подтверждения на нескольких формах

ответ

Смежные вопросы