Using checkbox to show/hide dynamic divs doesn't work

Question

I have a webpage that uses javascript and ajaxpage to load a page inside another page without having to refresh. The code looks like this:

<a href="javascript:ajaxpage('r/gd.php','releases');">LINK</a>

Clicking on LINK will load 'r/gd.php' into the DIV I have labeled as 'releases'. I got the backbone of the code to accomplish this from this website here:

http://dynamicdrive.com/dynamicindex17/ajaxcontent.htm

This all works great until I attempt to use checkboxes to filter the content of a DIV on a loaded page. What I would like to do is have a series of checkboxes with unique IDs like this:

<input type="checkbox" id="all"> Show All
<input type="checkbox" id="red"> Red
<input type="checkbox" id="orange"> Orange
<input type="checkbox" id="yellow"> Yellow

These would then show/hide various DIVs when checked/unchecked that contain a series of classes like so:

<div id="box" class="all red"><?php echo $gdclock; ?></div>
<div id="box" class="all red orange"><?php echo $gdheart; ?></div>
<div id="box" class="all orange"><?php echo $gdblue; ?></div>
<div id="box" class="all red orange yellow"><?php echo $gdwhite; ?></div>
<div id="box" class="all yellow"><?php echo $gdclearsplat; ?></div>
<div id="box" class="all red yellow"><?php echo $gdredblack; ?></div>

I'm not sure how to accomplish this on a page that is loaded the way I am doing so. I have used examples such as this and this that work great when just visiting a URL, but as soon as I go to use the same code on a dynamically loaded page, it does nothing.

Is there something I am missing here? This is a link to my webpage (best viewed on desktop). If you click on ALL ALBUMS in the left side bar, a page full of vinyl records will load with checkboxes at the top. I'd like to filter based on colour (using classes/IDs as described above) and hide everything else. Have more than one checkbox active at a time is ideal.

Hi and Welcome to SO. please take the tour first. Then read how to ask questions here. After that edit the question to meet the guidelines and provide a minimal reproducible example for debugging details (compiled version that shows the issue not php). Please also read: Can I just link to my website?. Questions must always be self containing without requiring to use external resources. What have you tried with JS so far? — tacoshy
– tacoshy, Commented Oct 14, 2021 at 1:42
PS: AN ID must be unique. Using an ID multiple times is invalid HTML. — tacoshy
– tacoshy, Commented Oct 14, 2021 at 1:52
Can you include the code for the function ajaxpage and some sample data from that the Ajax call? — u936293
– u936293, Commented Oct 14, 2021 at 4:40

u936293 · Accepted Answer · 2021-10-14 05:14:41Z

0

Your original question does not seem to show a link between the Ajax call and selectively turning on/off Html elements. Is this what you are seeking?

$(document).ready(() => {
  $("#all div").hide();
  $("p#checkboxes > :checkbox").change(() => {
    $("#all div").hide();
    if ($("#all").is(":checked")) $("#all div").show();
    else {
      if ($("#red").is(":checked")) $(".red").show();
      if ($("#orange").is(":checked")) $(".orange").show();
      if ($("#yellow").is(":checked")) $(".yellow").show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<p id="checkboxes">
  <input type="checkbox" id="all"> Show All
  <input type="checkbox" id="red"> Red
  <input type="checkbox" id="orange"> Orange
  <input type="checkbox" id="yellow"> Yellow
</p>

<div id="all">
  <div class="red">Only red stuff</div>
  <div class="red orange">red & orange stuff</div>
  <div class="orange">Only orange stuff</div>
  <div class="red orange yellow">anything</div>
  <div class="yellow">Only yellow things</div>
  <div class="red yellow">Red & yellow</div>
</div>

If above is not what you need, please provide more details in your question.

answered Oct 14, 2021 at 5:14

u936293

16.5k34 gold badges125 silver badges225 bronze badges

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

2 Comments

Allan Stanley Over a year ago

This code is exactly what I want to do. When I add it to my website, it works flawlessly on its own (alkalinetrio.rf.gd/flowers.php). However, when I use ajaxpage to load the flowers.php page it doesn't work 99% of the time. Sometimes it will run, but most of the time it will not. The code for ajaxpage can be found here: dynamicdrive.com/dynamicindex17/ajaxcontent.htm Is something conflicting? I don't understand why this is happening.

Allan Stanley Over a year ago

Thank you for your reply. I have posted a new question about dynamic ajax page launching working properly with javascript. I hope I have asked my question correctly. It is here: stackoverflow.com/q/69622581/17146620

Collectives™ on Stack Overflow

Using checkbox to show/hide dynamic divs doesn't work

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related