我试图解决很可能是一个非常常见的问题,并准备了一个简化的测试案例,表明它和我的努力。
I m trying to display several jQuery UI dialogs, each containing several checkboxes of the same name (fruits and candy in my test code below)
在每个方言中,我有4个县:Save,Cancel,,>Select all和Deselect all:
头3个县已经在我的法典中工作。
我的问题在于执行方言的Cancel纽顿:
(1) 我或许应该拯救一份目前对方言公开活动的检查箱清单? 然后在<<>Cancel点上恢复? 是否有这方面的立法权?
2) 我不知道,如何只处理目前开放的辩证箱。
下面是我目前的试验守则,它通过谷歌光盘立即运作:
<html>
<head>
<style type="text/css" title="currentStyle">
@import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var buttons = {
Cancel: cancel,
Save: save,
Deselect All : deselect,
Select All : select
};
$( #fruits ).dialog({
autoOpen: false,
modal: true,
buttons: buttons
});
$( #candy ).dialog({
autoOpen: false,
modal: true,
buttons: buttons
});
});
function update() {
var boxes = new Array();
$( :checkbox ).each(function() {
if ($(this).is( :checked )) {
boxes.push(
$(this).attr( name ) +
= +
$(this).val()
);
}
});
alert( boxes: + boxes.join( & ));
}
function select() {
$( :checkbox ).prop( checked , true);
}
function deselect() {
$( :checkbox ).prop( checked , false);
}
function save() {
// XXX how to implement?
$(this).dialog( close );
}
function cancel() {
// XXX how to implement?
$(this).dialog( close );
}
</script>
</head>
<body>
<p><input type="button" value="Select fruits" onclick="$( #fruits ).dialog( open );"></p>
<div id="fruits" title="fruits">
<p><label><input type="checkbox" name="fruits" value="apple">apple</label></p>
<p><label><input type="checkbox" name="fruits" value="banana">banana</label></p>
<p><label><input type="checkbox" name="fruits" value="pear">pear</label></p>
</div>
<p><input type="button" value="Select candy" onclick="$( #candy ).dialog( open );"></p>
<div id="candy" title="candy">
<p><label><input type="checkbox" name="candy" value="toffee">toffee</label></p>
<p><label><input type="checkbox" name="candy" value="fudge">fudge</label></p>
</div>
<p><input type="button" onclick="update();" value="Update"></p>
</body>
</html>
<><>UPDATE: 由于模拟,以下法典正在发挥作用,但我仍有两个小问题/问题:
(1) 是否可能使用的开放式<>/strong>活动,而不是习惯的开放式方法?
(2) 我的当选所有人和选择 所有县都修改了网页上的所有检查箱,而不是只修改属于目前方言的检查箱。 我想知道,如何选择后者? (有些使用$/strong> in selectedAll() and deselectAll()?
我受审
function selectAll() {
$($(this) + :checkbox ).prop( checked , true);
}
function deselectAll() {
$($(this) + :checkbox ).prop( checked , false);
}
但也有同学错误。
<html>
<head>
<style type="text/css" title="currentStyle">
@import "/css/demo_table_jui.css";
@import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function() {
var buttons = {
Cancel: cancel,
Save: save,
Deselect All : deselectAll,
Select All : selectAll
};
$( #openCandy ).button();
$( #openFruits ).button();
$( #update ).button();
$( #openCandy ).click(function() {
openDialog( #candy );
});
$( #openFruits ).click(function() {
openDialog( #fruits );
});
$( #fruits ).dialog({
autoOpen: false,
modal: true,
buttons: buttons
});
$( #candy ).dialog({
autoOpen: false,
modal: true,
buttons: buttons
});
});
function update() {
var boxes = new Array();
$( :checkbox ).each(function() {
if ($(this).is( :checked )) {
boxes.push(
$(this).attr( name ) +
= +
$(this).val()
);
}
});
alert( boxes: + boxes.join( & ));
}
function selectAll() {
$( :checkbox ).prop( checked , true);
}
function deselectAll() {
$( :checkbox ).prop( checked , false);
}
function openDialog(sel) {
$(sel).dialog( open );
$(sel + :checkbox ).each(function() {
$(this).data( XXX , $(this).is( :checked ));
});
}
function cancel() {
$(this).find( :checkbox ).each(function() {
$(this).prop( checked , $(this).data( XXX ));
});
$(this).dialog( close );
}
function save() {
$(this).dialog( close );
}
</script>
</head>
<body>
<p><input id="openFruits" type="button" value="Select fruits"></p>
<div id="fruits" title="fruits">
<p><label><input type="checkbox" name="fruits" value="apple">apple</label></p>
<p><label><input type="checkbox" name="fruits" value="banana">banana</label></p>
<p><label><input type="checkbox" name="fruits" value="pear">pear</label></p>
</div>
<p><input id="openCandy" type="button" value="Select candy"></p>
<div id="candy" title="candy">
<p><label><input type="checkbox" name="candy" value="toffee">toffee</label></p>
<p><label><input type="checkbox" name="candy" value="fudge">fudge</label></p>
</div>
<p><input id="update" type="button" onclick="update();" value="Update"></p>
</body>
</html>
<>>><>>>> 实际上,我有3个最大的问题:在我方言顶端的X-button上,做不到工作(而不是取消)。
我受审 adding close: cancel, to both dialogs, but I get the runtime error in Chrome:
Uncaught RangeError: Maximum call stack size exceeded
f.event.remove
f.event.remove
f.fn.extend.unbind
a.extend.destroy
a.extend.destroy
a.widget.close
a.widget.bridge.a.fn.(anonymous function)
e.extend.each
e.fn.e.each
a.widget.bridge.a.fn.(anonymous function)
cancel
a.Widget._trigger
a.widget.close
a.widget.bridge.a.fn.(anonymous function)
.....etc....
UPDATE3: Probably because I call $(this).dialog( close ) in a loop?
I don t see an easy way to fix it though: if I create a separate function
function restore() {
$(this).find( :checkbox ).each(function() {
$(this).prop( checked , $(this).data( XXX ));
});
}
function cancel() {
restore();
$(this).dialog( close );
}
并将之作为close: 恢复<>/strong>至方言,然后通过Save。