1

ユーザーがドロップダウン リストから要素を選択したときに、AJAX 呼び出しを実行しようとしています。イベントが発生するとすぐに.mouseup、AJAX リクエストを起動してデータを送信する必要があります。

これが私が持っているものです：

$('<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);
            }
    });
});

これにより、ドロップダウンから項目を選択すると無限ループが発生します。私は何を間違えましたか？

編集：

@Kolink が以下で提案したように、に変更.mouseupしました.change。これにより、無限ループと「Illegal Invocation」エラーが発生しました。

以下のテストコードを試して、.change正しく実装したことを確認しました。

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

これは期待どおりに機能します。

で AJAX を使用できない理由はあります.changeか?

編集＃2：完全なスクリプトが追加されました

<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>
4

3 に答える 3

5

changeが使用されたことを検出するには、イベントを使用する必要があります<select>。mouseupその要素では信頼できません。

于 2012-09-06T00:12:46.420 に答える
2

無限ループについて

他の人がすでに変更についての部分に答えているので、無限ループの問題について話mouseupしchangeます:

変更ハンドラーがドロップダウンの値を設定している場合、ハンドラーが再度実行されます。ハンドラーは、おそらくドロップダウンが既に期待した状態にあることを検出し、その場合に値の設定を呼び出さないことによって、その状況を検出するのに十分スマートでなければなりません

于 2012-09-06T16:23:09.350 に答える
1

onchange()選択した値が変更されたときにのみ発生するようにイベントを変更してみてください。

于 2012-09-06T00:13:46.827 に答える