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:
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.
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.