phpphpjqueryajaxcakephp

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

просмотры: 6.6K

Я использую 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?

Источник

Ответов (2)

Решение

Прямо сейчас кажется, что запрос 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();
});
Источник

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

Источник