prototypeJS DOM 和 AJAX 交互答案

【问题标题】：prototypeJS DOM and AJAX interactionprototypeJS DOM 和 AJAX 交互
【发布时间】：2013-05-20 05:11:33
【问题描述】：

我有一个概念性的 DOM 问题 - 我希望它有意义。

我的页面（称为“Main”）上有prototypeJS AJAX Updater，我正在选择要编辑的记录，并将“page B”（部分）调用到“Main”页面上的div中。

当我单击部分中的表单时，它会调用“主要”上的函数 - 但是更新程序是“应该”更新部分上的 div ......但它永远不会这样做。我很确定 DOM 找不到它，因为它已被渲染或带入 Main...

我该如何解决这个问题？？？

主要

<script>
// pulls page B into Main div
function getItem( id ) {
    var url = 'itemDetails.php'; 
    var pars = { id:id };
    var myAjaxOpts = new Ajax.Updater( 'itemDetail', url, {
            method:'post'
            ,parameters:pars
            ,evalScripts:true
        });
}

// post form and expects messages in 2 places (1) the upated div (on page B) and the message div on Main
// Only main showing up
function assignItem( frm ) {
    var url = 'assignItem.php'; 
    var pars = Form.serialize( frm );
    var myAjaxOpts = new Ajax.Updater( 'subMessage', url, {
            method:'post'
            ,parameters:pars
            ,evalScripts:true
            ,onSuccess: function( response ){
                //console.log( 'request ready to be made' );
                $( 'mainMessage' ).update( response );
            }
        });
}
</script>   

<!-- page A - Main -->
<div id="mainMessage"></div>
<ul>
    <li><a onClick="getItem( 1 );">item 1</a></li>
    <li><a onClick="getItem( 2 );">item 2</a></li>
    <li><a onClick="getItem( 3 );">item 3</a></li>
</ul>
<div id="itemDetail"></div>
<!-- end page A -->

页面 B（部分）

<!-- page B - Partial -->
<div id="subMessage"></div>
<form>
    -- edit record ---
<input type="button" onClick="assignItem( this.form );" ></form>
<!-- end page B -->

顺便说一句 - 应该注意这是一个“减少”的样本（可能有错别字），我按预期取回数据，AJAX 没有问题，只是部分中的 div Main 上的功能似乎不可用。

谢谢

【问题讨论】：

您是否尝试过不将部分页面包装在<body> 标记中？只是输出“裸体” div？因为这会在页面中间放置一个<body> 标记，所以它的 HTML 无效，而 javascript 可能会因此而出错。
sry Geek... 这只是作为示例 - 我会拿出来 - 但目前 - 它只是一个返回的表......
是否有任何错误信息？请调试您的应用程序以找出它的哪一部分完全不起作用。 assignItem 被调用了吗？是否发送和接收了第二个 ajax 请求？ onSuccess 回调是否执行？那一刻的 DOM 是什么样子的？如果没有第一个 ajax 更新程序，它可以工作吗？

标签： javascript dom prototypejs

【解决方案1】：

只需更改您要更新的 id。

改变这个：$( 'mainMessage' ).update( response );

作者：$( 'subMessage' ).update( response );

【讨论】：