Moving content in Ajax from one tab to an other

[jeff5w]

I have created a website with Ajax tabs. I am encountering issues moving content from one tab to an other. Any ideas or suggestions ? Thanks

[jscheuer1]

I wouldn't do that. Why do you want to? Can you give us a link to your page?

[jeff5w]

John,

Thank you for your answer.

Unfortunately, I cannot give you access to the page yet. But, I can show a example of what we are trying to do :

http://www.netvibes.com

Create another tab. Then drag and drop these feed to the other tab.

Thanks for your help.

Jeff

[jscheuer1]

I don't see the AJAX tabs script on that page but, I may have missed it. What this strikes me as is the inability to use a script on content added to a page via AJAX after that script was initialized for the page as it was before the AJAX content was added. With me so far?

What happens is this:

1 ) The page loads.

2 ) A script is initialized to the page's content. In this case, I assume it is your drag and drop script. Whatever the script, this is most often done with an onload function or by code that is placed at or near the end of a page, after the content that it is meant to initialize.

3 ) Content is then added to the page via AJAX. It could be via any DHTML method.

4 ) The script which was initialized to the page still is but, it isn't initialized to the new content.

What needs to happen is that at the time that the function that adds the new content is called, you also need to start a polling function that checks for the new content. Once this new content is found, the polling function can initialize it to the desired script and exit.

One way you can poll for new content is to put an empty span at the end of the new content with a unique id - say 'newcontent1'. Then you can have a poll like so:

function pollContent(id) {
if (typeof id=='undefined')
return;
if (document.getElementById(id){
run initialization for your drag and drop script here
return;
}
else
setTimeout("pollContent('"+id+"')", 60);
}

Once you have that function available, you can add:

pollContent('newcontent1');

to the list of things that happen when that content is added. With AJAX tabs it is a bit complicated because, here is where it initializes its tabs (from the end of ajaxtabs.js):

function startajaxtabs(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sake
savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab content
ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
return false
}
if (ulist[x].className=="selected"){
ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink) //auto load currently selected tab content
loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files
}
}
}
}
}

Note the red part, where it writes an onclick event for each tab. You could add to that though:

ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
pollContent(this.getAttribute("name"))
return false
}

That way, in addition to the href, rel and optional rev attributes, you could give the link a name attribute that corresponds to this unique id I was talking about, ex:

<li><a href="external.htm" rel="ajaxcontentarea" name="newcontent1">Bird</a></li>

In the above example, you would place an empty span at the end of the 'external.htm' page:

<span id="newcontent1"></span>

[jeff5w]

Thank you very much for your suggestion/help. We're going to try that.

Thanks again.

Jeff

[jscheuer1]

You're welcome. I hope you know how to initialize your drag and drop script though. I looked around a fair amount and was unable to locate exactly how this was done.

Also, some refinement to the approach I outlined may be required, especially if you want to use your drag and drop script with the initial tab and the drag and drop script initializes before the AJAX tab script does. In that case, add (red) to startajaxtabs():

function startajaxtabs(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sake
savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab content
ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
pollContent(this.getAttribute("name"))
return false
}
if (ulist[x].className=="selected"){
ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink) //auto load currently selected tab content
loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files
pollContent(ulistlink.getAttribute("name"))
}
}
}
}
}

in addition to the line previously added line (green in the above).