Question

I’m trying to execute an AJAX call when the users selects an element from a dropdown list. As soon as a .mouseup event occurs, I want the AJAX request to fire and submit the data.

Here is what I have:

$('<select />')
    .attr('name', 'status')
    .append('<option>Open</option>', '<option>Full</option>', '<option>Canceled</option>')
    .appendTo(this);

$('select[name=status]').mouseup(function () {
    $.ajax({ 
        url: '/ajax/training-update.php',
        data: {status: $currentSelection},
        type: 'POST',
        success: function(output) {
            alert(output);
            }
    });
});

This creates an infinite loop when I select an item from the dropdown. What did I do wrong?

EDIT:

As @Kolink suggested below, I changed .mouseup to .change. This resulted in an infinite loop and an “Illegal Invocation” error.

I tried the test code below to make sure I implemented the .change correctly:

$('select[name=status]').change(function() {
    alert('Handler for .change() called.');
});

This works as expected.

Is there a reason I can’t use AJAX with .change?

EDIT #2: Full script added

<script>
    $(function() {
        var $rowStartDate = $("span[id^=rowStartDate]");
        var $rowEndDate = $("span[id^=rowEndDate]");
        var $location = $(".location");
        var $status = $('.status');
        var $ajaxSubmit = $('#ajaxSubmit');

        $($rowStartDate.add($rowEndDate)).click(function() {
            var $currentSelection = $(this);

            // if there is already an input-field in this TD, return...
            if($currentSelection.find('input').length > 0)
                return;

            $currentSelection.html('');

            $currentSelectionClass = $currentSelection.attr('class');

            //create new input-field-object
            if($currentSelectionClass == "rowStartDate"){
                $('<input type="text" />')
                .attr('name', 'editStartDate')
                .addClass('editStartDate')
                .appendTo(this)
                .datepicker();
            }

            if($currentSelectionClass == "rowEndDate"){
                $('<input type="text" />')
                .attr('name', 'editEndDate')
                .addClass('editEndDate')
                .appendTo(this)
                .datepicker();
            }

       });

        $($location).click(function () {
            var $currentSelection = $(this);

            // if there is already an input-field in this TD, return...
            if($currentSelection.find('select').length > 0)
                return;

            $currentSelection.html('');

            $('<select />')
                .attr('name', 'location')
                .append('<option>Location 1</option>', '<option>Location 2</option>', '<option>Location 3</option>')
                .appendTo(this);
        });

        $($status).click(function () {
            var $currentSelection = $(this);

            // if there is already an input-field in this TD, return...
            if($currentSelection.find('select').length > 0)
                return;

            $currentSelection.html('');

            $('<select />')
                .attr('name', 'status')
                .append('<option>Open</option>', '<option>Full</option>', '<option>Canceled</option>')
                .appendTo(this);

        });

        //AJAX call not working correctly
            $('select[name="status"]').change(function () {
                $.ajax({ 
                    url: '/ajax/training-update.php',
                    data: {status: $currentSelection},
                    type: 'POST',
                    success: function(output) {
                        alert(output);
                        }
                });
            });

       //Original AJAX implementation. Moved to above.
       // $($ajaxSubmit).click(function () {
            // $.ajax({ 
                // url: '/ajax/training-update.php',
                // //data: {action: 'test'},
                // type: 'POST',
                // success: function(output) {
                    // alert(output);
                    // }
            // });
       // });

    // $("#ajaxError").ajaxError(function(event, request, settings){
        // $(this).append("Error requesting page " + settings.url);
    // });

    });
</script>

Answer 1

Try changing your event to onchange() that way it only fires when the value selected changes.