我有1个对话框,但必须有2个不同的操作(保存和编辑)。基于此,应该显示不同的对话框,并且将发生不同的动作操作。我决定用这样的JQuery来解决这个问题:
$(document).ready(function() {
var dialogEditPartDiv = $('#dialogPart'); // For editing
var dialogAddPartDiv = $('#dialogPart'); // For saving
$('#addButton').click(function()
{
dialogAddPartDiv.dialog('open');
});
dialogAddPartDiv.dialog(
{
autoOpen: false,
modal: true,
buttons:
{
'Save part' : function(){}
},
beforeClose : function(event)
{
if(!confirm("The part won't be saved. Continue?"))
{
return false;
}
else
{
}
}
});
$('#editButton').click(function()
{
dialogEditPartDiv.dialog('open');
});
dialogEditPartDiv.dialog(
{
autoOpen: false,
modal: true,
buttons:
{
'Save changes' : function(){}
},
beforeClose : function(event)
{
if(!confirm("Your changes won't be saved. Continue?"))
{
return false;
}
else
{
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="addButton"> +Add </button>
<button id="editButton"> Edit </button>
<div id="dialogPart">
<table>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td><input type="text" size="80" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td><input type="text" size="80" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="65" value=""></td>
</tr>
</table>
</div>
</body>
但它并不像预期的那样工作。现在,忽略“添加”按钮并始终显示“编辑”对话框。为什么?
您每次都在调用相同的对话框,您需要使每个对话框都是唯一的。 I went to the documentation here,页面底部,我在附加代码中创建了两个对话框,运行它以查看它是如何工作的,然后您可以将其应用于您的代码。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<button id="opener2">open the dialog2</button>
<div id="dialog2" title="Dialog Title">I'm a dialog2</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
$( "#dialog2" ).dialog({ autoOpen: false });
$( "#opener2" ).click(function() {
$( "#dialog2" ).dialog( "open" );
});
</script>
</body>
</html>