How can we use JQuery in mht files?

Question

I generated some active reports in cognos. Then I got across with this Dynamic reporting in Cognos using JQuery: http://www.ibm.com/developerworks/library/ba-pp-reporting-advanced-report-design-page647/

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).

This is the code I took in HTML item in report studio:

<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function()
{
  alert("hello");
  j('.ShowHideMap').hide();
  j('.ShowHideClicker').click(function()
  {
    j(this).next().toggle();
  });
});
</script>

<div class="ShowHideClicker">Click here to show/hide the Map Report</div>
<div class="ShowHideMap">
  
  Map comes here
  
</div>

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.

I took a notepad and typed the following code and saved it as "test.mht"

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" 
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function()
{
  j('.ShowHideMap').hide();
  j('.ShowHideClicker').click(function()
  {
    j(this).next().toggle();
  });
});
</script>
</head>
<body>
<div class="ShowHideClicker">Click here to show/hide the Map Report</div>
<div class="ShowHideMap">
Map
</div>
</body>
</html>

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.

Didn't work? please expand? Please post the code and indicate which browser you are using. I suggest you first open the debug window using the F12 key and identify any errors. — Nick.Mc, May 11 '15 at 11:45
I have edited the question and added the code, please do have a look — MChirukuri, May 11 '15 at 18:16
and you included this code somewhere to reference the JQuery library: ` — Nick.Mc, May 12 '15 at 00:37
No there are no errors in the F12 window. I tried adding this google api, but nothing happened. So I downloaded JQuery libraries to my PC and have added that in it. — MChirukuri, May 12 '15 at 10:18
It's difficult for me to troubleshoot this. It might be as simple as javascript not supported in your browser. Sorry I can't help any further — Nick.Mc, May 12 '15 at 10:46
In F12 window, It says "the attached page targets document mode 5" in the console tab. "This tool only supports document mode 10 or higher, go to Emulation tab and change your mode to edge" in memory tab. And when I changed the mode to edge, there comes an error that "BoxObject is undefined" — MChirukuri, May 12 '15 at 11:09
Basically if you get a single javascript error none of it will work — Nick.Mc, May 12 '15 at 11:17
It worked fine in normal mht file and I also changed to Firefox browser. I edited the question, please have a look. — MChirukuri, May 12 '15 at 15:12
So it doesn't show the `alert("hello");` at all? It's good that you have a working MHT version to compare to. Can you see if the jquery reference is correct in the F12 window? If you inspect the document can you confirm your Javascript made it through? — Nick.Mc, May 12 '15 at 22:45
No, it didn't show the alert at all. In the F12 window console, it shows "ReferenceError: BoxObject is not defined" . I can see "Click here to show/hide the Map Report" and the map report is under it. But when I click on text, map report is not hiding. — MChirukuri, May 13 '15 at 13:28
It's difficult to troubleshoot. Probably all the info you need is in the F12 window. Perhaps take a look at this. http://getfirebug.com/javascript to help you debug it. None of your javascript will work until you fix this error. First thing to check is whether the cognos renderer includes all the expected code? (compare to your manually created MHT). Make sure your file references the Javascript library. — Nick.Mc, May 13 '15 at 23:04

score 1 · Answer 1 · answered Jul 15 '19 at 18:42

This may help

https://bobsbiblog.wordpress.com/2014/08/25/creating-javascript-functions-in-active-reports/

The key to this technique is the tag which is one of the few to include an onLoad event. This event fires as soon as the image is displayed.

Add an HTML item anywhere on the report, just make sure it’s somewhere that will always be rendered (on the page, but not inside any decks). Give the HTML item the following text:

<img src="hal/imagesirot/progress.gif" width="1" height="1" onload="
     while( ! alert) {} 
     /* Define the function */ 
     if (!document.testFunction ) { 
          testFunction = function() { 
               alert('We are running the test function'); 
          } 
     } 
     /* Run any startup actions */ 
     testFunction(); 
"/>

How can we use JQuery in mht files?

1 Answers1