jQuery Forum

Thanks for your reply.

For sure I'm planning to use a recent version of JQuery, so I can ignore the 'delegate' and 'live' versions right and concentrate on 'on' - Have I understood this correctly?

Very confused that you would include the others in your answer - am I missing something here?

It's comforting that it's possible :-)  I seached for the 'on' event thing and found http://api.jquery.com/live/ but unfortuanately they only demonstrate 'live' and 'delegate'.

I've tried implementing it in my code using my best guess of how to do it and so in an external .js file loaded in the head of the document, I now have:

1. jQuery(document).on(function($) {
       $('#tooltip_demo a[title]').tooltip();
   });
   

In my content loaded by ajax, I have:

1. <div id="tooltip_demo">
         <a href="#" title="this is a sexy tooltip">move your mouse over</a>
   </div>
   

and in my CSS I have:

1. .tooltip {
              display:none;
              background:transparent url(images/tooltip/black_arrow.png);
              font-size:12px;
              height:70px;
              width:160px;
              padding:25px;
             color:#fff;
   }
   

but it still doesn't seem to work. Can you tell me what I've done wrong please?

Many thanks!

delegation methods only cover event binding, for plugins like tooltips that don't use delegation methods internally you need to call them for the new content after it has loaded - in success callback of ajax

Thanks Charlie, but doesn't this require me to be using the Jquery ajax call rather than my existing ajax call? Their is no way we can use the JQuery ajax unfortunately for this build.

as soon as you insert the html using your method, call any code that affects the new html

Ok, I've tried to guess the implementation of this in a few different ways.

So I loaded my content and then called (or at least attempted to call) the code that affects the above html. Still nothing happened even I replaced:

1. $('#tooltip_demo a[title]').tooltip();

with:

1. $(this).find('.myToolTipClass').myTooltipPlugin()
   

so the final JS was:

1. jQuery(document).ready(function($) {
       $(this).find('.myToolTipClass').myTooltipPlugin()
   });

Still nothing happens. Did I get the wrong idea?

Thanks for your help.

My code is very generic...I wrote it without knowing anything about your html or your plugin function name.

Ok. I've done that (also corrected a mix up I had in my code between classes and id's) and added the following to the body of the content loaded by ajax:

1. <script type="text/javascript">
       $(document).find('.tooltip_demo a[title]').tooltip()
   </script>
   

In the head of the main document, I call an external .js file with the following in it:

1. jQuery(document).ready(function($) {
       $('.tooltip_demo a[title]').tooltip();
   });

I'm still missing something!

Sorry Charlie and thanks for your patience! It's so exciting what I might be able to do with JQuery, but unless I can overcome this one issue, I won't be able to use it at all.

I do really appreciate your help.

Please provide the ajax call that loads new content onto the page. Also include a sample element in the loaded content that you'd like fire up tooltip plugin in.

This is the link used to call the ajax loaded content:

1. <a href="#" onclick="ajaxLoader('main/preferences.php','contentMAIN')">Set Preferences</a>
   

This is the 'ajaxLoader function':

1. function ajaxLoader(url,id)
   {
       // declare vars
       var request ;
       var el ;
       var helpURL ;
       var append ;
       var myRand ;
       var modurl ;
   
       var params = '';
       if (((url.indexOf('create.quotation') > -1) || (url.indexOf('create.invoice') > -1)) && (url.indexOf('frompage=1') > -1))
       {
           var formElements = document.formSearch.elements;
           //var pn = document.getElementById('pagenum').value;
          
           //if (pn=='')
           //    pn = 1;
              
           for (var i = 0; i < formElements.length; i++)
           {
               var elem        = formElements[i];
               var elemID        = formElements[i].id;
               var elemType    = formElements[i].type;
               var elemValue    = formElements[i].value;
          
               if (elemType=='checkbox')
               {
                   if (elem.checked)
                   {
                       if (params=='') params = elemID + "=1";
                       else params = params + "&" + elemID + "=1";
                   }
               }
               else
               {
                   if (params=='') params = elemID + "=" + elemValue;
                   else params = params + "&" + elemID + "=" + elemValue;
               }
           } // end for loop
          
           params = params + "&filter=1";   
       }
      
       if (document.getElementById)
       {
           request = getXMLHttpRequest();
       }
      
       if (request)
       {
           request.onreadystatechange = function()
           {
               if (request.readyState == 4 && request.status == 200)
               {
                   el = document.getElementById(id);
                  
                   // Check whether we've received a session timeout notification.
                   if (request.responseText=='session-timeout') {
                       // timeout received, so redirect to login.
                       window.location="index.php"
                   }
                  
                   el.innerHTML = request.responseText;
                  
                   // reset scroll to top.
                   document.getElementById('main').scrollTop=0;
                   document.getElementById('helpCont').scrollTop=0;
                  
                   // load synchronized help in Right side
                   // only run once per page load!
                   if (id != 'help')
                   { // it was not a help page load
                       helpURL = url.replace( "main", "help" );
                      
                       // check if help file exists
                       //if (fileExists(helpURL) === false)
                       //{
                       //   return false ;
                       //}
                       // go get it!
                       if (url.indexOf('main/') > -1)
                           ajaxLoader(helpURL,'help');
                      
                       if (url.indexOf('frompage=1') > -1)
                       {
                           //alert('here');
                           if (url.indexOf('quotation.list') > -1)
                           {
                               showQuotations('1');
                           }
                           else if (url.indexOf('invoice.list') > -1)
                           {
                               //alert('here');
                               showInvoices('1');
                           }                       
                       }
                   }
                   else
                   { // it was a help page load. Nothing else to do now.
                       //return false;
                   }
               }
           };
      
       // determine whether url is already followed with '?'. If so change '?rand'
       // to '&rand'.
       append = (url.indexOf('?') > -1) ? '&' : '?'; 
       // get server text
       myRand = parseInt(Math.random()*999999999999999, 10);
       if (((url.indexOf('create.quotation') > -1) || (url.indexOf('create.invoice') > -1)) && (url.indexOf('frompage=1') > -1))
       {
           modurl = url+append+"rand="+myRand+"&"+params;
       }
       else
       {
           modurl = url+append+"rand="+myRand;
       }
       //alert(modurl);
       request.open("GET", modurl, true);
       request.send(null);
       }
   }
   
   

