Display methods for legacy CGI script output

Display methods for legacy CGI script output

Looking for best method to display output in a mobile app from a legacy CGI script. The script outputs simple comma delimited text. The legacy approach used an iFrame as target for script output using a GET call. The user page had a form input area above the iFrame so form inputs and option checkbox selections were persistent. 

What are suggested way(s) to get this wrapped up in a hybrid mobile app? I'm wondering if there are any plugins that already support interfacing with a web server script already?

5 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

 

Hi Scott,

Perhaps this would work for you? http://app-framework-software.intel.com/documentation.php#afui/afui_ajax

The documentation is a bit murky, but looking at the loadAjax source code, the function will load into a new page under .panels. If that does not give you enough control, you can take a look at the source code of loadAjax() (the version I have starts at line 1164 of appframework.ui.js) and follow their example. Behind the scenes it is using jQuery's $.ajax() object (lines 24-48 and 34-56):

        /**
         * This is called internally by loadContent.  Here we are using Ajax to fetch the data
           ```
           $.afui.loadDiv("page.html",false,false,"up");
           ```
         * @param {string} target
         * @param {boolean=} newtab (resets history)
         * @param {boolean=} go back (initiate the back click)
         * @param {string=} transition
         * @param {object=} anchor
         * @title $.afui.loadDiv(target,newTab,goBack,transition);
         * @api private
         */
        loadAjax: function(target, newTab, back, transition, anchor) {
            var that=this;
            var crc=crc32(target);
            var found=$(".panel[data-crc='"+crc+"']");
            var forceRefresh=anchor.getAttribute("data-refresh");

            if(found.length>0){

                if(forceRefresh){
                    that.showLoading&&that.showMask("Loading Content");
                    $.ajax(target).then(function(res){
                        found.html(res);
                        that.showLoading&&that.hideMask();
                        return that.loadContent("#"+found.prop("id"),newTab,back,transition,anchor);
                    });
                }
                else
                    return that.loadContent("#"+found.prop("id"),newTab,back,transition,anchor);
            }
            that.showLoading&&that.showMask("Loading Content");
            $.ajax(target).then(function(res){
                var $res=$.create("div",{html:res});
                if(!$res.hasClass(".panel")){
                    if($(anchor).attr("data-title"))
                        $res=$res.attr("data-title",anchor.getAttribute("data-title"));
                    else if($(anchor).attr("title"))
                        $res=$res.attr("data-title",anchor.getAttribute("title"));
                    else
                        $res=$res.attr("data-title",(target));
                    $res.prop("id",crc);
                    $res.addClass("panel");
                }
                else {
                    $res=$res.find(".panel");
                }
                $(that.activeDiv).closest(".pages").append($res);
                $res.attr("data-crc",crc);
                that.showLoading&&that.hideMask();
                that.loadContent("#"+$res.prop("id"),newTab,back,transition,anchor);
            }).fail(function(res){
                that.showLoading&&that.hideMask();
                console.log("Error with ajax request",res);
            });

        },

Regards,
Giedrius

Hi Giedrius,

I'm getting back into web development after a break of over ten years, so there's a lot for me to learn! Therefore, your reply is very much appreciated- thank you! I'll work on getting this example into a prototype app to see how it works.

I guess the next question is how to gather user inputs in this type of hybrid framework rather than the legacy site's "old style" HTML standard forms.

I need to gather form data as a combination of text inputs, hidden predefined fields, Select Options and Radio Button selections to then pass the key:value pairs to the script. I need to do this as a GET method submission to the legacy CGI script, and I'd like to avoid reprogramming the script if possible.

Thanks,

-Scott

quote=Giedrius Z.]

 

Hi Scott,

Perhaps this would work for you? http://app-framework-software.intel.com/documentation.php#afui/afui_ajax

