將變量傳遞給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>