Javascript - Load one time

I have Javascript loading some data and because its in a loop it ends up loading multiple times which causes lengthy wait times. I need to find how to load it only once. I researched the issue and found some code but not sure how to implement it. Here is the best link I could find about my issue:

http://blog.michaelckennedy.net/2012/10/11/preventing-javascript-files-from-loading-multiple-times/

Update: Sorry it took so long to get back. I just work Wednesday through Saturday. I was asked to give my entire code. I trimmed it down considerably.

Script I'm Loading to pull only once

jQuery(function($)
        {
  $('#resultA').load('DocText.html #Tablemain1');
  $('#resultB').load('DocText.html #Tablemain2');

Entire Code

table class="tblrohs6" border="5" cellpadding="3" cellspacing="2">
<tr>
    <td align="center">
    <script type="text/javascript"> 
    var title = document.getElementsByTagName( "title" ).item(0); 
    document.write('<iframe src="http://some.company.com/mfgsupt/testeng/eac/b4home/city/abistatus.asp?Bldg=City&abiID='+title.innerHTML+'&Training=no" id="abiIframe" Name="abiIframe" width="550" height="55" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" ></iframe>');
    </script>
    <SCRIPT SRC="file://///namp-dsk-003/cim-cam/CAM/BOI/Abi/680/Common_Files/TitleCheck.js"></SCRIPT>

    </td>
</tr>
  <tr>
    <td bgcolor="#FFFFFF">

        <!----------------StartMain Table Placement-------------------------->

      <p class="revisionmain"> Text List - Assembly Build Instructions</p>    

      <script>
            $('#resultA').load('DocText.html #Tablemain1');
            $('#resultB').load('DocText.html #Tablemain2');
      </script>

            <p id="resultA"></p>

        <!---------------Start Assembly Buttons-------------------------------> 
      <table width="80%" border="1" align="center">
        <tr>
          <td colspan="10"><div align="center" class="row-column-headers-RoHS">Assembly Selection</div></td>
        </tr>
        <tr>
          <td><div align="center"><button id="b1" onclick="showX(2)"> 178-0416-00 </button></div></td>
          <td><div align="center"><button id="b2" onclick="showX(3)"> 178-0427-00 </button></div></td>

        </tr>
        <tr>
          <td colspan="9">
              <div align="center"><button onclick="location.reload();"> Refresh </button></div>
          </td>
        </tr>
      </table>
    <!-------------------End Assembly Button------------------------------->

            <p id="resultB"></p>            
            <p id="resultC"></p>
    </td>
  </tr>
  <!--------------------End Main Table Placement--------------------------->
  <tr>
    <td class="bodycell"><p class="section">Lower Level Casing </p>
        <table style="visibility:visible" width="100%" border="2">
          <tr>
            <td colspan="3"><ol start="1">
<!----------------------------------Body After Tables------------------------------------------------>
            <p id="result1"></p>
            <p id="result2"></p>
    </td>
  </tr>
</table>
    </td>
  </tr>
</table>
    </td>
  </tr>
</table>
<!-------------------------------------- END Body After Tables------------------------------------------>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!--------------- Start Column Selector for button--------Input at end of this doc----------->
    <script>

    function showX(num) {;

<!--------------- Start Column Selector for button--------Input at end of this doc----------->

<!--------------------- Start Search Column for None------------------------>   
var tab = document.getElementById('part1Table');
var l = tab.rows.length;

for ( var i = 0; i < l; i++ ) {
    var tr = tab.rows[i];
    var cll = tr.cells[num];                                                              
    if(s = cll.innerText.indexOf('None') != -1) 
    {
<!---------------------- End Search Column for None------------------------->   
<!---------------- Start Place Lines in Document--------------------->

    jQuery(function($)
        {
                $('#resultA').load('DocText.html #Tablemain1');
                $('#resultB').load('DocText.html #Tablemain2');

                if (num==2) {
                $('#resultE').load('DocText.html #0416');}
                if (num==3) {
                $('#resultF').load('DocText.html #0427');}


                $('#result1').load('DocText.html #Line1');
                $('#result2').load('DocText.html #Line2');

        });
<!------------------ End Place Lines in Document----------------------->


if (i==1)                                                   /*Change this for "Line in ABI Doc" */
  { var e = document.getElementById('result1');             /*Change this for "Line Hidden" */
        e.style.display = 'none';}

if (i==2)                                                   /*Change this for "Line in ABI Doc" */
  { var e = document.getElementById('result2');             /*Change this for "Line Hidden" */
        e.style.display = 'none';}


}}} </script>


<!-------------------------------------Start Pull part1Table Data ---------------------------------------->
    <script type="text/javascript">
        jQuery(function($)
        {
            $('#resultZZ').load('DataTableUpdate3.html #part1Table');
        });         
    </script>

        <p id="resultZZ"></p>
<!--This is for Button Column Selector, Very Important -->      
        <input type="text" id="cellnum" value="0"/>
<!--This is for Button Column Selector, Very Important -->

Answers


Just to let you know, your showX(num) function on line 73 of your given code, you have a broken function that isn't going to run.

function showX(num) {;

You could set a variable and check if it is set.

Example:

if (!window.dataIsLoaded) {
    // load the data
}

window.dataIsLoaded = true;

But of course it would be much better to avoid executing this part of the code in some loop. You should provide more context to understand what you're doing and why the data would be loaded in a loop.


I ended up looking closer to the code and was able to take my .loads out of the loop. Now as a result it is no longer reloading the same objects multiple times. Thank for all the input. I guess sometimes re-organizing makes all the difference.


Need Your Help

Querying with linq a collection mapped as a map (IDictionary)

nhibernate linq-to-nhibernate

Using NHibernate, I have a collection of entities mapped as a dictionary.