ReferenceError:未定义ajaxfunction

时间:2013-03-18 23:12:05

标签: php jquery ajax

我一直无法让ajax脚本运行一段时间。

基本上,我需要用户从一个下拉框中选择一个选项,然后根据选择的内容,根据MySQL查询相应地填充第二个下拉框。

我的脚本看起来像

<script type="text/javascript">
    $(function(){
    $('select [name="front-size"]').change(function()
    {
        $.ajax({
            url: '../functions/process.php',
            type:'get',
            data:{'value' : $(this).val()}, 
            dataType:"html",
            success: function(data) {
                $("#sub").html(data);
            }
        });
    });
    });
</script>

我的初始下拉框由MySQL查询填充

<select name="front-size" onchange="ajaxfunction(this.value)">
     <?php
    $door_size = $db->prepare("SELECT DISTINCT door_size FROM doors WHERE door_model = '".$_SESSION['front_door']."'");
    $door_size->execute();
    while($row = $door_size->fetch(PDO::FETCH_ASSOC))
    {
        $size = $row['door_size'];
        echo '<option value="'.$size.'">'.$size.'</option>';
    }
    ?>
</select>

第二个下拉框为空

<select name="front-finish" id="sub" onchange="ajaxfunction(this.value)">
</select>

并且process.php应该根据之前选择的内容进行下一个查询(这可以单独使用)

<?php
    session_start();
    include ('config.php');

    $parent = $_GET['parent'];

    $update_option = $db->prepare("SELECT door_finish FROM doors WHERE door_model = '".$_SESSION['front_door']."' AND door_size = '".$parent."'");
    $update_option->execute();
    while($row = $update_option->fetch(PDO::FETCH_ASSOC))
    {
        $door_finishes = $row['door_finish'];
        echo '<option value="'.$door_finishes.'">'.$door_finishes.'</option>';

    }
?>

在Firebug中,当我选择第一个下拉菜单时,会显示此错误,但我无法解决。

ReferenceError: ajaxfunction is not defined

ajaxfunction(this.value)

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

您正在调用ajax函数,但您尚未在代码中的任何位置定义它。

<script type="text/javascript">
    $(function(){
    $('select [name="front-size"]').change(function()
    {
        $.ajax({
            url: '../functions/process.php',
            type:'get',
            data:{'value' : $(this).val()}, 
            dataType:"html",
            success: function(data) {
                $("#sub").html(data);
            }
        });
    });
    });
function ajaxFunction(stuff){
//do ajax stuff here will fix the error 
}
</script>

更广泛的说明,为什么在准备好的函数中完成同样的事情时,你在html(onchange=ajaxfunction(this.value))中调用内联?

<script type="text/javascript">
(function(){
$('select[name="first"]').change(function(){
//do stuff
});
$('select[name="second"]').change(function(){
//do other stuff
});
})
</script>

会更好

编辑:检查此jsfiddle以获取工作示例http://jsfiddle.net/WF8CV/