如何获得"是"和"不"确认框中的按钮代替"确定"和"取消"

时间:2015-02-27 09:26:34

标签: jquery dialog

我对上述问题进行了一些研究。

我写的代码是:

function yesnodialog(button1, button2){
     var btns = {};
     btns[button2] = function(){
         $(this).dialog('close');
     };
      btns[button1] = function(){ 
          alert('Hello...');
      };
      $("<div>Are you sure you want to delete this..?</div>").dialog({
          buttons:btns
      });
}

$('body').on('click', 'button.delete-button', function() {
    yesnodialog('Yes', 'No');
});

我在对话框附近收到错误为“未定义而非函数”。

是否有任何插件可以添加以支持对话。

提前致谢

2 个答案:

答案 0 :(得分:0)

我在对话框附近收到错误为“未定义不是函数”。

如果您正在使用某个其他文件中的某个功能并且您正在其他页面上使用该功能并且该页面中未引用该功能的js文件,则只会出现此错误。

像:

假设此文件具有名为func1的函数。

<script src='file1.js'></script>

并且您还有另一个名为file2.js的文件正在使用此func1函数,但您忘记引用此文件。然后你就会收到错误。

<script src='file2.js'></script>

所以在这种情况下你必须像这样对堆栈中的两个文件进行引用:

<script src='file1.js'></script> // func1 is here
<script src='file2.js'></script> // now func1 can be used

您的问题的解决方案:

<script src="jquery.js"></script>
<script src="jquery.ui.js"></script> //<---add this library too.

function yesnodialog(button1, button2){
     var btns = {};
     btns[button2] = function(){
         $(this).dialog('close');
     };
      btns[button1] = function(){ 
          alert('Hello...');
      };
      $("<div>Are you sure you want to delete this..?</div>").dialog({
          buttons:btns
      });
}

$('body').on('click', 'button.delete-button', function() {
    yesnodialog('Yes', 'No');
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<button class="delete-button">Test</button>

答案 1 :(得分:0)

试试这种方式

function yesnodialog(button1, button2) {
var buttonsOptions = {};

buttonsOptions[button1] = function() {  alert(button1);  }
buttonsOptions[button2] = function() { alert(button2); }

// Define the Dialog and its properties
$("<div>Are you sure you want to delete this..?</div>").dialog({
    resizable: false,
    modal: true,
    title: "Modal",
    height: 250,
    width: 400,
    buttons: buttonsOpts
});

}