JS DOM prototype and AJAX interaction

Question

I have a conceptual DOM question - I hope this makes sense.

My page (call it "Home") contains the JS AJAX Updater prototype on it, I select the entry to edit and calls "page B" (partial) in a div on the main page.

When I click on the form in partial, it calls the function in "Main", however Updater "Presumably" updates the div on the partial ... but it never does. I am pretty sure that the DOM cannot find it because it was handed down or brought to Main ...

How to solve this problem?

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 --> 

Page B (Partial)

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

BTW - it should be noted that this is a "reduced" sample (and may have typos), I am returning the data as expected, there are no problems with AJAX, it is just that the div IN in part seems not to be accessible to the function on Main.

thanks

Answer 1

Just change the identifier in which you are updating.

change this: $( 'mainMessage' ).update( response );

: $( 'subMessage' ).update( response );