Topic: stuck...again... working with jQuery Pages that link to <a href="https://ozoneasylum.com/backlink?for=31072" title="Pages that link to Topic: stuck...again...  working with jQuery" rel="nofollow" >Topic: stuck...again...  working with jQuery\

 
Author Thread
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-22-2009 17:08 Edit Quote

Hi guys
Stuck on another javascript bit. Workign with jQuery, I have little snippet I wrote to show or hide various <div>'s when a checkbox is clicked, depending on whether or not the checkbox is checked.

There are 5 categories of information being displayed in a table, and the idea is that the user can un-check a box to hide a category, and re-check the box to show the category. There is also a 'show all' checkbox that will show all of the div's (and a couple minor UI bits that check the boxes and disable the input based on the circumstances).

The code I am using is as follows:

code:
$("#cal-all").click(function(){
      if($(this).attr("checked" == true)){
         $("#cal-all").attr("disabled", "disabled");
         $("#cal-head input:not(#cal-all)").attr("checked", "checked");
         $("table.calendar div").show();
      }
   });
   $("#cal-head input:not(#cal-all)").click(function(){
      var classMatch = $(this).attr("id");
      if($(this).attr("checked" == false)){
         $("div." + classMatch).hide();
         $("#cal-all").attr("checked", "");
         $("#cal-all").attr("disabled", "");
      }
      else{
         $("div." + classMatch).show();
      }
   });



Everything works as I want it to except for the last part - the 'else'.

When a box is unchecked, the corresponding div's are hidden (finds all divs with a class that matches that of the checkbox clicked).
When I click the 'show all' checkbox, all div's are shown (just shows all of the divs in the table regardless of class).

But when I check a checkbox that had been un-checked, the corresponding div's are not shown (using the same method of matching the class as the hide).
I posted this on the jQuery help forum, where I've had good luck in the past, and have had no replies. I thought I'd at least get "RTFM newb" or something

I am wondering if the hide() adds a class to the element? Do I need to isolate the class I am looking for in that case?


Any tips appreciated!
thanks

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 06-22-2009 17:37 Edit Quote

I've tried a similar method in the past, what I've found is that you can't concatenate strings in the $() statements.

Try creating a variable first and using this, or else change your method of selection.

eg.

code:
else {
         var my_obj = "div." + classMatch;
         $(my_obj).show();
    }


I think that's what has worked for me in the past.

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-22-2009 18:16 Edit Quote

Thanks. I gave it a shot, but no luck.
It wouldn't make sense for that to be the problem though, as I do concatenate the string in the hide() part without any problems.
I am getting frustrated with this one...I just don't know what to look at in order find the solution...

I have also turned this around...so that if "checked" == true it show()s, else it hide()s - whichever part is in the if{} works, and whichever part is in the else{} does not (I have done different things with this...addClass and removeClass, etc...and whatever code is in the else{} does not seem to be doing anything....)

I am certain that gives a good clue as to the solution, but I still can't figure out what

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-22-2009 20:58 Edit Quote

Ok, I went with a sightly different approach: instead of an if/else, I use the if to check for "checked" so I can still tweak the state of the checkboxes, but I use slideToggle() to show and hide the div's -

code:
$("#cal-head input:not(#cal-all)").click(function(){
		var classMatch = $(this).attr("id");
		if($(this).attr("checked" == false)){
			//$("div." + classMatch).hide();
			$("#cal-all").attr("checked", "");
			$("#cal-all").attr("disabled", "");
			$("label[for=cal-all]").removeClass("disabled");
		}
		$("div." + classMatch).slideToggle("fast");
	});



I would still really like to know why it wasn't working, if anyone can tell, as I am baffled by the behavior.

Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 06-23-2009 10:14 Edit Quote

now, this might be some kind of weird javascript/jquery 'quirk',
but I'd assume this

code:
if($(this).attr("checked" == false)){


to actually read

code:
if($(this).attr("checked") == false){


(and the same on the other if...),

since you're basically retreiving an attribute "false", when passing )"checked" == false) into attr()...

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-24-2009 14:25 Edit Quote

Oh, dammit!

Thanks TP.
I knew it was going to be something stupid...

coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

IP logged posted posted 05-31-2011 11:07 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu