problems with ajax?

[ryan]

I'm having a problem with bubletip and ajax (I think). I'm using
OpenWebStudio for web application. I'm using bubbletip to provide
tooltips to help with filling out a form. As a person fills out the
form, it does AJAX calls to populate other select fields. When the
page first loads, bubbletip works great, but after the first AJAX
call, the entire form gets reloaded and the bubbletip doesn't work.
Do I need to removetip before the AJAX call? Your advice is greatly
appreciated. Thanks, Ryan

[uhleeka]

Hey Ryan,

There should be no relationship between bubbletip and your AJAX
calls. If you'd like to post a link or example code, I'd be glad to
take a look.

Thanks.

[ryan]

uhleeka,
That sounds good, I'll get a sample page working and email your gmail
account with the link. I'll try to get it to you this coming
weekend. Thanks!

[fwig...@gmail.com]

Could you please post what solution was achieved? It is poor form to not leave behind the answers for the next guy who has the same problem (especially since that guy is currently me).

[ry...@ceramicbytes.com]

In essence I was recreating bubbletip objects (with the same name) on each OpenWebStudio (OWS) AJAX call.  This was caused by me, I was creating the bubbletip object in a section of OWS code that was returned each time I called AJAX.  The fix was to create the bubbletip objects in OWS regions that were executed on "Page Load Only".  Now the bubbletip objects are only created once, attached to form fields once, and everything is happy.  

[fwig...@gmail.com]

This is how I create my bubbletip objects:

  $(document).ready(function() {

        $('.colors').each(function() {

              var i = this.id.substring(1);

               $('#a' + i).bubbletip($('#tip' + i));

         });

    });

I am generating the anchor and tip dynamically, so I create the bubbletips by selecting all the objects in the class (which are the a1_up or a2_down, etc), snipping off that 'a' with substring, and making my selectors that way.

It all works 100% fine on the first load, just like yours, but after the first postback, they all stop working. I thought initially my problem was the opposite of yours, that they only got created once, since $(document).ready doesn't fire after partial page updates.

I tried it as:

    function pageLoad() {

        $('.colors').each(function() {

               var ii = this.id.substring(1);

               $('#a' + ii).bubbletip($('#tip' + ii));

           });

    }

so that it gets called on both the initial load and partial loads, but it doesn't fix it. 

If I remove the UpdatePanel from the page, it works every time.