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

Question

Я удаляю запись с помощью 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> 

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

Answer 1

Вы хотите изменить конфигурацию диалога при щелчке (в этом случае поведение кнопки «ОК»). Для этого у вас много решений, все они уродливые (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/

Answer 2

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

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

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

Тогда вы можете получить это обратно:

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

Answer 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>