last day (14 days later) » 

12:29 PM
0
Q: Checkbox not filtering as expected with jquery and php

Tommy OtzenI've been struggling with some jquery and php. I have some data I receive from, one of the input from php is put in a class like this: <span class="<?php echo $row1['Tag']; ?>"> I can see the class is add'ed to the DOM as excepted. I want to use the class in a checkbox filter function with jq...

 
Wow, can you clean up your post please. I d'ont even understand what are you trying to achieve and what is your problem. I can give you a clue, based and your code, just do that : $('div.tags').find('input:checked').each(function () { console.log($(this));... You may have a surprise or your answer. I think that $(this) in this case isn't what your expect it to be ;)
 
Sorry for the mess. Will try to clean my question a bit. I put code you gave to console-log, but I'm not sure what the point is?
What I'm trying to achieve is the same as this fiddle
 
haa, much better with the fiddle. The only thing I can see is to check wether your dynamic spans have the corresponding class. For instance, php echo $row1['Tag']; must be either elektro, or maskin or design...
 
When I check the DOM in Chrome I can see this: <span class="elektro">Søger:</span> Which tell me the class is add'ed. I just don't understand why it isn't selected in the jquery script?
 
if you do that $('div.tags').find('input:checked').each(function () { console.log("a box is checked");, do you see something printed in the console ? also, I suggest to attach your handler directly to document and not to the div.tags, but if your are sure, div.tags do exists when document is ready. => $(document).on("click",".tags", function(){...}
 
12:29 PM
I get "a box is checked" in console. Good hint to check for that! The rest you suggest I'm not sure if I understand?
Do you mean like this: $(document).ready(function () { $('.results').show(); $(document).find('input:checkbox').on('click', function () { $('.results').hide(); $(document).find('input:checked').each(function () { $('.doh > span.' + $(this).attr('rel')).show(); }); }); }); ?
I tried it in jsfiddle but it doesn't seem to work, if I did what you explained right?
 
ar, no $(document).ready(function () { $('.results').show(); $(document).on("click",".tags", function(){ $('div.tags').find('input:checked').each(function () {...}}
 
Like this: jsfiddle ? It doesn't work not in fiddle neither on my server?
 
check your console
Uncaught SyntaxError: Unexpected end of input
also,there is no one element with the class .result
here it is
 
It works in the fiddle, but still no luck on the server?
This is how I insert the class from php:
<span class="<?php echo $row1['Tag']; ?>">
 
no matter how you insert it, what is important is the result in the DOM
 
12:39 PM
Thats the target for this line:
$('.doh > span.' + $(this).attr('rel')).show();
 
yeah yeah, I've understood
You said that you have inspected your span and it has the good class
 
It is in the DOM. This is from the DOM:
<span class="it">Søger:</span>
Just copied it and I don't insert that class manually anywhere.
 
There's one of your checkboxes with the "rel" 'it' ?
 
yes
<input type="checkbox" name="checkbox-1-a" id="it" rel="it">
<label for="it">It</label>
 
you've maid this change => $('.doh span').hide(); ?
maide*
made**
 
12:50 PM
I've removed it again, but no difference?
 
You must keep it, or your items in the list won't show
can you create a new fiddle with your HTML once the php is done, and with your js as it is ?
Here, there is nothing about the server side, it's just pure jsuery
jquery*
 
I'll make it now.
or just the jsfiddle:
http://jsfiddle.net/tommyotzen/t387kz67/8/
Just removed some of the companies to clean the code a bit:
http://jsfiddle.net/tommyotzen/t387kz67/11/
I've tried the solution you posted, but still doesn't work. Also in jsfiddle it doesn't work.
 
1:20 PM
I don't see any checkbox in your fiddle
ha ok, it's in the menu
MAn, your DOM is broken !
I take this example
the first image tag is never closed
<p class="doh">
<img style="max-width:100%" <span>Fagområde:</span>El og Energi</br> <span>Telefon:</span> 44207000</br> <span>Email:</span> line.orloff@schneider-electric.com</br>
<img style="max-width:100%" src="data:image/png;base64," />
also, your .doh > span are never hidden
You can show them as long as you want
they are always visible
 
I'll fix the DOM first.
Now the DOM should be fixed:
http://jsfiddle.net/tommyotzen/t387kz67/12/
 
1:38 PM
Ok,
is it normal that your span <span class="elektro">Søger:</span> is allways visible ?
also, I think your dom need a little more fixing
<span class="elektro">Søger:</span> elektro <p>
it's not <span class="elektro">Søger: elektro </span> </p> ??
 
The reason for this is, that I want to use "elektro" as a class, but also a tag visible to the user. Does it make sense?
ah ok
 
wait wait
you want to filter companies based on the checkboxes ?
this : $('.doh > span.' + $(this).attr('rel')).show();
will only make visible the span, not the whole item for the company
 
Yes, that's what I'm trying to do.
 
naaaaar
ok
what you want to hide/show, isn't a span, BUT the div .doh that contains the span
 
Yes, thats right.
 
1:48 PM
that's much better
but still remain something wrong
I don't know why but the :checked is reversed
 
Thats the closest I've ever been!!
 
Honnestly, this isn't interresting for me to help you if you don't understand where were your mistakes
I hope understand what is 'closest', if no, check the doc
Here we are
Use "change" event on checkboxes
not, click on the container
 
I did check docs. Several times. Started with .live() until I learned it was deprecated and changed it to .on(). Then I thought the problem was php.
I see the //$('.doh').show(); made the differences
 
no
since there is nothing in your css telling that .doh is hidden, there is no need to show it when load is finished
the difference is in .closest() and "change" event
feel free to upvote my answer in your original question :D
 
I will!! You've been a great help!!
 
1:59 PM
u're welcome
here, qn.mino@gmail.com
if you need help in the futur
 
I will check out .closest() in the doc to understand it better.
Seriusly? Thats really generous of you!
 

last day (14 days later) »