Передача переменной в диалоговое окно JQuery UI

Я удаляю запись с помощью PHP. Я хочу использовать диалоговое окно JQuery UI для подтверждения действия, но я не знаю, как передать переменную (мой RecordID) в функцию URL-адреса переадресации или разрешить URL-адресу доступ к window.location.href.

$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
    'OK': function() {
            window.location.href = 'url and myvar??';
        $( this ).dialog( "close" );
        },
    'Cancel': function() {
        $( this ).dialog( "close" );
        }
    }
});


$("#delete").click(function() {
    $("#confirm").dialog( "open" ).html ( "Are U Sure?" );
    return false;
});

HTML

<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>

Есть ли хороший способ сделать это?

Ответ 1

Вы можете попробовать использовать метод .data() для хранения данных для вас. Взгляните на этот ответ Передача данных в диалоговом окне jQuery UI

Например, чтобы передать переменную, вы можете сохранить ее с помощью функции данных, прежде чем открывать диалог

$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");

Затем вы можете вернуть это:

var my_data = $("#dialog_div").data('param_1')

Ответ 2

Вы хотите изменить конфигурацию диалога при щелчке (в этом случае поведение кнопки "ОК" ). Для этого у вас много решений, все они уродливые (imo). Я бы советовал создать диалог "на лету" и уничтожить его, как только он был использован, что-то вроде этого:

$("#delete").click(function(ev) {
    ev.preventDefault(); // preventDefault should suffice, no return false
    var href = $(this).attr("href");
    var dialog = $("<div>Are you sure?</div>");

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                window.location = href;
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
});

Или даже лучше, инкапсулируйте диалог подтверждения в функцию, чтобы вы могли повторно использовать его, например:

function confirmDialog(msg) {
    var dialog = $("<div>"+msg+"</div>");
    var def = $.Deferred();

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                def.resolve();
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                def.reject();
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
    return def.promise();
}

И затем используйте его так

confirmDialog("are your sure?").done(function() {
    window.location = $(this).attr("href"); 
}).fail(function() {
    // cry a little
});

Возможно, вам придется проверить, был ли отложен или отклонен отложенный объект, прежде чем закрыть диалоговое окно, чтобы убедиться, что отклонение подтверждения закрывается (а не только нажатием кнопки "Отмена" ). Это можно сделать с условием def.state() === "Ожидание".

Подробнее о jquery отложен: http://api.jquery.com/category/deferred-object/

Ответ 3

Удаление действий, вероятно, не должно выполняться с помощью GET, но если вы захотите сделать это, я бы рекомендовал использовать $.data в jQuery, чтобы каждая ссылка имела атрибут record-record. Затем, щелкнув по одной из ссылок, появится диалоговое окно, и после подтверждения он добавит это URL-адрес и перенаправляет. Пример:

$(function(){
    $(".deleteLink").click(function(){
       var id = $(this).data("record-id");
       var myHref = $(this).attr('href');
        $("#confirmDialog").dialog({
            buttons:{
            "Yes": function()
                {
                    window.location.href = myHref + id;
                }
            }
        });
    });

});

<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
   <p>Are you sure?</p>
</div>