The documentation is a bit murky, but looking at the loadAjax source code, the function will load into a new page under .panels. If that does not give you enough control, you can take a look at the source code of loadAjax() (the version I have starts at line 1164 of appframework.ui.js) and follow their example. Behind the scenes it is using jQuery's $.ajax() object (lines 24-48 and 34-56):

        /**
         * This is called internally by loadContent.  Here we are using Ajax to fetch the data
           ```
           $.afui.loadDiv("page.html",false,false,"up");
           ```
         * @param {string} target
         * @param {boolean=} newtab (resets history)
         * @param {boolean=} go back (initiate the back click)
         * @param {string=} transition
         * @param {object=} anchor
         * @title $.afui.loadDiv(target,newTab,goBack,transition);
         * @api private
         */
        loadAjax: function(target, newTab, back, transition, anchor) {
            var that=this;
            var crc=crc32(target);
            var found=$(".panel[data-crc='"+crc+"']");
            var forceRefresh=anchor.getAttribute("data-refresh");

            if(found.length>0){

                if(forceRefresh){
                    that.showLoading&&that.showMask("Loading Content");
                    $.ajax(target).then(function(res){
                        found.html(res);
                        that.showLoading&&that.hideMask();
                        return that.loadContent("#"+found.prop("id"),newTab,back,transition,anchor);
                    });
                }
                else
                    return that.loadContent("#"+found.prop("id"),newTab,back,transition,anchor);
            }
            that.showLoading&&that.showMask("Loading Content");
            $.ajax(target).then(function(res){
                var $res=$.create("div",{html:res});
                if(!$res.hasClass(".panel")){
                    if($(anchor).attr("data-title"))
                        $res=$res.attr("data-title",anchor.getAttribute("data-title"));
                    else if($(anchor).attr("title"))
                        $res=$res.attr("data-title",anchor.getAttribute("title"));
                    else
                        $res=$res.attr("data-title",(target));
                    $res.prop("id",crc);
                    $res.addClass("panel");
                }
                else {
                    $res=$res.find(".panel");
                }
                $(that.activeDiv).closest(".pages").append($res);
                $res.attr("data-crc",crc);
                that.showLoading&&that.hideMask();
                that.loadContent("#"+$res.prop("id"),newTab,back,transition,anchor);
            }).fail(function(res){
                that.showLoading&&that.hideMask();
                console.log("Error with ajax request",res);
            });

        },

Regards,
Giedrius

[/quote]

Hi Scott,

Generally Appframework is still just HTML/CSS with javascript. You can even do the form postback the same way traditional web applications do. However it is usually better to use some form of asynchronous HTTP request behind the scenes, because that allows to hide "web-iness" of the HTML+javascript app.

Take a look at jQuery.ajax() - it has a lot of options and it is a promise, so you will need to read on that as well MDN Promise.

To answer you question about the mechanics of form submission, here is what I would do:
 - create a panel (page) in the app withe form controls and the result area (say, a <div id="result">);
 - use Appframework CSS to create the layout you are happy with;
 - register javascript handler for the form's action button (or anchor);
 - in that handler function gather all the data from the form fields and app state (you do not need to use hidden fields for that - it can be stored in your javascript objects);
 - fire the jQuery.ajax() request - pay attention to whether it is GET or POST and do the processing in the .then() handler. For example, take the returned result and update contents of some <div>:

//...
$.ajax("http://foo.bar.com/my_script.cgi", {data: {field1: "field1_value", field2: get_field2()}, method: "get"})
.then(function (res, status, xhr) {
    // This only handles success case - handler for error is needed too!
    $("div#result").text(res);    // Assuming result is text, but formatting is probably wrong
});

It is veryhigh level and YMMV :-)

Best regards,
Giedrius

I managed to get it working using an ajax approach as follows with HTML interface page. The jquery script serializes the HTML form's inputs, and submits it to our legacy CGI processing script as follows below.

The approach is to set up a jquery/ajax handler script for when the submit button is clicked, present the form in HTML format, fetch the CGI script response, parse it for the html portion, then overwrite the original help instructions shown at the end of the form in element <div id="showresults> with the returned html response from the CGI script:

<script type="text/javascript">
$('document').ready(function()
{
var frm = $('#myform');
var res = $('#showresults');
frm.submit(function (event) {
event.preventDefault();
var searchresults = $.ajax({
type: frm.attr('method'),url: frm.attr('action'),data: frm.serialize(),dataType: 'html',
success: function(res){
  var text = res.responseText;
  document.getElementById("showresults").innerHTML = res;
  return(res);  }
});});}); 
</script>

HTML extract:

<form id="myform" method="GET" action="http://www.mydomain.com/cgi-bin/myscript.cgi">        

<input type="hidden" name="SearchType" value="GetHTML">
<input type="hidden" name="Case" value="off">
Input Letters: <br>
<input type="text" name="Letters" size="15" maxlength="50" placeholder="Game Letters" value="example"> <br>

(more inputs here.........)

<input type="submit" value="Send" name="submit" class="button"> 
<div id="showresults">
     <h3>How to Use MyApp</h3>
     <p>Usages instructions here, which get replaced by the CGI's HTML response after the form is submitted...</p>
</div>
</form>

 

 

 

 

 

Leave a Comment

Please sign in to add a comment. Not a member? Join today