[SOLVED] Calling a fex from javascript into a div

Can someone please post a sample of code that calls a webfocus fex using javascript and returning it to a div?

I can do this and return to a new window, but I was hoping to avoid popups.
Here is what I have so far:

  function runFex(sel_month) {
var glbWebFocusUrl = "../ibi_apps/WFServlet?IBIF_ex=populatepie&";
 glbWebFocusUrl += "sel_month=";
    glbWebFocusUrl += sel_month;
window.open(glbWebFocusUrl,'mywindow','width=800,height=600');
}

This message has been edited. Last edited by: Kerry,

WF version 8105
all output

Posts: 28 | Registered: February 17, 2010

posted

I would recommend using jquery.

Suppose you have the following fex in your baseapp folder (saved as car1.fex)

-DEFAULT &COUNTRY = 'FOC_NONE'

TABLE FILE CAR
  SUM
    DEALER_COST
  BY COUNTRY
  BY CAR
  BY MODEL
  WHERE COUNTRY EQ '&COUNTRY' ;
  ON TABLE SET STYLE *
  TYPE=REPORT, FONT='TAHOMA', SIZE=9 ,$
  ENDSTYLE
END

and the following html (also in your baseapp folder) saved as car1.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Demo jQuery / WebFOCUS</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script>
    var _url       = "http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=";
    var _ibiapp    = "baseapp/";
    var _procedure = "car1";

    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">
  <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;">
  </div>
</body>
</html>

... and then call this HTML-page like (depending on your configuration):

http://localhost:8080/approot/baseapp/car1.htm

This is just a basic example, but it will give you an idea on how it can be done.

-Fred-

This message has been edited. Last edited by: <FreSte>,

Troy_proffitt

Member

posted

Hide Post

Fred,
This is worth it's weight in gold. Works perfect!

WF version 8105
all output

Posts: 28 | Registered: February 17, 2010

Ignored post by Troy_proffitt posted

Show Post

Sivakumaran Elangovan

Member

posted

Hide Post

I have a listbox which is single select and If I select a value in that listbox, I want to call another fex which return values which I have to populate back to another list box on the same page. Is this achievable thro jquery?

Webfocus 7.6
Excel, HTML, PDF

Posts: 13 | Registered: May 23, 2013

Ignored post by Sivakumaran Elangovan posted

Show Post

Wep5622

Virtuoso

posted

Hide Post

Certainly.

We do this similar to the above example, with a few changes: We generate the TABLE FILE output as PCHOLD FORMAT XML and parse the result with a custom XML parser in the success() event handler (again, see above code).

The custom XML parser sounds a lot more complicated than it is; the IBI XML format is fairly simplistic.
For parsing nodes in the XML you use the normal JQuery selectors, but based in the received XML document: $(selector, xmlDocument).

For each parsed row-element in the XML results, you create a new list-box option using jquery.append().

For example:

MyListboxChangeHandlerClass.prototype = {
	loadListBox	: function (url) {
		$.get(url, $.proxy(this.parseListBoxXml, this));
	},

	parseListBoxXml	: function(xml) {
		var dataNode = $('table tr', xml).first();
		var value = dataNode.children('td[colnum="c0"]').text();
		var display = dataNode.children('td[colnum="c1"]').text();

		$('#' + this.listboxId).append('<option value="' + value + '">' +
			display + "</option>\n");
	}
};

If you understand the above code, you can get fancy and parse the XML header part of the IBI XML as well, so that you don't need to hard-code what each column identifier ("c0", "c1", etc.) means.

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted

Show Post

Sivakumaran Elangovan

Member

posted

Hide Post

Hi , Am using jquery like this in my dev code.
This jquery is used to populate values on to UI controls like, listbox, comboboxes based on certain flow of events.

I have included the code of jquery latest.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
<script type="text/javascript">
var _url = "/ibi_apps/WFServlet?IBIF_ex=";
var _ibiapp = "prr_dev/";
var _procedure_for_div = "per_division_generate";
var _procedure_for_dept = "per_department_generate";
var _procedure_for_class = "per_class_load_multi";
var _procedure_for_subclass= "per_subcl_load_multi";
var _procedure_for_dpci= "per_dpci_load_multi";
var _procedure_for_dpci_for_class= "per_dpci_load_for_class";
var _procedure_for_year="per_year_load";
var _procedure_for_startdate="per_start_date_load";
var _procedure_for_enddate="per_end_date_load";

