3

私は小さな Web アプリに CakePHP を使用しており、1 つのフォーム ページにジョブ番号を選択するためのドロップダウンがあります。jQuery を使用して、ドロップダウンで選択したジョブ番号に基づいて 2 つのテキスト フィールドを更新したいと思います (デフォルトの ajax ヘルパーを使用することもできますが、あまり成功しませんでした)。

これが私のjQueryスニペットです：

<script>
    $(document).ready(function() {
        $('#job_id').change(function() {
            $.post('/surveys/jobdetails', {id: $(this).attr('id')});
        })
        .change();
    });
</script>

jobdetails渡されたジョブIDに基づいて現在のジョブを取得するコントローラーのメソッドです。ただし、ドロップダウンの値が変更されたときに呼び出されません。.post の代わりにアラート関数を代用してみましたが、それが機能したため、onchange が正しく呼び出されています。

<div>更新しようとしているのは次のとおりです。

echo "<div id='job_details'>";
echo $form->label('jobtitle', 'Job Title');
echo "<input type='text' name='jobtitle' id='jobtitle'>";
echo $form->label('department', 'Department');
echo "<input type='text' name='department' id='department'>";
echo "</div>";

各テキスト フィールドの値を、ajax 呼び出しから返されたジョブに対応する値に設定したいと考えています。非常に優れた jQuery と CakePHP のドキュメントがたくさんありますが、私がやろうとしていることを完全にカバーしているものは見つかりませんでした。誰かが私が間違っていることを見ることができますか? CakePHPでdivを更新するためにajaxを使用するより良い方法はありますか?

4

2 に答える 2

2

現在、AJAXリクエストは「/ Surveys / jobdetails」URLにヒットしているようですが、結果には何の影響もありません。次のように、AJAXリクエストにコールバックを追加する必要があります。

$(document).ready(function() {
    $('#job_id').change(function() {
        $.post('/surveys/jobdetails', {id: $(this).attr('id')},
        function(result) {
            $('#job_id').html(result);
        });
    })
    .change();
});

また、jQueryにはload（）と呼ばれる便利な関数があり、URLの内容を取得して、選択した要素に適用することで、さらに簡略化できます。

$(document).ready(function() {
    $('#job_id').change(function() {
        $(this).load('/surveys/jobdetails', {id: $(this).attr('id')});
    })
    .change();
});
于 2009-02-23T23:50:02.137 に答える
2

CakePHP コントローラーは次のようにする必要があります。

function jobdetails() {
    // get the data however you want
    // $_POST['id'] will have the job_id
    print json_encode(array(
        'jobtitle' => $jobtitle,
        'department'=>$dept
    ));
    exit;
}

$.post次に、フィールドを実際に更新するコールバックを追加する必要があります。

$(document).ready(function() {
    $('#job_id').change(function() {
        $.post('/surveys/jobdetails', {id: $(this).attr('id')}, function(json) {
            // now that we are in the callback,
            // the variable json is an object
            // with the values we passed above
            // so we can update the fields with the new values
            $('#jobtitle').val(json.jobtitle);
            $('#department').val(json.department);
        });
    })
    .change();
});

また、Firebug のようなツールを入手して、AJAX 要求の進行状況を確認し、サーバーが返していると思われるものを返していることを確認することをお勧めします。これにより、AJAX に関連するすべてのテストとデバッグが簡単になります。

私の意見では、これは DIV 全体を出力して更新するよりもエレガントですが、そのルートに行きたい場合は、jQuery を使用.loadして目的を達成するだけです。

于 2009-02-24T00:24:09.777 に答える