Question

I’m building a form to make a reservation on a website. When you choose a shift, the available dates are loaded. Now I’d like to load the available seats when you pick a date.

//Shift choosen
$("input[name$=shift]").change(function() {
    $.ajax({
        type: 'POST',
        url: '/reservations/date/list/future-notfull-withshift',
        data: $("input[name$='shift']").serialize(),
        success: function(msg) {
                $("#date").html(msg);
                $("#date").fadeIn(250);
            }
    });
});

//Date choosen
$("input[name$=dates]").live("change", function() {
    $.ajax({
        type: 'POST',
        url: '/reservations/date/list/availableseats',
        data: $("input[name$='dates']").serialize(),
        success: function(msg) {
            $("#seats").html(msg);
            $("#seats").fadeIn(250);
        }
    });
});

In this code the first block works just fine, but the second call, which is very much the same, doesn’t work: No Ajax call is made …
Any idea why? How can I solve this?

Answer 1

Be sure that $("input[name$=dates]") find something. Maybe jQuery can’t find your dates input?

BTW: is it your application? If you can – use id attrib or class attrib. input[name$=dates] selector is not very fast. Even scoped find is better: $('#foo').find("input[name$=dates]").live(...).
Also take a look at delegate function in jQuery. Its like live but better 😉