title: Script that calls a jquery function before the library load
body: <p>I have problems with a Jquery function. </p>
  
  <p>I get the jquery library from google.</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>First,  I put the following  the code on a .js</p>
  
  <pre><code>(function($){
  jQuery.fn.jConfirmAction = function (options) {
      var theOptions = jQuery.extend ({
          question: "Are You Sure ?",
          yesAnswer: "Yes",
          cancelAnswer: "Cancel"
      }, options);
  
      return this.each (function () {
  
          $(this).bind('click', function(e) {
              var submitBtn = $(this);
              if($(this).attr("jconfirmed")){
                  submitBtn.removeAttr("jconfirmed");
              }else{
                  e.preventDefault();
                  thisHref = $(this).attr('href');
  
                  var btns = {};
                  btns[theOptions.yesAnswer]=function() {                                                         
                          $( this ).dialog( "close" );                                    
                          if (thisHref!=null){
                                  window.location = thisHref;
                          }else{
                                  submitBtn.attr("jconfirmed", true);
                                  submitBtn.click();
                          }
                  };
  
                  btns[theOptions.cancelAnswer]=function() {                                                              
                      $( this ).dialog( "close" );                                    
                      submitBtn.removeAttr("jconfirmed");
                  };
  
                  var content='&lt;p&gt;'+theOptions.question+'&lt;/p&gt;';
                  if(theOptions.checkboxText!=undefined){
                          content='&lt;p&gt;'+'&lt;input type="checkbox" id="cbox"&gt;'+theOptions.checkboxText+'&lt;br/&gt;&lt;br/&gt;'+theOptions.question+'&lt;/p&gt;';
                  }
  
                  $('#dialog-confirm').html(content);
                  $('#cbox').click(function() {
                      /*
                      if($('#cbox').attr("checked")){
                              $('.ui-dialog-buttonset button:first-child').show();
                      }else{
                              $('.ui-dialog-buttonset button:first-child').hide();
                      }
                      */
                  });
  
                  $('#dialog-confirm').dialog({
                      resizable: false,
                      modal: true,
                      buttons: btns,
                      show: {
                          effect: "blind",
                          duration: 1000
                        },
  
                      hide: {
                            effect: "explode",
                            duration: 1000
                      }, 
                      draggable: false,
                      dialogClass: 'main-dialog-class'
                  });
              }   
          });
  
      });
  };
  })(jQuery);
  </code></pre>
  
  <p>And, in a jsp file  call the function.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.confirm').jConfirmAction();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But i have the following error in console:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Object [object Object] has no method 'jConfirmAction' </p>
  </blockquote>
  
  <p>I tried to fix this by putting the function code in the same jsp, between <code>&lt;script type="text/javascript"&gt;&lt;/script&gt;</code>. That works for some pages, but in others pages have the same error. Is there a way to call the function only if jquery has been loaded?</p>