Question

I have a mysterious JS Problem: I activate different jQuery-Plugins with one function. It’s called like this:

<script>
postAjaxCalls();
</script>

Then, the corresponding function looks like this:

function postAjaxCalls() {
    jQuery("[title]").tooltip(); 
    alert("this works great, tooltip not!");
    jQuery("select").selectbox();
} 

When I reload the page, everything works but the tooltip plugin. Now, if I fire the exact same Code into the JS Console, the plugin is activated:

jQuery("[title]").tooltip(); 

Why that? Why does it work when activated via console, but doesn’t work when activated via a function?

Cheers!

Answer 1

Try your code within $(document).ready(function() { .. }) in short $(function() { .. }) to execute your code after DOM ready.

jQuery(document).ready(function() {

  function postAjaxCalls() {
    jQuery("[title]").tooltip(); 
    alert("this works great, tooltip not!");
    jQuery("select").selectbox();
  } 
  postAjaxCalls();

});

OR in short

jQuery(function() {

  function postAjaxCalls() {
    jQuery("[title]").tooltip(); 
    alert("this works great, tooltip not!");
    jQuery("select").selectbox();
  } 
  postAjaxCalls();

});