Как обновить <div>с помощью jQuery и CakePHP?

Question

Я использую CakePHP для небольшого веб-приложения, и на одной странице формы есть раскрывающийся список для выбора номера работы. Я хотел бы обновить два текстовых поля на основе номера задания, выбранного в раскрывающемся списке, с помощью jQuery (я также открыт для использования помощника по умолчанию ajax, но у меня не было большого успеха с ним).

Вот мой фрагмент jQuery:

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

jobdetails - это метод в моем контроллере, который получает текущее задание на основе переданного идентификатора задания. Однако он не вызывается при изменении значения раскрывающегося списка. Я попытался заменить функцию оповещения вместо .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, но я не нашел ничего, что бы полностью охватывало то, что я пытаюсь сделать. Кто-нибудь может увидеть, что я делаю не так? Есть ли лучший способ использовать ajax для обновления div с помощью CakePHP?

Answer 1

Ваш контроллер 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 для достижения того, что вы хотите.

Answer 2

Сейчас кажется, что запрос AJAX попадает по URL-адресу "/ surveyys / 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();
});