title: Calling HTML files and Javascript from QML
body: <p>I have one HTML file which I need to call from QML. My HTML file uses ajax programming. I get an error saying "undefined variable $ ajax". Is there a library I need to use to solve this issue?</p>
  
  <p>main.qml--From My main.qml file, I am calling boot.htm file. On my boot.htm file, I will call my javascript file. </p>
  
  <pre><code>Page{
      WebView {
          id: webView
          url: "local:///assets/boot.htm"
      }    
  }
  </code></pre>
  
  <p>boot.htm</p>
  
  <pre><code>&lt;div id="bootScreen" data-bb-type="screen" data-bb-scroll-effect="off"&gt; 
  &lt;style type="text/css"&gt;
  
  #bootScreen
  {
     background:url('images/image.gif') no-repeat;  
  }  
  #logo
  {
    height:200px;
    width:600px; 
  }
  &lt;/style&gt;
  &lt;script id="bootJS" type="text/javascript" src="js/boot.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  setTimeout(function () {
      $.ajax({
          url: "***",
          type: 'GET',
          data: { usr: localStorage["userName"],
              pwd: localStorage["userPassword"]
          },
          beforeSend: function () {
              $('#statusError').html('&lt;center&gt;&lt;div style="color:black !important; font-weight:bold font-size:20px"&gt;&lt;img class="loading" src="images/loader.gif" align="middle" style="margin-bottom:25px;"/&gt; LOADING&lt;/div&gt;&lt;/center&gt;');
          },
          timeout: 10000,
          success: function (data) {
              bb.pushScreen('login.htm', 'login');
              if (!isPlaybook()) {
                  unlockOrientation();
              }
          },
          error: function (jqXHR, textStatus, errorThrown) {
              $('#statusError').html('An Error Has Occured. Please Try Again');
              console.log(errorThrown);
              console.log(textStatus);
              localStorage.clear();
              bb.pushScreen('login.htm', 'login');
              unlockOrientation()
          }
      });
  }, 5000);
  
  $(window).resize(function () {
      $('#logo').css({
          position: 'absolute',
          left: ($(window).width() - $('#logo').outerWidth()) / 2,
          top: ($(window).height() - $('#logo').outerHeight()) / 2
      });
  });
  
  $(window).resize();
  
  &lt;/script&gt;
  &lt;div id="logo" style="display:none"&gt;
  &lt;img  src="images/image.gif" /&gt;
  &lt;/div&gt;                 
  &lt;/div&gt;
  </code></pre>
  
  <p>Boot.js</p>
  
  <pre><code>var service = "****";
  var locked = false;
  
  function rotateAndLock() {
  if (!locked) {
      blackberry.app.lockOrientation('portrait-primary');
      locked = true;
  }
  }
  
  function unlockOrientation() {
      blackberry.app.unlockOrientation();
      isLocked = false;
  }
  </code></pre>
  
  <p>I am not able to see the image.gif on my app when I ran it. I get error saying $.ajax is undefined variable. Please advise.</p>