无法定义用于AJAX的函数

时间:2012-01-23 15:32:27

标签: jquery ajax json dom get

更新

经过社区的大量劳动,麻烦和帮助后,以下链接显示了最新版本的代码。 http://jsfiddle.net/BPXMw/

=============================================== ===========

好吧,我似乎在理解队列顺序以及它们如何解决AJAX功能方面遇到了一些实际困难。

我目前正在处理以下脚本项目并遇到问题。 JSFiddle上代码的直接链接是http://jsfiddle.net/gxAr5/15/

var shrunk = true;

function studies(caseNumber) {
    $.get("http://<? echo $_SERVER['HTTP_HOST']; ?>/includes/functions.php", {

        caseNumber: caseNumber

    }, function(data) {
        $(".expanded span").empty().html(data);
    });
}

function shrink(e) {
    e.stopPropagation();
    shrunk = false;
    $this = $("#grid li.expanded");

    $this.empty().stop().animate({
        height: '125px',
        left: $this.data('leftPos'),
        top: $this.data('topPos'),
        width: '114px'
    }, 2000, function() {
        shrunk = true;
        $this.css({
            'left': '0',
            'position': 'relative',
            'top': '0',
            'z-index': '0'
        });
        $("#grid li").removeAttr("style");
    });

    $("#grid li").removeAttr("class");
}

$("#grid li").click(function(e) {
    e.stopPropagation();

    if (shrunk) {
        shrunk = false;

        $(this).addClass("expanded").empty();

        var position = $(this).position();
        $(this).data('leftPos', position.left + 'px');
        $(this).data('topPos', position.top + 'px');

        $(this).css({
            'left': $(this).data('leftPos'),
            'top': $(this).data('topPos'),
            'position': 'absolute',
            'z-index': '2'
        });

        $(this).stop().animate({
            height: '403px',
            left: 0,
            top: 0,
            width: '370px'
        }, 2000, studies);
    }
});

$("html").click(function(e) { shrink(e); });

问题出现在$ .get事件执行但无法传递参数的情况下,因此无法返回任何内容并且两次执行,一次在动画开始时再次结束。

是否有任何善良的灵魂可以解释我应该在哪里定义“研究”,以便该参数通过?

2 个答案:

答案 0 :(得分:1)

您好,我认为问题出在这里

 ...
    }, 2000, function studies(caseNumber) {
$.get("http://<? echo $_SERVER['HTTP_HOST']; ?>/includes/functions.php", {
    caseNumber: caseNumber
}, function(data) {
    $(".expanded span").html(data);
});

当您应该引用它时,您正在声明该函数,首先定义函数:

function studies() {
    $.get("http://<? echo $_SERVER['HTTP_HOST']; ?>/includes/functions.php", {

            caseNumber: caseNumber

        }, function(data) {
            $(".expanded span").html(data);
        });
}

然后在动画完成时调用它(当你只需要引用它时,你在动画完成时定义了函数):

 ...
    }, 2000, studies);

更新

在下面的评论之后,请找到更新jsfiddle http://jsfiddle.net/gxAr5/16/

这个版本你不应该让函数运行两次(我不确定你复制代码时你做错了什么)。

我还得到FUNCTION_NAME未定义,因为你使用常规javascript与jQuery混合而jsfiddle不允许我在jquery范围之外发布函数。因此我也修改了html,以便将文本“case1”,“case2”等作为ID传递,并且用于处理单击LI元素的javascript在第4行完成:

$("#grid li").click(function(){

我还将服务器替换为Google,这样我就可以得到一些输出,我可以看到变量案例编号正在传递给谷歌。

希望有所帮助!

答案 1 :(得分:0)

在您提出的问题代码中(我完全不确定与您最初在小提琴中使用的代码相同),您的studies函数可以访问您在顶部声明的caseNumber var。但是,代码中没有任何内容将caseNumber设置为任何内容,因此它的默认值为undefined。因此,您的$.get来电将错过您要传递的caseNumber参数。

您没有理由因为您发布的代码而导致studies未定义错误。