将变量传递给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 
}); 

您可能需要检查的递延对象已被拒绝，或者您关闭对话框前解决，以保证确认[R关闭时弹出（而不仅仅是按“取消”按钮）。这可以通过def.state（）===“pending”条件来完成。

有关jQuery的延迟的更多信息：http://api.jquery.com/category/deferred-object/

Answer 2

您可以尝试使用。数据（）方法来存储数据为您服务。

：看看这个答案 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来完成，但是如果你想这样做，我会建议在jQuery中使用$ .data，这样每个链接都有一个data-record-id属性。然后点击其中一个链接，弹出对话框，并在确认后将其添加到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>