Диалог jQuery не работает с формой HTML

Question

У меня есть простая страница mgmt учетной записи пользователя, которая позволяет администратору удалять учетные записи пользователей.

Я хочу, чтобы диалоговое окно jQuery UI всплыло и прекратилось, когда пользователь с правами администратора нажимает кнопку «удалить», запрашивая подтверждение.

JQuery код:

function getDeleteConfirmation(){
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
    $( "#dialog-confirm-delete" ).dialog({
        modal: true,
        buttons: {
            "Delete": function() {
                      return true;
                      $( this ).dialog( "close" );          
            },
            Cancel: function() {
                      return false;
                      $( this ).dialog( "close" );  
            }
        }

    });}

PHP код:

print "<form action='admin_index.php' method=post>";
print "<input value=".$user_list[$i]."><input type=submit onclick='return getDeleteConfirmation()' value=delete>";
print "</form>";

Проблема в том, что диалоговое окно jQuery всплыло, но вместо остановки и ожидания реакции пользователя оно вскоре исчезло. Страница была перенаправлена, а учетная запись пользователя удалена.

Затем я попытался изменить код следующим образом:

function getDeleteConfirmation(){
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
    $( "#dialog-confirm-delete" ).dialog({
        modal: true,
        buttons: {
               "Delete": function() {
                     window.location = 'admin_index.php';   
                     $( this ).dialog( "close" );
            },
                Cancel: function() {
                     $( this ).dialog( "close" );   
            }
        }
    });

}

и избавьтесь от тегов формы в HTML, оставьте только входные теги

print "<input value=".$user_list[$i]."><input type=submit onclick='return getDeleteConfirmation()' value=delete>";

Диалоговое окно jQuery UI теперь можно остановить, но, нажимая ли я на «Удалить» или «Отмена», соответствующая учетная запись пользователя не удалялась. Кажется, это вызвано тем, что переменная php не была передана.

Я просто хотел бы знать, как заставить все это работать должным образом.

Надеюсь, я прояснил свою проблему, и любая помощь приветствуется!

Answer 1

Ваша проблема в том, что getDeleteConfirmation вернется, прежде чем диалог сможет что-либо сделать.Происходит следующее:

1. Нажмите кнопку отправки.
2. getDeleteConfirmation.
3. Диалог создан.
4. getDeleteConfirmation возвращает.
5. Поскольку getDeleteConfirmation не возвращает false, срабатывает стандартная кнопка отправки.
6. Форма отправлена.

Вынужно return false в getDeleteConfirmation чтобы остановить отправку.Затем вам нужно кнопку Удалить, чтобы отправить форму.Сначала вам нужно указать getDeleteConfirmation, какую форму использовать, и вы можете сделать это, купив ее, нажав кнопку:

<input type="submit" onclick="return getDeleteConfirmation(this)">

Затем некоторые корректировки getDeleteConfirmation:

function getDeleteConfirmation(button) {
    $("#dialog-confirm-delete").dialog({
        modal: true,
        buttons: {
            "Delete": function() {
                $(this).dialog("close");
                $(button).closest('form').submit(); // <--- Trigger the submit.
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }

    });
    return false;  // <--- Stop the submit.
}

Демо(с неработающей формой, поэтому при отправке вы получите сообщение об ошибке): http://jsfiddle.net/ambiguous/kGSCk/

Answer 2

JavaScript не может ждать, пока что-то произойдет.Либо вы можете использовать подтверждение, либо вам придется отправить страницу другим способом.Вы можете отменить событие click, вернув false в getDeleteConfirmation и вызвав submit() в форме в диалоговом окне.

ИЛИ вы можете использовать Ajax для отправки формы на сервер.* Также ваш код диалога имеет недоступный код.Код после выполнения операторов возврата невозможен.

Answer 3

Я думаю, что jQuery UI слишком прост для чего-то такого.Задумывались ли вы надеть это по нажатию вашей ссылки:

if (confirm("Are you sure you want to contiune with this request?")) {
     //Do stuff
}

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

Вы можете сделать это следующим образом.Короче, мы создаем 2 коробки.Один со ссылкой, а второй - всплывающее окно.Внутри всплывающего окна мы помещаем ссылки.Одним из них является ссылка на путь удаления, другим будет скрыто новое всплывающее окно.Simples.Вам нужно оформить всплывающее окно так, чтобы оно было сексуальным и красивымхочу.Теперь для JS

$('.delete').click(function(){
     $('.deleteSexyBox').fadeIn();
});
$('.deleteSexyBox div').click(function(){
     $('.deleteSexyBox').fadeOut();
});

Селекторам js потребуется больше работы, если их будет больше одного, что, я полагаю, будет;) Я не уверен, поможет ли это.Так что, привет, если это не