Showing tips on load, destroying on ajax request begin, and recreating

[mleduc]

I'm working in ASP.NET (2008)

What my site needs is to show tooltips when a user hits the page.

I found that when I left tooltips up jquery would get null object errors while the user is using other parts of the page, even when the parts of the page being used were not touching the tooltips target.

Where jquery was getting upset:

JS Code

var G=this[0].getBoundingClientRect()

The code I'm currently using to show on page load:

JS Code

function loadInlineHelp(){
 
   $('span.target.help').each(function () 
   { 
      // id of the target = the class of the content 
      var targetID = $(this).attr("id"); 
      // get the content 
      var contentTip = $('.' + targetID);
      if(contentTip.html())
      { 
           $('#' + targetID).qtip({        
                 content: {
                text: contentTip
             }, 
             style: { 
                width: 200,
                padding: 5,
                background: '#A2D959',
                color: 'black',
                textAlign: 'center',
                border: {
                    width: 7,
                    radius: 5,
                    color: '#A2D959'
                },
                tip: pointerPos,
                name: 'dark' // Inherit the rest of the attributes from the preset dark style
              }, 
             show: { ready: true }
          }); 
      }
    }); 
};

So I thought I would destroy the tips before each ajax call and recreate them after.

The code wiring the begin and end request:

JS Code

$(function () {
  Sys.Application.add_init(application_init);  
  function application_init() 
  {
      var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
      pageRequestManager.add_beginRequest(
      function()
     { 
       //anything inside this function will be fired before the update panel calls the server
       inlineHelpTempClose()
      });
      pageRequestManager.add_endRequest(
      function()
      {
        //anything inside this function will be fired again when the update panels refresh
        loadInlineHelp();
      });
  }
});

Lastly the code that destroys the tips:

JS Code

function inlineHelpTempClose(){ 
   $('span.target.help').each(function () 
   { 
      // id of the target 
      var targetID = $(this).attr("id");  
      // hide target
      $('#' + targetID).qtip("destroy");     
   }); 
};

This approuch has failed also the inlineHelpTempClose() does get called on a ajax call but now qtip is throwing an error saying that the value is null at this point:

JS Code

return $(this).data('qtip').interfaces;

Any suggestions on a better approuch or whats going wrong?

Thank you.

[mleduc]

I found my issue there was nothing wrong with the code, but where I implemented it in the cycle. I added the script in the footer of the page but there is currently many other scripts included in the page header. When I added it near the top of the header scripts it worked well.

[Craig]

Glad to hear you got it sorted mleduc. I literally only just noticed you're post as you replied to the problem, sorry about that.