CODEWITHSUNDEEP
jqueryhtml
Jeremiah
Jeremiah

Reputation: 94

Hiding buttons when not needed

I use Jquery in my page to hide buttons which i dont want to show unless needed. In this case its a table with several rows i hide the remove button unless i select a row to be removed... similarly i hide the button that control row manipulation until there is more then one row. I use the following code for it.

jQuery(document).ready(function() {
                if (jQuery(tableId).find("input[type='checkbox']").length == 1) {
                    jQuery(headerCheckbox).hide();
                    jQuery(removeButtonId).hide();
                    jQuery(upButtonId).hide();
                    jQuery(downButtonId).hide();
                } else if (jQuery(tableId).find("input[type=checkbox]:checked").length == 0) {
                    jQuery(removeButtonId).hide();
                    jQuery(upButtonId).hide();
                    jQuery(downButtonId).hide();
                    jQuery(headerCheckbox).click(function() {
                        jQuery(tableId).find("input[type='checkbox']").attr('checked', jQuery(headerCheckbox).is(':checked'));
                    });
                }

                jQuery(tableId).find("input[type='checkbox']").each(function() {
                    if (jQuery(this).attr('id') != headerCheckbox) {
                        jQuery(this).click(function() {
                            if (jQuery(headerCheckbox).is(':checked')) {
                                if (jQuery(tableId).find("input[type=checkbox]:checked").length != 1) {
                                    jQuery(removeButtonId).show();
                                    if (rowCount > 1) {
                                        jQuery(upButtonId).show();
                                        jQuery(downButtonId).show();
                                }
                            } else if (jQuery(tableId).find("input[type=checkbox]:checked").length > 0) {
                                jQuery(removeButtonId).show();
                                if (rowCount > 1) {
                                    jQuery(upButtonId).show();
                                    jQuery(downButtonId).show();
                                }
                            } else {
                                jQuery(removeButtonId).hide();
                                jQuery(upButtonId).hide();
                                jQuery(downButtonId).hide();
                            }
                        }
                    });
                    }
                });
            });

This code without the 

if (rowCount > 1) {
                                jQuery(upButtonId).show();
                                jQuery(downButtonId).show();
                            }

works fine for the remove button but the moment i add this line the behavior goes haywire and works only when the select all is selected...

To explain the variables used most of them are just ID's from there corresponding elements... except rowcount which is a number which is generated by other code... i checked in chrome(Firebug) and the number is generated correctly. But still the code only seem to work when i click on the select all other times it doesnt work also the hide no longer works when unselected,... where am i going wrong?

Upvotes: 0

Views: 131

Answers (1)

cincodenada
cincodenada

Reputation: 3097

I think you're missing a closing brace on the first if(rowCount > 1), it should look like this:

jQuery(tableId).find("input[type='checkbox']").each(function() {
                    if (jQuery(this).attr('id') != headerCheckbox) {
                        jQuery(this).click(function() {
                            if (jQuery(headerCheckbox).is(':checked')) {
                                if (jQuery(tableId).find("input[type=checkbox]:checked").length != 1) {
                                    jQuery(removeButtonId).show();
                                    if (rowCount > 1) {
                                        jQuery(upButtonId).show();
                                        jQuery(downButtonId).show();
                                    }  // <----This one was missing
                                }
                            } else if (jQuery(tableId).find("input[type=checkbox]:checked").length > 0) {
                                jQuery(removeButtonId).show();
                                if (rowCount > 1) {
                                    jQuery(upButtonId).show();
                                    jQuery(downButtonId).show();
                                }
                            } else {
                                jQuery(removeButtonId).hide();
                                jQuery(upButtonId).hide();
                                jQuery(downButtonId).hide();
                            }
                        }
                    });
                    }
                });

That missing brace would certainly cause some strange problems.

Upvotes: 1

Related Questions