0

我正在尝试使用 Prototype 的库创建基于 AJAX 的 CMS 系统。在页面加载时,我有 HTML、页面标题和通过 JSON 返回的页面的附加 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 });
    }
}

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

4

2 回答 2

0

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

如果你有萤火虫,尝试使用控制台选择 html 数据,在 ajax 调用完成后,看看你得到了什么。您还可以使用 firebug 的 html 选项卡查看数据是否已插入 DOM。

此外,即使您获得pid设置为值的参数,它是否引用了 DOM 中存在的真实 id?

于 2010-02-01T09:56:35.970 回答
0

根据您的代码和上面的评论。我认为您的计划是在页面加载后立即加载所有选项卡。并使用 css 隐藏所有这些。等到用户单击选项卡,只显示“选择”的选项卡,对吗?

这意味着你应该改变:

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

像这样的东西

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

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

对于 javascript 评估,您可以将 js 插入 data.html 并改用它:

$('MAIN').innerHTML.evalScripts();
于 2010-02-17T14:50:26.027 回答