Question

I want a html page to be called when I check a checkbox. I tried the following jQuery code, but it isn’t working. What is the mistake I have committed?

 <script type="text/javascript">
        $('#my_checkbox').change(function() {
        alert('Handler for .change() called.');
        $.get("equation_section.html");
        });
</script>

And this is my checkbox:

 <input class="checkbox" type="checkbox" name="my_checkbox" id="my_checkbox"/>

EDIT

 $('#my_checkbox').change(function() {
if ($('#my_checkbox').attr("checked") == true) {
    alert('Handler for .change() called.');
        $('#my_checkbox').addClass('jQlightbox');
            $.get('equation_section.html', function(data) {
                 $('.equation_section').html(data);
        });
    }
 });

This is my edited code. Now I get the alert box. And the page also gets loaded in the div. What if I want only the div content to be displayed upon the modal window and not the previous page content? Someone suggest me please.

Answer 1

You are (probably) getting the page, but then doing nothing with it. Obviously, you should be looking at sample code from the jQuery.get() page

Additionally, do you realize this will be called essentially every time the check box get clicked? If you want to load it the “equation_section.html” page into a div, you could do the following:

In the page:

<div id="equation_section"></div>

Javascript:

<script type="text/javascript">
// on DOM load
$(function () {

  $('#my_checkbox').change(function() {
    alert('Handler for .change() called.');
    $.get('equation_section.html', function(data) {
      $('#equation_section').html(data);
    });
  });

});
</script>

If you are trying to redirect the user to the other page, you should do location.href = "equation_section.html";