calling jquery function & passing variable

Question

Hiya

Not really much of a JS man - so can anyone explain why this isn't working? I want to call a predefined function in one script from my simple AJAX script - I just want it to call the qtip functionality upon the contents of the div brought into the page via AJAX.

Thanks, H

SCript 1 - AJAX loader

       if(myHttpRequest.readyState==4)
            data.innerHTML = myHttpRequest.responseText;
    qtip_me('.div_to_act_on');
  }

Script 2 - main JQuery script

$(document).ready(function() {

    function qtip_me(a) {
     $(a).each(function() {
        $(this).qtip({ 
         content: {'showme'},
       position: {corner: {tooltip: 'bottomLeft', target: 'topRight'}},
       style: { 
          width: 300,
          padding: 5,
          background: '#A2D959',
          color: 'black',
          textAlign: 'center',
          border: {
          width: 7,
          radius: 5,
          color: '#A2D959'
          },
          tip: 'bottomLeft',
          name: 'dark' // Inherit the rest of the attributes from the preset dark style
       }   
      }); 
     });
    };
});

Answer 1

You do not need to nest your qtip_me() function inside of the $(document).ready block. It is a generic function call, not one that is reliant on the document being fully loaded. This is because it is assumed your previous AJAX request had occurred after the document was loaded (could be a false assumption).

Answer 2

It might be that the function defined like that is not in scope. Try defining the function like so:

qtip_me = function(a) {}

This way it will be in scope.

Or as the other answers say, don't define the function inside the document ready.

Answer 3

It is declaring the qtip_me function in lexical scope, the function cannot be accessed from outside it's enclosing function.