This is the getXMLHttpRequest function:

1. function getXMLHttpRequest()
   {
       var request;
       if (window.XMLHttpRequest)
       {
           request = new XMLHttpRequest();
       }
       else
       {
           if (window.ActiveXObject)
           {
               try
               {
                   request = new ActiveXObject("Msm12.XMLHTTP");
               }
               catch(err1)
               {
                   try
                   {
                       request = new ActiveXObject("Microsoft.XMLHTTP");
                   }
                   catch(err2)
                   {  
                       request = false;
                   }
               }
           }
       }
       return request ;
   }
   

The javascript concerning this on the main page called an external file:

1. jQuery(document).ready(function($) {
       $('.tooltip_demo a[title]').tooltip();
   });
   

The related code on the dynamically loaded content is:
    at the top of the loaded content:

1. <script type="text/javascript">
       $(document).find('.tooltip_demo a[title]').tooltip()
   </script>
   

   below that:

1. <div class="tooltip_demo">
         <a href="#" title="this is a sexy tooltip">move your mouse over</a>
   </div>
   

In the CSS:

1. .tooltip {
              display:none;
              font-size:12px;
              height:70px;
              width:160px;
              padding:25px;
              color:#fff;
   }
   

Thanks for you help :-)

This question is now resolved :)

With the help of "GodsBest" on the getting started forum, I was able to convert convert the relavent pages to load using the JQuery ajax call instead of my code-soup version and I was then able to successfully implement the following (also from GodsBest):

In a script tag at the top of the dynamically loaded content

1. $(document).find('.tooltip_demo a[title]').tooltip()

In the head of the original main document:

1. jQuery(document).on(function($) {
       $('.tooltip_demo a[title]').tooltip();
   });
   

A big thank you for everyone who contributed.

OK. You are using a native javascript xmlHttpRequest ( AJAX) which is wrapped in a function named ajaxLoader.

You're not wrong about that Charlie! This is actually an accounting application which I started writing as my introduction to PHP, MySQL, JavaScript and Ajax, back in 2006/7.  It soon began to get unweildy and out of hand and I realised that needed to be OOP and modularized, so I paid a team of three coders to help mid 2007.

I was hoping that they would begin to sort out my mess as they went and perhaps rewrite certain pages in the course of their development. Then for personal reasons I mothballed the project until this January and reinstalled the same developers. Their eyes lit up at the thought that they could now use JQuery, HTML5 and CSS3, but so far, it seems that I'm the only one who's implemented any of those.

I'm hoping to gradually convert it myself to better practices. After launch in around 3 weeks time, the money will start to come in (we have around 10,000 books of accounts pre-registered!) and I'll heavily re-invest that bringing on coders with dedicated roles, security testing, code improvement/rewriting, new features.

I'll be looking for truly world class coders for that.

I'm really glad I found this forum. The response was one of the fastest and most helpful I've ever received in a coding forum - very refreshing. I wish I could find Linux and PHP forums as nice as this one!

Thanks again everyone.

Appreciation is  2 way street!  A lot of time goes into helping others with no response, yours was refreshing.

Charlie, you're very welcome.

You're right for sure concerning converting my ajaxLoader function being a simple task, but for me, at my current level of understanding, this is unfortunately a little more than I can handle. I'm going to stick with various tutorials and hopefully in a few weeks time, I might be up for it (that one and around 300 other scripts used on our site!!).

We'll meet again I'm sure!

 



Peter
Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)