function getyear()
{
$.ajax({
type : "GET",
url : _url+_ibiapp +_procedure_for_year ,
data : "SEL=" + $("#combobox_for_startweekyear").val(),
dataType: "html",
success : function(_data)
{
$('#combobox_for_startweekyear').empty();
$(_data).find('tr').each(function()
{
var value1 = $(this).children('td[colnum="c3"]').text();
var display = $(this).children('td[colnum="c4"]').text();
$('#combobox_for_startweekyear').append('' + display + "\n");
$('#combobox_for_endweekyear').append('' + display + "\n");
}
);
}
}
);

This is working fine when I use this code and run the fex file from webfocus dev studio.. but at times, when opening the link from external browser, the url is throwing "Object Expected Error".. I am pretty sure this is with jquery code.. What has to be done to resolve..? Is that we have to deploy the jquery lib files to our local environment? I am completely new to jquery and even webfocus.. please help me..

Webfocus 7.6
Excel, HTML, PDF

Posts: 13 | Registered: May 23, 2013

Ignored post by Sivakumaran Elangovan posted

Show Post

Surenther

Silver Member

posted

Hide Post

quote:

Originally posted by FreSte:
I would recommend using jquery.

Suppose you have the following fex in your baseapp folder (saved as car1.fex)

-DEFAULT &COUNTRY = 'FOC_NONE'

TABLE FILE CAR
  SUM
    DEALER_COST
  BY COUNTRY
  BY CAR
  BY MODEL
  WHERE COUNTRY EQ '&COUNTRY' ;
  ON TABLE SET STYLE *
  TYPE=REPORT, FONT='TAHOMA', SIZE=9 ,$
  ENDSTYLE
END

and the following html (also in your baseapp folder) saved as car1.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Demo jQuery / WebFOCUS</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script>
    var _url       = "http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=";
    var _ibiapp    = "baseapp/";
    var _procedure = "car1";

    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">
  <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;">
  </div>
</body>
</html>

... and then call this HTML-page like (depending on your configuration):

http://localhost:8080/approot/baseapp/car1.htm

This is just a basic example, but it will give you an idea on how it can be done.

-Fred-

Thanks a lot. It's helped me a lot. Could you please let me know how to pass multiple parameters?

----------------------------------
Prod Version:WebFocus 8.1.05,OS:Unix ,Output:ALL

Posts: 29 | Location: North Carolina | Registered: August 26, 2008

Ignored post by Surenther posted

Show Post

posted

Surenther

For multiple parameters you can do something like this:

HTML-page:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Demo jQuery / WebFOCUS</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

    <script>
	
	$(document).ready(function() {	
		$("#content").draggable();
	})
	
    var _url       = "/ibi_apps/WFServlet?IBIF_ex=";
    var _ibiapp    = "baseapp/";
    var _procedure = "car1";

    function getReport() {
		var _data = "";
		_data += "&COUNTRY=" + getSelectedValues("country");
		_data += "&SEATS="   + getSelectedValues("seats");
		$.ajax({
            type    : "GET",
            url     : _url + _ibiapp + _procedure + "&rnd=" + Math.random(),
            data    : _data,
            dataType: "html",
            success : function(_data) {
                $("#content").empty();
                $("#content").append(_data);
            }
        });
    }
	
	function getSelectedValues(_id) {
		var $obj  = $("#" + _id);
		var _type = $obj.attr("data-type");
		var _values = $obj.val();
		
		if (_values.indexOf("FOC_NONE") > -1) return "FOC_NONE";

		if (_type == "A") {
			_values = "'" + _values.toString().replace(/,/gi , "','") + "'" ;
		}
		return _values;
	}
	
    </script>
</head>

<body id="body">
  <select id="country" MULTIPLE data-type="A">
    <option value="FOC_NONE" selected>  -- All --  </option>
    <option value="ITALY">     Italy      </option>
    <option value="ENGLAND">   England    </option>
    <option value="W GERMANY"> W Germany  </option>
  </select>
  <select id="seats" MULTIPLE data-type="N">
    <option value="FOC_NONE" selected>  -- All --  </option>
    <option value="2"> 2 </option>
    <option value="4"> 4 </option>
    <option value="5"> 5 </option>
  </select>
  <button onclick="getReport();">getReport</button>

  <div id="content" style="position:absolute; left:200px; top:100px; background-color:#f5f5f5;">
  </div>
</body>
</html>

... and the fex:

  
-DEFAULT &COUNTRY = 'FOC_NONE';
-DEFAULT &SEATS   = 'FOC_NONE';

-SET &ECHO='ON';

TABLE FILE CAR
HEADING
"Report is also draggable !!"
  SUM
    DEALER_COST
  BY COUNTRY
  BY CAR
  BY MODEL
  ACROSS SEATS
  WHERE COUNTRY IN (&COUNTRY);
  WHERE SEATS   IN (&SEATS);
  ON TABLE SET PAGE NOPAGE
  ON TABLE SET STYLE *
  TYPE=REPORT, FONT='TAHOMA', SIZE=9 ,$
  ENDSTYLE
END
-RUN

-IF &LINES EQ 0 THEN GOTO :NO_RECORDS;
-EXIT

-:NO_RECORDS
-HTMLFORM BEGIN
<html>
No records found for selected values ...
</html>
-HTMLFORM END

Surenther

Silver Member

posted

Hide Post

Thanks a lot for your response

----------------------------------
Prod Version:WebFocus 8.1.05,OS:Unix ,Output:ALL

Posts: 29 | Location: North Carolina | Registered: August 26, 2008

Ignored post by Surenther posted

Show Post

Please Wait. Your request is being processed...

Read-Only Topic

Focal Point

Focal Point Forums

WebFOCUS/FOCUS Forum on Focal Point

[SOLVED] Calling a fex from javascript into a div

Focal Point | Privacy Statement | Terms of Service