代码之家 › 专栏 › 技术社区 › Laz

在Facebook Wall jQuery代码中找不到错误

html jquery

-1

Laz · 技术社区 · 15 年前

这里有一个简单的jquery和HTML脚本来模拟Facebook的墙,但它不起作用。有人能帮我吗?

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("form#submit_wall").submit(function () {

            var message_box = $('#message_box').attr('value');

            $.ajax({
                type: "POST",

                data: "message_box=" + message_box,
                success: function () {
                    $("ul#wall").prepend("<li style="
                        display: none;
                        ">" + message_box + "</li>");
                    $("ul#wall li:first").fadeIn();
                }
            });
            return false;
        });
    });
</script>
</head>
<body>
    <form id="submit_wall">
        <label for="message_box">Type your experience :</label>
        <input type="text" id="message_box" />
        <button type="submit">Post it!</button>
    </form>
    <ul id="wall"></ul>

3 回复 | 直到 12 年前

Peter Ajtai 15 年前

你的报价被取消了……也不要忘记设置 URL 您正在将请求发送到!
( $.ajax({ url: ... , type: ... )

问题:

$("ul#wall").prepend("<li style="display: none;">"+message_box+"</li>");

您需要注意哪些引号将作为字符串的一部分呈现,哪些引号表示字符串边界。

解决方案:

$("ul#wall").prepend('<li style="display: none;">' + message_box + '</li>');

看看这两个代码片段的语法突出显示的不同之处。

Try it out with this jsFiddle

tvanfosson 15 年前

您使用的变量名不正确。您已经为变量命名了 message_wall 但正试图将其用作 message_box . 您可能还需要提供Ajax文章的URL。如果没有指定,它将使用页面的URL,但通常您会从表单的操作中提取它,因为它可能不同。我也会用 val() 从输入中获取值。

 $('form#submit_wall').submit( function() {
     var url = $(this).attr('action');
     var message_box = $('#message_box').val();
     $.ajax({
         url: url,
         type: 'POST',
         data: 'message_box=' + message_box,
         success: function() { ... }
     });
     return false;
 });

Arnaud F. 15 年前

message_box 未定义,初始化 message_wall …

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前