How to update <div> using jQuery and CakePHP?

Question

I use CakePHP for a small web application, and on one form page there is a drop-down list to select a job number. I would like to update two text fields based on the job number selected in the drop-down list using jQuery (I am also open to using the ajax helper by default, but I have not had much success with it).

Here is my jQuery snippet:

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

jobdetailsis a method in my controller that gets the current job based on the passed job id. However, it is not called when the outlier changes the value. I tried replacing the warning function with .post instead, and it worked, so onchange is called correctly.

Here <div>I am trying to update:

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, , , . - , ? ajax div CakePHP?

Answer 1

, AJAX URL- "/survey/jobdetails", . 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();
});

Answer 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, .