title: how to prevent loading jquery file more than once?
body: <p>I've an jsp which have linked to the jquery script file in the  tag. In this page I have a tag which have to be loaded from another jsp file when a link is clicked. There are certain jquery operation in the new page as well. But when I load the page the jquery operations are not performed, therefore I load the jquery file in the new jsp file also. Then again there is a problem i.e. the operations are calling more than once. Please give your valuable replies, suggestions and solutions for the problem... </p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /&gt;
  &lt;title&gt;Flyers&lt;/title&gt;
  
  &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/lib.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/scripts.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.json-2.3.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
     &lt;div class="page_steps"&gt;
              &lt;s:form method="post" action="flyers" name='ldm_form' id='ldm_form_flyers'&gt;
  
  
                  &lt;!-- Question 1 --&gt;
                  &lt;div class="questionstep"&gt;
                      &lt;div class="stepno"&gt;STEP 1&lt;/div&gt;
                      &lt;h2&gt;Enter the correct DEC:&lt;/h2&gt;
                      &lt;input type="text" id="dec" name="oci.dec" value="" class="inputbx numericonly"  maxlength="16" /&gt;
  
                      &lt;div class="errbox"&gt;Please enter valid DEC&lt;/div&gt;
                      &lt;input type="button" value="" class="btn_continue"  /&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Question 2--&gt;
                  &lt;div class="questionstep"&gt;
                      &lt;div class="stepno"&gt;STEP 2&lt;/div&gt;
                      &lt;h2&gt;Select Your target program&lt;/h2&gt;
                      &lt;div class="errbox"&gt;Please select at lease one&lt;/div&gt;
                      &lt;s:iterator value="targetPrograms"&gt;
                      &lt;input type="radio" name="tpId" value="&lt;s:property value="tpId"/&gt;"/&gt;&lt;label id="&lt;s:property value="tpId"/&gt;"&gt;&lt;s:property value="tpName"/&gt;&lt;/label&gt;&lt;br/&gt;
                      &lt;/s:iterator&gt;
                      &lt;input type="button" value="" class="btn_continue"  /&gt;
                  &lt;/div&gt;
  
  
                  &lt;!-- Question 3 --&gt;
                  &lt;div class="questionstep"&gt;
                      &lt;div class="stepno"&gt;STEP 3&lt;/div&gt;
                      &lt;h2&gt;Select Your Mailing Materials&lt;/h2&gt;
                      &lt;div class="errbox"&gt;Please select at lease one&lt;/div&gt;
  
                      &lt;strong&gt;Self Mailer&lt;/strong&gt;&lt;br /&gt;
                      &lt;div class="mailmaterials"&gt;
                          &lt;ul class="questslider"&gt;
                              &lt;s:iterator value="mailingmaterials" id="mailMat" begin="0" end="1"&gt;
                                  &lt;li&gt;
                                  &lt;div class="quickpreview"&gt;&lt;p&gt;QUICK PREVIEW&lt;/p&gt;&lt;div class="noshow"&gt;
                                      &lt;s:iterator value="#mailMat.templatePath" id="tempPath" begin="0" end="1"&gt;
                                          &lt;s:property value="#tempPath.ldmImgPath"/&gt;&lt;s:property value="#tempPath.ldmImgName"/&gt;,
                                      &lt;/s:iterator&gt;
                                      &lt;/div&gt;&lt;/div&gt;
                                  &lt;s:iterator value="#mailMat.templatePath" id="tempPath" begin="2"&gt;
                                  &lt;img src="&lt;s:property value="#tempPath.ldmImgPath"/&gt;&lt;s:property value="#tempPath.ldmImgName"/&gt;" width="90" height="149" alt="" /&gt;
                                  &lt;/s:iterator&gt;
                                  &lt;br /&gt;
                                  &lt;label&gt;
                                  &lt;input type="radio" name="mailMatId" value="&lt;s:property value="#mailMat.mailMatId"/&gt;"/&gt;&lt;s:property value="#mailMat.mailMatName"/&gt;&lt;/label&gt;
                                  &lt;/li&gt;
                              &lt;/s:iterator&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>This one is my main jsp page, here I've shown only the header part and the tag that have to be change dynamically, the page is very big to upload I think this much would be enough,</p>
  
  <p>and in the second jsp page I have </p>
  
  <pre><code>&lt;s:set name="tabNo" value="tabNo"/&gt;
                  &lt;s:if test="%{#tabNo==0}"&gt;
                      &lt;s:form method="post" action="flyers" name='ldm_form' id='ldm_form_flyers'&gt;
                          &lt;!-- Question 1 --&gt;
                          &lt;div class="questionstep"&gt;
                              &lt;div class="stepno"&gt;STEP 1&lt;/div&gt;
                              &lt;h2&gt;Enter the correct DEC:&lt;/h2&gt;
                              &lt;input type="text" id="dec" name="oci.dec" value="" class="inputbx numericonly"  maxlength="16" /&gt;
  
                              &lt;div class="errbox"&gt;Please enter valid DEC&lt;/div&gt;
                              &lt;input type="button" value="" class="btn_continue"  /&gt;
                          &lt;/div&gt;
                          &lt;!-- Question 2--&gt;
                          &lt;div class="questionstep"&gt;
                              &lt;div class="stepno"&gt;STEP 2&lt;/div&gt;
                              &lt;h2&gt;Select Your target program&lt;/h2&gt;
                              &lt;div class="errbox"&gt;Please select at lease one&lt;/div&gt;
                              &lt;s:iterator value="ordCaptAct.targetPrograms"&gt;
                              &lt;input type="radio" name="tpId" value="&lt;s:property value="tpId"/&gt;"/&gt;&lt;label id="&lt;s:property value="tpId"/&gt;"&gt;&lt;s:property value="tpName"/&gt;&lt;/label&gt;&lt;br/&gt;
                              &lt;/s:iterator&gt;
                              &lt;input type="button" value="" class="btn_continue"  /&gt;
                          &lt;/div&gt;
                          &lt;!-- Question 3 --&gt;
                          &lt;div class="questionstep"&gt;
                              &lt;div class="stepno"&gt;STEP 3&lt;/div&gt;
                              &lt;h2&gt;Select Your Mailing Materials&lt;/h2&gt;
                              &lt;div class="errbox"&gt;Please select at lease one&lt;/div&gt;
  
                              &lt;strong&gt;Self Mailer&lt;/strong&gt;&lt;br /&gt;
                              &lt;div class="mailmaterials"&gt;
                                  &lt;ul class="questslider"&gt;
                                      &lt;s:iterator value="ordCaptAct.mailingmaterials" id="mailMat" begin="0" end="1"&gt;
                                          &lt;li&gt;
                                          &lt;div class="quickpreview"&gt;&lt;p&gt;QUICK PREVIEW&lt;/p&gt;&lt;div class="noshow"&gt;
                                              &lt;s:iterator value="#mailMat.templatePath" id="tempPath" begin="0" end="1"&gt;
                                                  &lt;s:property value="#tempPath.ldmImgPath"/&gt;&lt;s:property value="#tempPath.ldmImgName"/&gt;,
                                              &lt;/s:iterator&gt;
                                              &lt;/div&gt;&lt;/div&gt;
                                          &lt;s:iterator value="#mailMat.templatePath" id="tempPath" begin="2"&gt;
                                          &lt;img src="&lt;s:property value="#tempPath.ldmImgPath"/&gt;&lt;s:property value="#tempPath.ldmImgName"/&gt;" width="90" height="149" alt="" /&gt;
                                          &lt;/s:iterator&gt;
                                          &lt;br /&gt;
                                          &lt;label&gt;
                                          &lt;input type="radio" name="mailMatId" value="&lt;s:property value="#mailMat.mailMatId"/&gt;"/&gt;&lt;s:property value="#mailMat.mailMatName"/&gt;&lt;/label&gt;
                                          &lt;/li&gt;
                                      &lt;/s:iterator&gt;
  
                                  &lt;/ul&gt;
                              &lt;/div&gt;
  </code></pre>
  
  <p>And in the jquery file I've the code like this</p>
  
  <pre><code>$('.tab').click(function(){
        $('.tabmenu').children().removeClass('active');
        $(this).parent('li').addClass("active");
        var tabIndex=$(this).parent('li').index();
        alert(typeof jQuery);
        changeTabHtml("tabMenuAction_forms.action", "tabNo="+tabIndex, '.page_steps');
        changeTabHtml("tabMenuAction_steps.action", "tabNo="+tabIndex, '.orderprocess_steps');
        changeTabHtml("tabMenuAction_headerCaption.action", "tabNo="+tabIndex, ".headercaption");
    });
  
  function changeTabHtml(urlLink, data, divClass){
        $.ajax({
            type: "POST",
            url: urlLink,
            data: data,
            cache: false,
            success: function(msg){
                $(divClass).html(msg);
            }
          });
  }
  </code></pre>
  
  <p>Till here everything is working fine..... the second page is loading dynamically everything is working. But when its loaded the, "btn_continue" has to call some jquery function like below</p>
  
  <pre><code> $('#ldm_form_flyers .btn_continue').click(function(){
       var getid = $('.btn_continue').index($(this));
       switch(getid){
           case 0:
              var getval = $.trim($("input[name='oci.dec']").val());
               if(getval=='' || getval.length!=16 || getval.match(/[^\d]/)){
                  $("input[name='oci.dec']").addClass('err');
                  $('.questionstep:eq('+getid+') .errbox').slideDown();
               }
               else{
                   $.getJSON("btn_continueAction?btn_continueId="+getid+"&amp;oci.dec="+getval, function(data){
                       var isNext=data.savedInSession;
                  $('.stepsanswer').eq(getid).find('span').html(getval);
                  $("input[name='oci.dec']").removeClass('err');
                  $('.decanswer').html(getval);
                  if(isNext==true)
                      nextquestion(getid);
                  else
                      $('.questionstep:eq('+getid+') .errbox').slideDown();
                   });
              }
              break;
  </code></pre>
  
  <p>Now after loading this function is not working. Therefore I tried to load the jquery file in the second page also, then its working fine, but it starts hitting the server more than once, because the file is loaded twice, then 4 times, then 8.. and increase ultimately my application slows down. So is there is anyway to prevent the loading of the file, or any solution why the "btn_continue" is not working without loading the jquery file in the second jsp...?????</p>