Sol Sol - 4 months ago 12
Javascript Question

How can you have a persistent checkbox that opens or closes a div each time it is checked in JQuery?

So when the page loads it will check the checkbox and do a function if called. Once it loads the page, then the checkbox is not responsive and won't do anything after that point. The first drop down will load the

test1.php
but the check boxes in
test1.php
don't do anything.

How do you make a checkbox responsive within the second page that is loaded?

$(document).ready(function(){

$('#modal123').on('shown.bs.modal', function (event) {
$('#allsites').on('change', function() {
//alert("test");
$( "#test1" ).load( "test1.php" );

});

$("#California :checked").on("change", function(){
$( "#test1" ).load( "test2.php" );
});



}) //end modal
}); //end script


HTML:

<body>
<div><a href="#"
class='btn btn-default'
role='button'
data-toggle='modal'
data-target='#modal123'
>modal1</a>
</div>
<div id='integrate_employee_popup1'></div>
<!-- modal pop up for [view audits] button -->
<div class="modal fade" style="z-index:10000" id="modal123" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">View car</h4>
</div>
<div class="modal-body">
<select id="allsites">
<option value="Site1">Site1</option>
<option value="Site2">Site2</option>
</select>

<div id="test1"></div>

<div id="test2"></div>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="view_audits_delete" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>


</div>
</div>
</body>
</html>


test1.php

<?php print '<form>
<input type="checkbox" name="detailsgiven" id="California" >California
<br>
<input type="checkbox" name="detailsgiven" id="Georgia" >Georgia
<br>
</form>'; ?>


test2.php

<?php print "Test2"; ?>

Answer

Use event delegation to create event listeners for elements that don't exist yet

$(document).on("change", "#California", function(){
    if(this.checked){
       $( "#test1" ).load( "test2.php" );  
    }
});
Comments