jeudi 21 juillet 2016

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" );  

    });


    if (document.getElementById("California").checked){
        alert("Checked");
    }

I had also tried these that are commented out:

    /*
    if($("#California").prop('checked')==true){
alert("Checked");
}
    /*
$('#California').click(function() {
    $(':checkbox').each(function() { 
        if(this.checked = true){
        $( "#test2" ).load( "test1.php" );  

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

/*
if($("#checkboxId").is(':checked')){
alert("Checked");
}
/*
$("#California :checkbox").on("click", function(e){

         var arr = [];

         $(':checkbox:checked').each(function(i){
    $( "#test1" ).load( "test2.php" );  
         });

          //console.log(arr); // u can test it using this in google chrome
});
/*
$("#California :checked").on("change", function(){
 alert("The checkbox with the ID '" + this.id + "' changed");
});

/*
if ($('#California:checked').val() !== undefined)
{
//Checked
$( "#test1" ).load( "test2.php" );  

}
else
{
//Not checked
    $( "#test1" ).html( "" );   

}
/*
$('#California').click(function() {
if ( $('#California').attr('checked')) {
    $('#California').attr('checked', false);
} else {
    $('#California').attr('checked', 'checked');
}
});
/*
$(':checkbox').prop('checked', function (i, value) {
return !value;
});

/*
$('#California').click(function() {
    $(':checkbox').checked(true);
});
  /*
    //toggleInputs($('#California'));
    $('#California').attr('checked', true);
    $("#California:checkbox").on('change', function () {
        //toggleInputs($(this));
        alert("test");
    });

    function toggleInputs(element) {
        if (element.prop('checked')) {
            $( "#test2" ).load( "test2.php" );
        } else {
        $( "#test2" ).html( "test" );


        }
    }/**/
    /*
    function toggleInputs(element) {
              $('#California:checked').load('test2.php'));
    }

    $('#test2').change(function(){
        toggleInputs($(this));
    }).change();
    */


  }) //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"; ?>




Aucun commentaire:

Enregistrer un commentaire