Question

我正在尝试使用Prototype的库创建基于AJAX的CMS系统。在页面加载时，我有通过JSON返回的页面的HTML，页面标题和其他Javascript，我更新了主要区域的HTML。我还有一个事件监听器，可以监听要点击的某些ID。

听众正在工作，

var TabMenu = {
selectedTab: 'main',
showTab: function(pid) { alert(pid); alert($(pid)); 
    $(pid).addClassName('selected'); this.selectedTab = pid;
    $(this.defaultTab).removeClassName('selected');
}};

加载后，我点击其中一个新标签，第一个“测试”警报成功提醒元素的ID，但第二个警报（$（pid））返回null。我只能猜测AJAX请求返回的HTML没有被评估并添加到DOM中，否则它会提醒[HTMLDivElement]而不是“null”。

以下是相关的AJAX调用：

        new Ajax.Request(url, {
        onSuccess: function(t) {
            data = t.responseText.evalJSON();
            Page.update(data.html, data.title, data.js);
            Page.destroyLoader();
        }
    });

这是更新功能：

update: function(data, title, js) {
    document.title = Global.title + title;
    if (title != "") { $('HEADING').update(title); }
    $('MAIN').update(data);
    if (js != "") {
        var nuJS = new Element('script', { type: 'text/javascript' }).update(js);
        $('MAIN').insert({ top: nuJS });
    }
}

关于如何让这个工作的任何想法？

Answer 1

什么时候触发了ajax请求？单击选项卡时是否触发？如果是这样，则在将数据插入DOM之前触发showTab函数。

如果您有firebug，请尝试使用控制台在ajax调用完成后选择html数据，以查看您获得的内容。您还可以使用firebug的html选项卡查看数据是否已插入DOM。

此外，即使您获得了设置为值的pid参数，它是否引用了DOM中存在的实际ID？

Answer 2

从您的代码和上面的评论。我认为您的计划是在页面加载后立即加载所有选项卡。并使用CSS隐藏所有这些。等到用户点击标签，只显示“已选中”的那个，对吧？

这意味着你应该改变：

$('MAIN').update(data);

类似

$('MAIN').update({after: data});

所以它不会覆盖现有的那个。并且不要忘记将document.title和eval js的代码移动到showTab函数中。

对于javascript评估，您可以将js插入data.html并改为使用：

$('MAIN').innerHTML.evalScripts();

原型Event.observe没有看到AJAX返回的HTML

2 个答案: