Jquery UI對話框動態函數與傳遞參數

我想構建一個通用函數，我可以從應用程序的任何地方通過傳遞自定義參數傳遞到jQuery UI確認對話框。我一直在尋找和嘗試不同的東西，但以下是我想要使用的邏輯。我究竟做錯了什麼？任何幫助深表感謝。Jquery UI對話框動態函數與傳遞參數

下面是函數：

function popDialog(h, w, deny_btn, confirm_btn, confirm_title, confirm_message, deny_action, confirm_action) { 
    var newDialog = $('<div id="dialog-confirm">\ 
     <p>\ 
     <span class="ui-icon ui-icon-alert" style="float: left;margin: 0 7px 60px 0;"></span>\ 
     ' + confirm_message + '\ 
     </p>\ 
    </div>'); 
    newDialog.dialog({ 
    resizable: false, 
    height: h, 
    width: w, 
    modal: true, 
    autoOpen:false, 
    title: confirm_title, 
    buttons: [ 
     {text: deny_btn: click: function() {deny_action}}, 
     {text: confirm_btn: click: function() {confirm_action}} 
    ] 
    }); 

}

這裏是呼叫：

$("#cancel").click(function(e) { 
    popDialog("210", // height 
       "350", // width 
       "No", // deny_btn 
       "Yes", // confirm_btn 
       "Confirm Cancel", // confirm_title 
       "Are you sure you would like to cancel? Changes will not be saved.", // confirm_message 
       $('#dialog-confirm').dialog('close'), // deny_action 
       window.location = '/some/location/index/<?= $class->getClassid() ?>'); //confirm_action 


});

來源

2013-10-09 G Duggan

這將有助於瞭解目前您有什麼問題......你得到錯誤？ –

可能的問題是由於高度和寬度是無效的字符串。要麼使用整數（不包括引號），要麼使用「210px」和「350px」。 –

謝謝我摘下報價。仍然有同樣的問題，但看不到我得到什麼錯誤。我在受保護的網址上使用了Chrome和Firebug Lite，因此沒有得到很好的錯誤。只有通用的'未捕獲的SyntaxError：意外的令牌<「 –

所以有很多這方面的問題，我認爲解決這些問題的最好方法是一個小的重構。我把代碼放到的jsfiddle用於測試和修補，和這裏的一下就出來了：

http://jsfiddle.net/BDh2z/1/

代碼轉載如下：所以上述

function popDialog(opts) { 
    var newDialog = $('<div id="dialog-confirm"><p>'+opts.message+'</p></div>'); 

    if (!$('#dialog-confirm').length){ $('body').append(newDialog); } 

    newDialog.dialog({ 
    resizable: false, 
    modal: true, 
    title: opts.title, 
    height: opts.height, 
    width: opts.width, 
    buttons: opts.buttons 
    }); 

};

是新的功能定義。事情簡化了很多。讓我們在改變：

函數接受一個選擇對象，而不是爲了清晰一堆參數的個數
HTML模式更加簡單和清晰
autoOpen: false刪除，因爲這會妨礙模態，從開幕無open()調用
按鈕語法在您的示例中完全是borked，修正了這個問題並將按鈕對象委託給調用，它們的語法無論如何都非常乾淨。
實際上增加了模態的HTML，而只是增加了一次

現在，這裏的電話：

popDialog({ 
    width: 300, 
    height: 150, 
    title: 'testing modal', 
    message: 'look it worked!', 
    buttons: { 
    cancel: function(){ $(this).dialog('close') }, 
    confirm: function(){ $(this).dialog('close') } 
    } 
});

更清潔這裏，更容易理解，我們現在主要是因爲這一事實接受一個對象而不是一堆參數。我發現的唯一問題是一個奇怪的僥倖，jquery UI似乎在崩潰內容部分，所以我在jsfiddle的CSS中放棄了一個醜陋的修復。這似乎是jQuery UI的問題，但我會繼續研究它。

這是的jsfiddle完全功能性和好看，讓我知道這裏有什麼困惑，或者如果這並不完全解決您的問題：）

來源

2013-10-09 19:05:05

我喜歡這個解決方案，因爲它更簡單你可以給出一個如何設置和傳遞變量作爲opt類的一部分的例子嗎？謝謝!! –

沒有涉及類，opt只是表示一個簡單的JavaScript對象。要閱讀更多關於對象的信息，請查看以下鏈接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects - 要試驗這些選項，請使用我提供的jsfiddle：） –

感謝你非常喜歡這個詳細的解決方案。它非常完美！ –

我認爲這個問題是要傳遞的返回值的： $('#dialog-confirm').dialog('close') 和 window.location = '/some/location/index/<?= $class->getClassid() ?>' 到你的popDialog函數。要做到這一點，而不是：

功能：

buttons: [ 
    {text: deny_btn, click: deny_action}, 
    {text: confirm_btn, click: confirm_action} 
]

電話：

$("#cancel").click(function(e) { 
popDialog("210", // height 
      "350", // width 
      "No", // deny_btn 
      "Yes", // confirm_btn 
      "Confirm Cancel", // confirm_title 
      "Are you sure you would like to cancel? Changes will not be saved.", // confirm_message 
      function() { $('#dialog-confirm').dialog('close') }, // deny_action 
      function() { window.location = '/some/location/index/<?= $class->getClassid() ?>') }; //confirm_action

}）;

這樣你就可以將函數傳遞給popDialog，而不是值。

來源

2013-10-09 18:34:21

我喜歡這個想法並實現它。仍然沒有骰子得到它在取消，但取消雖然？ –

你仍然得到語法錯誤？這是另一個，不相關的問題。我不認爲JavaScript支持像你這樣的多行字符串，而是，你想結束每個「+」的字符串並用'''開始下一行 –

PS：不要忽略語法錯誤:) –

只是爲了解釋多線的問題（可以」噸，評論，但可以與答案）：

var bad = 'Invalid 
syntax';

var good = 'Valid' + 
'syntax';

來源

2013-10-09 19:14:28

謝謝！這也證明我需要在多行定義的每一行的末尾添加一個反斜槓'\'以避免錯誤。我已經調整了原始代碼以反映這一變化。 –

Jquery UI對話框動態函數與傳遞參數

回答

相關問題