Question

Problem: When the document is ready, jQuery will fire off the tabs function below. Then after tabs finishes, it fires the document ready function again. What would be a good approach to only trigger the document ready function once? Thanks!

$(document).ready(function() {
  $("#index-tabs").tabs({
      cache: true
  }, {
      idPrefix: 'ui-tabs-index'
  });
});

My tabs:

<ul id="index-tablist">
    <li id="index-config-tab" class="frstTab"><a href="ajax/config.html" >Config</a></li>
    <li id="index-system-tab"><a href="ajax/system.html" >System</a></li>
    <li id="index-wizard-tab"><a href="ajax/wizard.html" >Wizard</a></li>
</ul>

Update: I tried using the load parameter to specify a function to load. But for some reason when tabs() is executed its reloading the index and executing the tabs function twice.

$("#index-tabs").tabs({
        load:initScripts,
        cache: true
    }, {
        idPrefix: 'ui-tabs-index'
});
function initScripts(){
    alert('run this code once'); // This alerts twice for some reason.
}

Answer 1

You should know that the ready event cannot fire multiple times. What is happening is that your statements inside ready are being executed twice (look closely, they are not the same thing).

In Chrome’s inspector or Firebug scripts panel, put a breakpoint on the ready entry, and trace the flow on pageload. You will easily see what is causing the statements to execute twice. (5 minute exercise).

You can be assured that ready doesn’t fire multiple times.