AJAX in an AJAXed Doc

[MANismyname]

Hi,

I am trying to get the InPlaceEditor to work on a page that I AJAXed
in from a tab. Here is my code:
--------------BEGIN AJAX TABS INDEX.JSP--------------
<div id="tabs">
<ul>
<li style="margin-left: 1px" id="tabHeaderActive"><a
href="javascript:void(0)" onClick="toggleTab(1,4)"><span>TEST TAB 1</
span></a></li>
<li id="tabHeader2"><a href="javascript:void(0)"
onClick="toggleTab(2,4)" ><span>TEST TAB2</span></a></li>
</ul>
</div>
<div id="tabscontent">
<div id="tabContent1" class="tabContent" >
<br /><div></div>
</div>
<div id="tabContent2" class="tabContent" style="display:none;">
<br /><div></div>
</div>
</div>
<script type="text/javascript">
tab1 = new Ajax.Updater('tabContent1', 'tab1.jsp', {
method: 'get'
});
tab2 = new Ajax.Updater('tabContent2', 'tab2.jsp', {
method: 'get'
});
</script>
--------------END AJAX TABS INDEX.JSP--------------
----------------------------------------------------------
--------------BEGIN AJAX TABS JS--------------
/*-----------------------------------------------------------
Toggles element's display value
Input: any number of element id's
Output: none
---------------------------------------------------------*/
function toggleDisp() {
for (var i=0;i<arguments.length;i++){
var d = $(arguments[i]);
if (d.style.display == 'none')
d.style.display = 'block';
else
d.style.display = 'none';
}
}
/*-----------------------------------------------------------
Toggles tabs - Closes any open tabs, and then opens current tab
Input: 1.The number of the current tab
2.The number of tabs
3.(optional)The number of the tab to leave open
4.(optional)Pass in true or false whether or not
to animate the open/close of the tabs
Output: none
---------------------------------------------------------*/
function toggleTab(num,numelems,opennum,animate) {
if ($('tabContent'+num).style.display == 'none'){
for (var i=1;i<=numelems;i++){
if ((opennum == null) || (opennum != i)){
var temph = 'tabHeader'+i;
var h = $(temph);
if (!h){
var h = $('tabHeaderActive');
h.id = temph;
}
var tempc = 'tabContent'+i;
var c = $(tempc);
if(c.style.display != 'none'){
if (animate || typeof animate == 'undefined')
Effect.toggle(tempc,'appear',{duration:0.5,
queue:{scope:'menus', limit: 3}});
else
toggleDisp(tempc);
}
}
}
var h = $('tabHeader'+num);
if (h)
h.id = 'tabHeaderActive';
h.blur();
var c = $('tabContent'+num);
c.style.marginTop = '2px';
if (animate || typeof animate == 'undefined'){
Effect.toggle('tabContent'+num,'appear',{duration:0.5,
queue:{scope:'menus', position:'end', limit: 3}});
}else{
toggleDisp('tabContent'+num);
}
}
}
--------------END AJAX TABS JS--------------
---------------------------------------------------------
--------------BEGIN AJAXED tab1.jsp--------------
TEST1:
<span id="test1"></span>
<a id="edit_control_test1" href="#">edit</a>
<script type="text/javascript">
var test1 = new Ajax.InPlaceEditor('test1',
'_ajax_inplaceeditor_result.html', {rows:10,cols:40,externalControl:
'edit_control_test1',externalControlOnly: 'true',ajaxOptions: {method:
'post'} });
</script>
--------------END AJAXED tab1.jsp--------------

The tabs render and call the pages no problem. The edit button appears
next to the "TEST1" but will not allow me to edit. When I access the
tab1.jsp the edit button DOES work. I have tried calling protoype and
scriptaculous from the tab page and also removing it but nothing seems
to get it working on my index page with the tabs. Does anyone have a
suggestion??? Can you AJAX in an AJAXED page?

Thanks for the advice...

[T.J. Crowder]

Hi,

By default, Ajax.Updater doesn't process scripts in the content it
loads. To tell it to do so, use the evalScripts option (see the docs
[1]).

[1] http://prototypejs.org/api/ajax/updater

HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available