3

我将 CakePHP 用于一个小型 Web 应用程序，在一个表单页面上有一个下拉菜单可以选择工作编号。我想根据使用 jQuery 在下拉列表中选择的工作编号更新两个文本字段（我也愿意使用默认的 ajax 帮助程序，但我没有取得很大的成功）。

这是我的 jQuery 片段：

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

jobdetails是我的控制器中的一个方法，它根据传入的作业 ID 获取当前作业。但是，当下拉列表更改值时，它不会被调用。我尝试用 alert 函数代替 .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 用 CakePHP 更新 div？

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 回答