Question

I am trying to click an input type checkbox.. when clicked an AJAX call is performed. I have a listener set up but nothing fires … firebug also shows nothing.

Code:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js{API removed}"></script>
    <script type="text/javascript">
    $(document).ready(function() {
alert('test');
if ($('#profile_visible:checked').val() !== null) {

        $.ajax({
          url: 'inc/profileVisible.php',
          success: function(data) {
            $('#resultProfileVisible').innerhtml="success";
            alert('Load was performed.');
          }
        });
}
    }
    </script>

…and in the body of the document:

    <form method="post" action="profile/<?php echo $_SESSION['usern']; ?>/settings">
    <p><input type="checkbox" id="profile_visible" name="profile_visible" /> Show Profile<span id="resultProfileVisible"></span></p>
    </form>     

thanks

Answer 1

You don’t have an event listener set up. Bind event handlers with on (jQuery > 1.7) or bind (jQuery < 1.7) or jQuery’s various shortcut methods (like .change or .click):

$(document).ready(function() {
    $("#profile_visible").change(function() {
        if (this.checked) {
            $.ajax({
                url: 'inc/profileVisible.php',
                success: function(data) {
                    $('#resultProfileVisible').html("success");
                    alert('Load was performed.');
                }
            });
        }
    });
});

Also, use .html() instead of .innerHtml to set an element’s html contents when using a jQuery object.

Example: http://jsfiddle.net/andrewwhitaker/8x6h8/1/