Ajax Tabs

Hi, I am very new to this, but wondering if I can make Ajax calls to get Tab content? Any examples would be great.

Posted May 8th, 2007 at 11:34pm by Sgc

Hi, I'm trying to do the same thing I think. I first did it using the jQuery tabs and it gave me an error so I tried the same with Control.Tabs. However, I am now seeing the same error again so I must be doing something wrong...

The following code works fine. I noted that the script is completely removed from the html I'm seeing when mkTabs has returned. mkTabs() is the "default" script to initialize the tabs:

  
var mkTabs = function() {
                Event.observe(window,'load',function(){
        $$('.tabs').each(function(tabs){
                new Control.Tabs(tabs);
        });
    });
       

        
google_news_items
    
        
original text.
                Element.update('whup', 'text in updated tab')  
       mkTabs()

However, if I replace Element.update with the following ajax call, it gives me an error:

 new Ajax.PeriodicalUpdater('whup','/updatedResults', 
{insertion:Insertion.Top, frequency:2, {parameters:{"stream":stream}})

The error is "invalid property id", but Firebug does not tell me which id this is. Any clues?

Thanks! :)

Posted May 13th, 2007 at 4:41pm by larsb

Hi, I'm trying to do the same thing I think. I first did it using the jQuery tabs and it gave me an error so I tried the same with Control.Tabs. However, I am now seeing the same error again so I must be doing something wrong...

The following code works fine. I noted that the script is completely removed from the html I'm seeing when mkTabs has returned. mkTabs() is the "default" script to initialize the tabs:

  
var mkTabs = function() {
                Event.observe(window,'load',function(){
        $$('.tabs').each(function(tabs){
                new Control.Tabs(tabs);
        });
    });
       

        
google_news_items
    
        
original text.
                Element.update('whup', 'text in updated tab')  
       mkTabs()

However, if I replace Element.update with the following ajax call, it gives me an error:

 new Ajax.PeriodicalUpdater('whup','/updatedResults', 
{insertion:Insertion.Top, frequency:2, {parameters:{"stream":stream}})

The error is "invalid property id", but Firebug does not tell me which id this is. Any clues?

Thanks! :)

Posted May 13th, 2007 at 4:42pm by larsb

oops.. I can't delete or edit past posts, can I?

Posted May 13th, 2007 at 4:42pm by larsb

Hi Guys,

The code you've posted has been a bit scrambled, so I can't quite see what you're doing, but I'm using AJAX calls to populate tabs - I've just described how I'm doing it as part of a query of my own over here, the Responders may be of help to you?

Note that I'm having to hack this into ASP.net, so the AJAX call I'm using is to an AJAX.ASP.net JS proxied web service, but the principle should be the same regardless of which library you're using to actually make the AJAX call.

Ben

Posted May 14th, 2007 at 10:34am by bbodien

Thanks! Yeah this funny input box is playing tricks on my while I was trying to paste my code. Turns out that it will actually evaluate any html code I put in here, including javascripts. My Ajax.PeriodicalUpdater went berzerk trying to call the livepipe webserver! Thus in my code listing here I have deliberately misspelled its method name to avoid this effect.

Anywho; I'll check out the Responders and here is my current code:

<div id="resulttabs">  <!-- style="display:none"  Holding output stream names -->
       <ul class="tabs">
                <li><a href="#two">reffed_by_google_news</a></li>
                <li><a href="#three">ipod_similarity</a></li>
    </ul>
    <div id="two">
        <p id="whup">I am tab two. I belong to group one.</p>
                <script>new Ajax.PeriodicalUpdatr('whup', '/resultlist',{insertion:Insertion.Top, frequency:2, asynchronous:false, 
                                                  parameters:{"stream":whupstream}})</script>
        </div>
    <div id="three">
        <p>I am tab three. I belong to group one.</p>
    </div>
       </div>
       <script>mkTabs() </script>

Funny thing is that this works perfectly when this is all part of the initial webpage. However, as new tabs are being built by the application I do a call to the server which rebuilds this entire tab section instead of doing it dynamically like bbodien wants to. Thus, this periodicalupdater is part of the data that comes over the wire to replace the resulttabs object. evalScripts:true on the request that does that update. If I replace the periodicalupdater with a regular Element.update, it all executes nicely. It is the "new Ajax.PUpdater" that gives me the error "invalid property id" when it is executed after update.

Is my problem clearer? Thanks, Lars

Posted May 14th, 2007 at 2:02pm by larsb

Hi,

I worked out this silly problem. The "new Ajax.X" call works fine when you don't need to keep a handle to the Ajax function object. However, the periodicalUpdater will need just that in this case. Thus, I made an array and used it as following:

"puArray[tabid] = new Ajax.PeriodicalUpdater(...);"

Solved my problem.

Thanks, Lars

Posted May 22nd, 2007 at 12:21pm by larsb