I've added onto jeditable to make checkboxes work by combining several examples I've seen online.

Unfortunately I am not able to get the checkbox to select without first selecting the containing element (which has the appearance of having to get the checkbox a double click to check it) However - the checkbox unselects with only one click. I do not have to click the containing element to get this behavior.

I would like to get the checkbox to select with one click - before my designer whomps me with the usability paddle and makes me do a tear out and use standard forms.

Here's the jeditable addition at the end of the jquery.jeditable.js file.


                                                // Create a custom input type 
for checkboxes
                                        $.editable.addInputType("checkbox", {
                                        element : function(settings, original) {
                                                        var input = $('<input 
type="checkbox">');
                                                        $(this).append(input);
                        
                                                        // Update <input>'s 
value when clicked
                                                        
$(input).click(function() {
                                                                        var value = 
$(input).attr("checked") ? 'Yes' : 'No';
                                                                        
$(input).val(value);
                                                        });
                                                        return(input);
                                        },
                                        content : function(string, settings, 
original) {
                                                        var checked = string == 
"Yes" ? 1 : 0;
                                                        var input = 
$(':input:first', this);
                                                        
$(input).attr("checked", checked);
                                                        var value = 
$(input).attr("checked") ? 'Yes' : 'No';
                                                        $(input).val(value);
                                        }
                        });

And here's the code that's calling it on the page.

<script language="JavaScript" type="text/javascript">
                                <!--
                                         $(document).ready(function() {
                                                
$(".editable_field1").editable("http://www.sampledomain.com/test/work_this_checkbox.lasso?ID=3667&field=Partners11 ", {
                                                //              cancel    : 
'Cancel',
                                                                name : 
'content',
                                                                submit    : 0,
                                                                onblur          
: 'submit',
                                                                tooltip   : 
'Select by Checking...',
                                                                type      : 
'checkbox',
                                                        

                                        });
                        });
                        -->
                        </script>

Thanks in advance for any ideas.

Brian Loomis

Reply via email to