Checkbox not filtering as expected with jquery and php

Question

I'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 jquery and jquerymobile.

This is were I get the checkbox input:

  <div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
        <div data-role="header">
            <h1>Menu</h1>
        </div>  


    <form>
        <fieldset data-role="collapsible">
            <legend>Søg</legend>
                <div class="tags">
                <label for="textinput-f">Vælg Virksomheder:</label>

                <input type="checkbox" name="checkbox-1-a" id="it" rel="it">
                <label for="it">It</label>

                <input type="checkbox" name="checkbox-2-a" id="maskin" rel="maskin">
                <label for="maskin">Maskin</label>

                <input type="checkbox" name="checkbox-3-a" id="design" rel="design">
                <label for="design">Design</label>

                <input type="checkbox" name="checkbox-4-a" id="elektro" rel="elektro">
                <label for="elektro">Elektro</label>
                </div>
        </fieldset>
    </form>

My html were I input the php looks like this:

<div data-role="content" id="cont">
           <h1>h</h1>

<form>
    <input data-type="search" id="divOfPs-input">
</form>
<div  class="elements" data-filter="true" data-input="#divOfPs-input" data-role="collapsibleset" data-theme="a" data-content-theme="a">

<?php       
         mysql_connect(localhost,$username,$password);
        @mysql_select_db($database) or die("<b>Unable to specified database</b>");
        //MySQL Query to read data

        $result1 = mysql_query("select * from Company");

        while ($row1 = mysql_fetch_array($result1, MYSQL_ASSOC)) {
?>
         <div class="results" data-mini="true" data-role="collapsible">
             <h3 ><?php echo $row1['CompanyName']; ?></h3>
              <p class="doh">

                <?php echo '<img style="max-width:100%" src="data:image/png;base64,' . base64_encode($row1['CompanyLogo']) . '" />';?></br>
                <span>Fagområde:</span> <?php echo $row1['CompanyField']; ?></br>
                <span>Telefon:</span> <?php echo $row1['ContactPhone']; ?></br>
                <span>Email:</span> <?php echo $row1['ContactEmail']; ?></br>
                <?php echo '<img style="max-width:100%" src="data:image/png;base64,' . base64_encode($row1['ContactImage']) . '" />';?></br>
                <span>Beskrivelse:</span> <?php echo $row1['CompanyDetail']; ?> </br>
                <span class="<?php echo $row1['Tag']; ?>">Søger:</span> <?php echo $row1['Tag']; ?>
              <p>
        </div>
        <?php } ?>

</div>      

<?php
        mysql_close(); // Closing Connection with Server
?>
</div>

and my jquery look like this:

$(document).ready(function () {
        $('.results').show();


        $('div.tags').find('input:checkbox').on('click', function () {

            $('.results').hide();

            $('div.tags').find('input:checked').each(function () {

                $('.doh > span.' + $(this).attr('rel')).show();
            });

        });

   });

I can hide my content with the $('.results').hide(); but it doesn't filter and show my content afterward as I try to with:

        $('div.tags').find('input:checked').each(function () {
            $('.doh > span.' + $(this).attr('rel')).show();
        });

Any feedback would be appreciated.

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 ;) — TCHdvlp
– TCHdvlp, Commented Oct 9, 2014 at 10:08
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? — Tommy Otzen
– Tommy Otzen, Commented Oct 9, 2014 at 10:12
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... — TCHdvlp
– TCHdvlp, Commented Oct 9, 2014 at 10:19
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? — Tommy Otzen
– Tommy Otzen, Commented Oct 9, 2014 at 10:29

TCHdvlp · Accepted Answer · 2014-10-09 13:56:51Z

1

Here is the solution, based on our discussion on the chat http://jsfiddle.net/TCHdevlp/t387kz67/14/

For future readers, there were two chunks 1st : use closest to go up the dom to find a container 2nd : don't use click event but "change" event on checkboxes

edited Oct 9, 2014 at 13:56

answered Oct 9, 2014 at 12:34

TCHdvlp

1,3341 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Checkbox not filtering as expected with jquery and php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related