Question

Site here.

Why is it that the code works for $('#club').change(function(event) but not for $(document).ready(function()? The $.ajax functions are identical, but the former simply does nothing.

<script type="text/javascript">

    $(document).ready(function() {
        $.ajax({
            type: "post",
            url: "eventinfo.php",
            data:  $(this).serialize(),
            success: function(data) {
                $('#right_inside').html('<h2>' + $('#club').val() + '<span style="font-size: 14px"> (' + data[0].day + ')</h2><p>Entry: ' + data[0].entry + '</p><p>Queue jump: ' + data[0].queuejump + '</p><p>Guestlist closes at ' + data[0].closing + '</p>');
                },
            dataType: "json"
        });
    });

    $('#club').change(function(event) {
        $.ajax({
            type: "post",
            url: "eventinfo.php",
            data:  $(this).serialize(),
            success: function(data) {
                $('#right_inside').html('<h2>' + $('#club').val() + '<span style="font-size: 14px"> (' + data[0].day + ')</h2><p>Entry: ' + data[0].entry + '</p><p>Queue jump: ' + data[0].queuejump + '</p><p>Guestlist closes at ' + data[0].closing + '</p>');
                },
            dataType: "json"
        });

    });

</script>

Answer 1

The request is made. That is easy to verify by checking the Network tab in Chrome Developer Tools. It returns an empty array such that data = []. So data[0].day throws an error and that error isn’t caught.

The difference between the two blocks of code is what’s is contained in the variable this. In the first one it is a jQuery object containing your document. In the second one it is a jquery object containing the <select> element with the id club. Since you want to serialize the same element in your $(document).ready all you have to do is change $(this) to $(#club).