Results 1 to 6 of 6

Thread: Moving content in Ajax from one tab to an other

  1. #1
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Moving content in Ajax from one tab to an other

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    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):

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

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

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

    HTML Code:
    <span id="newcontent1"></span>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Thanks again.

    Jeff

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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():

    Code:
    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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •