Display the checkboxes in the jQuery user interface dialog box and click Cancel

Question

Display the checkboxes in the jQuery user interface dialog box and click Cancel

I am trying to solve a probably very common problem and have prepared a simplified test case demonstrating it and my efforts.

I am trying to display several jQuery UI dialogs, each of which contains several flags with the same name (fruits and sweets in my test code below)

In each dialog box, I have 4 buttons: Save , Cancel , Select All and Deselect All :

screenshot

The first three buttons already work in my code.

The Refresh button will actually call the DataTable fnDraw () function , this part already works. (And I do not want to save the values of the flags on the server between them, I would like to do everything on the client side - I know this is possible).

My problem is using the Cancel button for dialogs:

1) Probably, I should save the list of currently installed checkboxes in the opened dialog box? And then restore them to Cancel click? Is there any elegant jQuery path for this?

2) I do not know how to handle only the flags of only an open dialog.

Below is my current test code, it works instantly - thanks to Google CDN:

<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: Thanks to mootinator, the following code works, but I still have 2 minor problems / questions:

1) Is it possible to use an open event instead of the custom openDialog () method?

2) The buttons "Cancel selection" and "Select all" change all the checkboxes on the page - instead of changing only those that belong to the current dialog box. I wonder how to choose only the latest? (somehow use $ (this) in selectAll () and deselectAll ())?

I tried

 function selectAll() { $($(this) + ' :checkbox').prop('checked', true); } function deselectAll() { $($(this) + ' :checkbox').prop('checked', false); }

but get a syntax error.

enter image description here

 <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>

UPDATE2: Actually, I have a 3rd and bigger problem: the closing X-button in the upper right corner of the dialog does not work properly (it cancels instead of saving).

I tried to add close: cancel, in both dialogs, but I get a 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: Perhaps because I'm calling $ (this) .dialog ('close') in a loop?

I don't see an easy way to fix this: 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'); }

and pass it in the close dialog : restore , then the Save button will break

+8

jquery checkbox jquery-ui jquery-selectors jquery-ui-dialog

Alexander farber Oct 4 '11 at 12:38

source share

2 answers

In your save function, you have to call your server side script (using AJAX - check jQuery docs here ) and save the state of each checkbox (if that's what you are ready to do, of course)
In the undo function, I just stick to closing the dialog box, since you don't need to change anything. Rollback of changes made by saving is pointless, since you can always check / delete the required flags and save them again.
How to handle only the flags of the current open dialog - assign a unique identifier to the div container and use the $('#div_id input[type="checkbox"]') selector

0

matino Oct 4 '11 at 12:50

source share

Kevin stricker · Accepted Answer · 2011-10-09T17:50:01+0000

I made a couple of modifications to your code. Probably the easiest task (not necessarily the best) would be to save the state in a global variable. (A more robust solution may include storing state next to dialog state / parameters).

UPDATE : the solution is cleared to keep the original state in the checkbox directly in the DOM, and not in the global variable.

http://jsfiddle.net/rhdNH/8/

I added a custom open function to make it easier to save state and completed the undo function. You can also clear the "original" properties when closing with removeProp , but this is not strictly necessary.

The following are the changes you would make for item # 1 (open: openDialog) so that there is no need to directly access openDialog.

 $('#fruits').dialog({ autoOpen: false, modal: true, buttons: buttons, open: openDialog }); $('#candy').dialog({ autoOpen: false, modal: true, buttons: buttons, open: openDialog });

And this is what your select / deselect should look like for open dialog only:

 function select() { $(':checkbox', this).prop('checked', true); } function deselect() { $(':checkbox', this).prop('checked', false); }

And here openDialog edited to use this instead of the jQuery selector:

 function openDialog() { $(':checkbox', this).each(function() { $(this).prop('original', $(this).is(':checked')); }); } function cancel() { $(this).find('input[type="checkbox"]').each(function() { $(this).prop('checked', $(this).prop('original')); }); $(this).dialog('close'); }

Display the checkboxes in the jQuery user interface dialog box and click Cancel

More articles: