JQuery связать, чтобы представить вызывающие проблемы - PullRequest
Новая
       12

JQuery связать, чтобы представить вызывающие проблемы

0 голосов
/ 31 марта 2011

Я показываю форму, используя jQuery Fancybox - в форме пользователь имеет возможность редактировать запись или удалять запись.

Конфигурация JS для этого всплывающего окна выглядит следующим образом: 

$('tr.record').click(function() {
    var record_id = $(this).attr("id");
    var link = 'http://' + window.location.hostname + '/expenses/expenses_edit/' + record_id;
    $.fancybox({
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'ajax',
        'href': link,
        'onClosed': function() {
            parent.location.reload(true);
        }
    });
    $.bind("submit", function() {

        $.fancybox.showActivity();

        $.ajax({
            type: "POST",
            cache: false,
            data: $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });
        return false;
    });
});

Это прекрасно работает, когда пользователь изменяет свои данные и нажимает кнопку Сохранить, как показано ниже: 

<form>
    <button>
        <span>
            Save
        </span>
    </button>
</form>

Далее я открыл новую форму для кнопки удаления 

<form>
    <button onclick="confirmDeleteRecord();">
        <span>
            Delete
        </span>
    </button>
</form>

Какой onClick запускает это: 

function confirmDeleteRecord() {
    var agree = confirm("This expense will be removed and you can't undo this action. Are you sure you want to remove this record?");
    if (agree) return true;
    else return false;
}

Проблема, с которой я столкнулся, заключается в том, что когда я нажимаю «Отмена» в модальном подтверждении браузера, форма все еще отправляется, и запись удаляется.

Я подозреваю, что это связано с bind до submit - кто-нибудь знает, как решить эту проблему? «Отмена» должна просто закрыть модальный браузер.

Спасибо за помощь, высоко ценится.

Ответы [ 3 ]

3 голосов
/ 31 марта 2011

Измените HTML кнопки следующим образом (используйте return verifyDeleteRecord ();): 

<button onclick="return confirmDeleteRecord();">         
   <span>             Delete         </span>     
</button>

Редактировать:

Лучший способ - прикрепить обработчик события щелчка к кнопке удаления вненавязчивый способ.Вы можете попробовать это как альтернативу: 

<button id="deleteBtn">         
   <span>             Delete         </span>     
</button> 
<script type="text/javascript">
 $(function(){
    $("#deleteBtn").click(confirmDeleteRecord);
 });
</script>
2 голосов
/ 31 марта 2011

Ваша привязка будет привязана к каждой отправке.Вы должны предоставить идентификатор или селектор класса для каждой отправки.Например: 

$('#classname').submit(function() { // your code here }

См .: http://api.jquery.com/submit/

2 голосов
/ 31 марта 2011

Вы должны привязать обработчик отправки к чему-либо. Это ваша проблемная строка: 

$.bind("submit", function() {

Вам необходимо выбрать отправляемую форму и привязать обработчик отправки к форме. Так, например, если ваша форма имеет идентификатор myForm, она должна выглядеть примерно так: 

$('#myForm').bind("submit", function() {

Или, что еще лучше, используйте быстрый вызов: 

$('#myForm').submit(function() {

Для вашей кнопки удалите onclick="confirmDeleteRecord(); и присвойте ей класс или идентификатор: 

<button id="btnDelete">
    <span>Delete</span>
</button>

И, наконец, добавьте присвоение обработчика кликов в свой jQuery: 

$('#btnDelete').click(confirmDeleteRecord);

Для удобства вы также можете упростить функцию подтверждения, например: 

function confirmDeleteRecord() {
    return confirm("This expense will be removed and you can't undo this action. Are you sure you want to remove this record?");
}
...