2

私はまだjQueryを学んでいますが、問題に遭遇しました。50行以上のテーブルがあります。それぞれに ID が付けられています。

<tr id="51">

この ID はデータベース ID であり、それを jQuery に渡し、AJAX 要求と共に送信する必要があります。

        $($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 id="selectLocation" onChange="locationSubmit()"/>')
                .attr('name', 'location')
                .append('<option>Location 1</option>', '<option>Location 2</option>', '<option>Location 3</option>')
                .appendTo(this);
        });

locationSubmit()

function locationSubmit(){
            var $selectLocation = $('#selectLocation').val();
            var $selectId = $(this).val('tr#id'); //stuck here
            alert($selectId);
            $.ajax({ 
                url: '/ajax/training-update.php',
                data: {
                        action: $selectLocation,
                        courseid: $selectId
                    },
                type: 'POST',
                success: function(output) {
                    alert(output);
                    }
            });
        }

のアラートlocationSubmit()は [object Object] を返しています。tr#idtoの値を渡しlocationSubmit()て AJAX 経由で送信するにはどうすればよいですか?

編集 - HTML

<tr id="51">
    <td><a href="/link/goes/here.php?course_id=5&id=51">course name</a></td>
    <td>
        <span class="rowStartDate" id="rowStartDate151">09/10/12</span> - 
        <span class="rowEndDate" id="rowEndDate151">09/14/12</span>
    </td>
    <td class="location">Location 2</td>
    <td class="status">open</td>
</tr>
4

2 に答える 2

3

それで、何か良い答えはありますか？

これをテストします。

$($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 id="selectLocation"/>')
            .attr('name', 'location')
            .append('<option>Location 1</option>', '<option>Location 2</option>', '<option>Location 3</option>')
            .appendTo(this);
    });

関数を次のように置き換えます。

$('body').delegate('#selectLocation', 'change', function(){

        var $selectLocation = $(this).val(); //Edited here also
        var $selectId = $(this).closest('tr').attr('id'); //edited here
        alert($selectId);
//The AJAX here        
});

ご覧のとおり、関数はなくなり、デリゲートに置き換えられました。これはうまく機能しているように見えました! .delegate()は、DOM の準備が整った後に要素が作成された場合でも、常に機能する非常に優れた関数です。それはずっと聞いている

編集 済み 2 番目のコード部分を確認します。

于 2012-09-10T22:53:45.410 に答える
0 
 var $selectId = $('#selectLocation').parent("tr").attr("id")

ただし、ID を数字だけにすることはお勧めできません。

と ！！

複数の を作成していますids。ドキュメントごとに 1 つだけ定義できます。

使用する：

$($location).on("click" ...

動的オブジェクトを使用するには

変化する：

$('<select class="selectLocation"

それから

$(".selectLocation").change(function()
{
   var $selectLocation = $(this).val();
   var $selectId = $(this).parent("tr").attr('id'); 
   alert($selectId);

        $.ajax({ 
            url: '/ajax/training-update.php',
            data: {
                    action: $selectLocation,
                    courseid: $selectId
                },
            type: 'POST',
            success: function(output) {
                alert(output);
                }
        });


}
于 2012-09-10T22:55:11.793 に答える