Нужно простое объяснение диалога в jquery?

Question

Я только начал изучать jquery и JavaScript, чтобы я мог реализовать его с моим текущим проектом asp.net. Однако мне трудно понять идею, как создать диалоговое окно, которое будет отображаться, когда пользователь пытается нажать кнопку удаления, а затем, если пользователь выберет кнопку «Да», он перейдет к функции удаления в коде позади asp.net или если пользователь выбрал «Нет», он будет прерван, и никаких действий предприниматься не будет.

ПРИМЕЧАНИЕ: Я не ищу кого-то, кто мог бы научить меня, я просто хотел бы получить некоторые пояснения, примеры кода и ссылки на информацию, где я могу читать, понимать и пробовать самостоятельно.

Заранее спасибо.

Answer 1

Простой пример (который не требует jQuery) будет:

function deleteConfirm ()
{
    if ( confirm('Are you sure you want to delete this?') )
    {
        // do ajax call (jquery would be handy for this)
        // or redirect to delete script
    }

    return false;
}

В этом методе используется встроенная функция подтверждения javascript (). Если вы планируете сделать ajax-вызов для доступа к коду asp.net, то я предлагаю использовать ajax-функцию jQuery:

jQuery.ajax , jQuery.post , jQuery.get

Answer 2

Я предполагаю, что вы хотите, чтобы удаление фактически было результатом обратной передачи, которая вызывает обработчик события. Вы также можете сделать это с AJAX, как отметили некоторые другие, и это будет потенциально легче сделать.

Основная идея состоит в том, чтобы у кнопки всплывала диалоговое окно с функцией щелчка, а затем возвращалось значение false, чтобы остановить обычное действие. В вашем обработчике обратного вызова «Да» вам необходимо настроить __EVENTTARGET и использовать __doPostback для имитации нажатия кнопки.

См. Эту ссылку на автостопбек , чтобы увидеть, как она работает и как вы ее смоделируете.

Answer 3

Полностью не проверено, но вы должны понять ... Этот фрагмент связывает событие click всех элементов с классом "delete_user" с диалоговым окном подтверждения.

// Bind the click event to all
$('.delete_user').click(function () {
    // Find the user's ID which is the value of a hidden INPUT element with the
    // same parent as the deletion button.
    var userId = $(this).siblings(':hidden').eq(0).val();

    // Make the user confirm the deletion.
    var result = confirm('Are you sure?');

    // If the user has confirmed deletion, make an AJAX request to:
    // /delete_user/?user=<ID>
    if (result) {
        $.ajax({
            data: { user: userId },
            url: '/delete_user/',
            success: function () { alert('Successfully deleted user!'); },
            error: function () { alert('Error when trying to delete user!'); }
        });
    }

    // Don't ever do what the browser wants you to do by returning false.
    return false;
});

Answer 4

jQuery UI 1.7 теперь имеет встроенный компонент диалога.

Посмотрите на http://docs.jquery.com/UI/Dialog и http://jqueryui.com/demos/dialog/, чтобы найти некоторые примеры того, как его использовать.

В частности, посмотрите на вторую ссылку и пример «Диалог подтверждения». Я думаю, это в значительной степени демонстрирует, что именно вы хотите сделать. Просто нажмите на ссылку «Просмотреть исходный код» чуть ниже демоверсии.

Answer 5

В javascript вы можете использовать «подтвердить», чтобы предотвратить отправку формы, например,

<form onsubmit="return confirm('do you really want to delete this?');" method="post">
<input type="submit" value="click me">
</form>

«return» вернет «true», если вы нажали [ok] в поле подтверждения, после чего форма будет отправлена, или «false», если вы нажали [отменить], и тогда форма не будет отправлена.

[РЕДАКТИРОВАТЬ] Некоторые ссылки, которые могут быть полезны:

• Всплывающее окно ASP.NET
• Добавление клиентских окон сообщений на веб-страницах ASP.NET