You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Cannot add new tooltips using different ajax library and reinitiate the tooltips Created Nov 3, 2009

This thread is solved

Views: 342     Replies: 5     Last reply Nov 4, 2009  
You must login first before you can use this feature

chrisva

Posts: 3

Registered:
Nov 3, 2009

Cannot add new tooltips using different ajax library and reinitiate the tooltips

Posted: Nov 3, 2009

Hi,

I am adding tooltips to my site using the follwing code:


                $("div.hjelpNavKnapp > a").tooltip({
                    tip: "div.tooltip",
                    position: "bottom right",
                    offset: [-19, 13],
                    relative: true,
                    effect: 'slide'
                }
                );

This works great on my first load and all the tooltips that have this class to itself is enabled. However, when I add the new tooltips to the DOM and I call the method again using using Ajax the new DOM elements / tooltips is not working.

Any suggestions to how I can reinitiate all the tooltips again?

NB: It works when i press F5 in the browser as it seems to run the tooltip scripts all over again, but not on ajax calls adding new elements to DOM.

Jimmyville

Posts: 3

Registered:
Nov 4, 2009

Need to reinitialize the tooltip after ajax load complete

Posted: Nov 4, 2009

Reply to: Cannot add new tooltips using different ajax library and reinitiate the tooltips, from chrisva
Hi Chrisva,

I had this same issue today, but managed to get it working correctly by breaking the process into two basic steps. First was to put the Tooltip into it's own function:


function InitializeTooltips() {
   $(".TipTrigger").tooltip({
     tip: "#MyTip"
   });
}

Secondly, I was using jQuery for loading content via Ajax so made sure to call this function again after each oncomplete:


$("#MyDiv").load("ajax-content.html", function(){
  InitializeTooltips()
)};

Hopefully that helps :)

chrisva

Posts: 3

Registered:
Nov 3, 2009

» Need to reinitialize the tooltip after ajax load complete

Posted: Nov 4, 2009

Reply to: Need to reinitialize the tooltip after ajax load complete, from Jimmyville
Hi Jimmyville,

Thanks for the tip. That is actually what I try to do. 


function myFunc() {
           $("div.hjelpNavKnapp > a").tooltip({
                    tip: "div.tooltip",
                    position: "bottom right",
                    offset: [-19, 13],
                    relative: true,
                    effect: 'slide'
                }
            );
}

I have wrapped the tooltip code into a function that I call using a different ajax library than jQuery called Gaiaware.

The ajax library calls the javascript using the following code:


document.observe("dom:loaded", myFunc());

This doesn't work though. As it does not add tooltips to the new controller. Could it be my other javascript framework that does things in the wrong order?

Jimmyville

Posts: 3

Registered:
Nov 4, 2009

» » Need to reinitialize the tooltip after ajax load complete

Posted: Nov 4, 2009

Reply to: » Need to reinitialize the tooltip after ajax load complete, from chrisva
Unsure of Gaiaware, but could give this a try:


document.observe("dom:loaded", function(){ myFunc() });

Otherwise, my guess would be this is being triggered on page load but not necessarily when the page is updated.

Try triggering the function after your Ajax call, or perhaps look into Gaiaware to see if there is something along the lines of a "dom:updated" option for document.observe?

Best of luck :)

chrisva

Posts: 3

Registered:
Nov 3, 2009

» » » Need to reinitialize the tooltip after ajax load complete

Posted: Nov 4, 2009

Reply to: » » Need to reinitialize the tooltip after ajax load complete, from Jimmyville
I'll try that.

Any suggestions why the tooltip using the script is not working in IE8 at all, but is working in all browsers on the first load?

Jimmyville

Posts: 3

Registered:
Nov 4, 2009

» » » » Need to reinitialize the tooltip after ajax load complete

Posted: Nov 4, 2009

Reply to: » » » Need to reinitialize the tooltip after ajax load complete, from chrisva
Not really too sure - i've been using the similar technique in IE8 happily. I'm guessing it has to do with the document.observe method you're using.

Perhaps try including an alert within the function to test if it's firing correctly in each browser.


document.observe("dom:loaded", function(){
  alert('hello?');
  myFunc();
});

Sadly without knowing Gaiaware I can't really offer any more advice - perhaps hit up their forums to see if anyone has had a similar issue firing javascript functions after Ajax updates :)