title: How can we use JQuery in mht files?
body: <p>I generated some active reports in cognos. Then I got across with this Dynamic reporting in Cognos using JQuery: 
  <a href="http://www.ibm.com/developerworks/library/ba-pp-reporting-advanced-report-design-page647/" rel="nofollow">http://www.ibm.com/developerworks/library/ba-pp-reporting-advanced-report-design-page647/</a></p>
  
  <p>I generated some interactive reports with JQuery. But now I want to genearate an active report using JQuery. I tried but it didn't work. So is there a way to use JQuery in mht files? (as active reports are stored in that format).</p>
  
  <p>This is the code I took in HTML item in report studio:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  var j = jQuery.noConflict();
  j(document).ready(function()
  {
    alert("hello");
    j('.ShowHideMap').hide();
    j('.ShowHideClicker').click(function()
    {
      j(this).next().toggle();
    });
  });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ShowHideClicker"&gt;Click here to show/hide the Map Report&lt;/div&gt;
  &lt;div class="ShowHideMap"&gt;
    
    Map comes here
    
  &lt;/div&gt;  </code></pre>
  </div>
  </div>
  </p>
  
  <p>I am using Firefox for opening the active reports. When I open the report, and click on "Click here to show/hide the Map Report", its not hiding.</p>
  
  <p>I took a notepad and typed the following code and saved it as "test.mht" </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var j = jQuery.noConflict();
  j(document).ready(function()
  {
    j('.ShowHideMap').hide();
    j('.ShowHideClicker').click(function()
    {
      j(this).next().toggle();
    });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="ShowHideClicker"&gt;Click here to show/hide the Map Report&lt;/div&gt;
  &lt;div class="ShowHideMap"&gt;
  Map
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It worked. When I click on "Click here to show/hide the Map Report", the word Map is showing/hiding. But when I took the same code in HTML item in active reports, reports are not showing/hiding.</p>