[Solved] How to Insert an Active Report into a DIV tag?

December 17, 2014, 10:53 AM

David Briars

In the following thread, a FocalPoint member showed a great technique for inserting a HTML report into a DIV tag:

[SOLVED] Calling a fex from javascript into a div

I would like to extend this technique, and insert an Active Report into a DIV tag.

Here is my report focexec - carahtmlrpt:

-DEFAULT &COUNTRY = 'FOC_NONE'
APP PREPENDPATH IBISAMP
TABLE FILE CAR
  SUM
    DEALER_COST
  BY COUNTRY
  BY CAR
  BY MODEL
  WHERE COUNTRY EQ '&COUNTRY' ;
  ON TABLE PCHOLD FORMAT AHTMLTAB
  ON TABLE SET STYLE *
  TYPE=REPORT, FONT='TAHOMA', SIZE=9 ,$
  ENDSTYLE
END

Here is my calling focexec:

-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
    <title>Demo jQuery / WebFOCUS</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script>
    var _url       = "http://yourservernamehere/ibi_apps/WFServlet?IBIF_ex=";
    var _ibiapp    = "testcode/";

	var _procedure = "carahtmlrpt";

    function getReport() {
        $.ajax({
            type    : "GET",
            url     : _url + _ibiapp + _procedure + "&" + "rnd=" + Math.random(),
            data    : "COUNTRY=" + $("#country").val(),
            dataType: "html",
            success : function(_data) {
                $("#content").empty();
                $("#content").append(_data);
            }
        });
    }
    </script>
</head>

<body id="body">
!IBI.OBJ.ACTIVEREPORTJS;
  <select id="country">
    <option value="FOC_NONE">  -- All --  </option>
    <option value="ITALY">     Italy      </option>
    <option value="ENGLAND">   England    </option>
    <option value="W GERMANY"> W Germany  </option>
  </select>
  <button onclick="getReport();">getReport</button>
  <div id="content" style="position:absolute; left:200px; top:100px;">
   [Report will go here.]
  </div>
</body>
</html>
-HTMLFORM END

Note that the code assumes the application folder is 'testcode', and you would need to 'add your server name'.

When I clck run the report does not appear on the page.

When I capture network activity, via Programming Tools (I am on IE), I do see the Active Report code being returned AOK.

I think I am on the right track, as this focexec displays the Active Report within the DIV tag AOK:

APP PREPENDPATH IBISAMP
TABLE FILE CAR
  SUM
    DEALER_COST
  BY COUNTRY
  BY CAR
  BY MODEL
  ON TABLE HOLD AS HLDRPT FORMAT AHTMLTAB
  ON TABLE SET STYLE *
  TYPE=REPORT, FONT='TAHOMA', SIZE=9 ,$
  ENDSTYLE
END
-* 
-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>

<body id="body">
Here is your report..
!IBI.OBJ.ACTIVEREPORTJS;
  <div id="content" style="position:absolute; left:200px; top:100px;">
   !IBI.FIL.HLDRPT;
  </div>
</body>
</html>
-HTMLFORM END

I am thinking there must be some amendments required to the jQuery/Ajax code, that will support the code returned by AHTMLTAB.

This message has been edited. Last edited by: David Briars,

December 17, 2014, 02:09 PM

Francis Mariani

Hmmm, I'd be very surprised that you can retrieve an Active HTML report (AHTMLTAB) from an Ajax call.

I noticed you include jQuery in your HTML, so perhaps the issue is multiple versions of jQuery. I posted a tip here. Try either removing your reference to jQuery or use the conflict avoidance technique.

If this doesn't work, I'd put the Active HTML report in an iframe and make that iframe the target of a regular fex call (non-Ajax).

December 20, 2014, 03:06 PM

<FreSte>

David,

I agree with Francis. In your fex, the AHTMLTAB report that is being generated is a full-blown HTML-page (including the

<html> and </html>

tags.
Putting that HTML-page in a div is not desirable.

I think adding an iframe and loading the report in that iframe is the easiest way to do it.
I copied below a small example with an iframe in a jQuery dialog with iframe (using the same fex)
Hope this will help,

Cheers,

-Fred-

<!DOCTYPE html>
<html>
<head>
  <title>Demo jQuery / WebFOCUS</title>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

  <style>
    .ui-button {
	  font-size	: 0.8em;
    }
    .ui-widget .ui-widget {
      font-size	: 0.9em;
    }
    .ui-dialog {
      font-size	: 0.8em;
    }	
    </style>
    <script>
    var _url       = "http://yourservernamehere/ibi_apps/WFServlet?IBIF_ex=";
    var _ibiapp    = "testcode/";
    var _procedure = "carahtmlrpt";

    $(document).ready(function() {
      $("button").button();
      $("#country").on("change", "", function() {
        $("#iframe1").attr("src", "about:blank");
      })
		
      $("#btn-getreport").on("click", "", function() {
        getReport();
      })
		
      $("#divDialog1").dialog({
         autoOpen     	: false
        ,closeOnEscape	: true
        ,resizable    	: true
        ,width		: 700
        ,height		: 400
        ,position	: { my: "center", at: "top+300", of: window }
        ,show           : {effect: "clip", duration: 350}
        ,hide           : {effect: "clip", duration: 350}
        ,stack        	: true
        ,modal        	: true
        ,buttons: [
          {
             text  : "Maximize"
            ,click : function() {
               maximizeDialog();
             }
          },
          {
             text  : "Close"
            ,click : function() {
               $(this).dialog("close");
             }
           }
         ]
      });
    })

    function getReport() {
      if ( $("#divDialog1").html().indexOf("IBIF_ex") == -1) {
        $("#divDialog1").dialog("option", "title", "Active HTML in jQuery dialog");
        var _data = "&COUNTRY=" + $("#country").val()
        $("#iframe1").attr("src", _url + _procedure + _data	);
      }
      $("#divDialog1").dialog("open");
    }
	
    function maximizeDialog() {
      var _dialogWidth  = $(window).width()  - 50;
      var _dialogHeight = $(window).height() - 50;
		
      var _dlg1 = $("#divDialog1").parents(".ui-dialog:first");
      _dlg1.stop().animate({ 
        width 	: _dialogWidth, 
        height	: _dialogHeight,
        top 	: 25, 
        left	: 25
      }, 350);
      var _dlg2 = $("#divDialog1");
      _dlg2.stop().animate({ 
        width 	: _dialogWidth-30, 
        height	: _dialogHeight-100
      }, 350);
    }
    </script>
</head>

<body id="body">
	<select id="country">
		<option value="FOC_NONE">  -- All --  </option>
		<option value="ITALY">     Italy      </option>
		<option value="ENGLAND">   England    </option>
		<option value="W GERMANY"> W Germany  </option>
	</select>
	<button id="btn-getreport">getReport</button>

	<div id="divDialog1">
		<iframe id="iframe1" style="width:99%; height:90%;">
		</iframe>
	</div>
  
</body>
</html>

December 21, 2014, 06:59 PM

David Briars

@Francis – Thank you for your comments. I see now that the original technique (ajax) for inserting an HTML report into a DIV tag, cannot be extended to Active Reports.

@Fred – Thank you for your excellent demo/model. It works wonderfully in my environment.

I agree that setting the Active Report URL, to the SRC attribute of an IFRAME tag, is the way to go. The fact that you can control the how the report appears within the host page, via DIV tag settings, is exactly what I was after. :-)

This message has been edited. Last edited by: David Briars,