Tips_tutorials   >   Studiojs201   >   Keeping the Search Form

Keeping the Search Form

We have a problem with our user interface in that the search form (search field and button) is lost when the results are returned to the web brower.

There are a number of ways we can solve solve this:

  1. Add the seach form to the HTML that is returned to the web browser.
  2. Add a frame to the web page. The upper portion of the web page would contain the search form. The lower portion of the web page would be filled with the frame. The frame would be used to display the search results. JavaScript would be used to send the search form request via the frame so that the HTML results from the Omnis Web App Server would be returned to the frame, not entire page.
  3. Use an XMLHTTPRequest object to submit the request and receive the results and JavaScript to dynamically add the results to the static page.

The problem with solution #1 is that the search form HTML in our Omnis Studio application has to exactly match the search form HTML in the static page or the search form on the results page won't match the look of the static page. Whenever a change is made to the static page, the HTML in the Omnis Studio application will have to be update. That gets to be a headache as we add more and more pages.

Solution #3 requires a fair bit of JavaScript and DHTML (Dynamic HTML) knowledge. Not something we want to tackle at this stage in the tutorial.

Solution #2 is the one we will pursue.

Adding a Frame

This is where the fun begins. Be prepared for some hair pulling adventures. You might want to take a coffee break before you dive into this section. We are going to have to tackle both HTML frames and JavaScript to get this working.

  1. Make a backup copy of the searchcountries.htm file and name the copy searchcountries_bak1.htm
  2. Open searchcountries.htm and add the following iframe tag just before the closing </body> tag.

    <iframe id="SearchResults" name="SearchResults" src="" width="100%" height="100%" scrolling="yes"></iframe>
  3. View the page in FireFox. http://localhost/searchcountries.htm

    Depending on your browser, you may or may not see a large black frame fill the lower portion of the web page. If you right-click anywhere in the lower portion of the window there should be one or more additional context menu lines that deal with frames. (This Frame, View Frame Source, etc.

Ping Page JavaScript

Our first baby step into the JavaScript world will be to add a Ping Page alert to our web page.

  1. Add the following JavaScript in the <head> section of the web page.

    <script>
    function pingPage() {

    alert("Ping Page");
    }
    </script>



    Note

    This tutorial is not intended to teach you JavaScript syntax. There is a plethora of information about JavaScript on the internet. The JavaScript Bible, recommended earlier in this tutorial, is excellent an excellent reference manual for JavaScript.

  2. Add the following button to the <body> section of the web page.

    <input type="button" value="Ping Page" onclick="pingPage()" />

  3. Reload the searchcountries.htm page in FireFox.
  4. The Ping Page button should appear on the page.
  5. Click the Ping Page button. A JavaScript alert should appear with the message text Ping Page.
If the Ping Page alert did not appear you likely have a JavaScript error. Under the Tools menu in FireFox select JavaScript Console. The JavaScript console is your debugging friend. It is the reason you will want to use FireFox for initial testing and debugging. After you have things working in FireFox you should test them in Safari and Internet Explorer.

Adding a JavaScript File

Putting loads of JavaScript in HTML files is not a good idea. In fact, you probably shouldn't put any JavaScript in your HTML files. Instead put all of your JavaScript in .js files and then load and call the from your HTML files.

  1. Start a new file in your text editor and enter the following JavaScript function in the file.

    function pingFile() {

    alert("Ping File");
    }

  2. Create a directory inside your web server directory and name it js
  3. Save the text file as countries.js into the js directory.

Ping File JavaScript

  1. Add the following JavaScript in the <head> section of the searchcountries.htm web page.

    <script type="text/javascript" src="../js/countries.js"></script>

    This tells the web browser to load the countries.js JavaScript file which is located in the js directory. You could supply the full URL to the JavaScript file. The JavaScript file can be located on another server... anywhere in the world.

    You can load as many JavaScript files as you like. JavaScript functions in the .js files are called the same way you would call them if they were directly inside the HTML file.
  2. Add the following button to the <body> section of the web page.

    <input type="button" value="Ping File" onclick="pingFile()" />
  3. Reload the searchcountries.htm page in FireFox.
  4. The Ping File button should appear on the page.
  5. Click the Ping File button. A JavaScript alert should appear with the message text Ping File.

If the Ping File alert did not appear use the FireFox JavaScript Console to debug your code.

Tip

Having a JavaScript ping function is handy for testing communication. If all else fails, add a ping function and button to your page and test to make sure that at least it works.

Once you have this working with FireFox, go ahead and try it with Internet Explorer or Safari.

Submit Form Via the Frame

As we have learned earlier in this tutorial, when we clicked the Submit button, the input values inside the <form> were sent as parameters to the web server using the method and action specified by the form. The request was then processed by the Omnis Web App Server. The entire contents of the web page which sent the request to the web server was replaced.

Instead of submiting the search form from the main page, we are going to gather the information from the search form using JavaScript and then send a request to the web server via the lower frame. That way the HTML returned by our Omnis Studio web app will fill the frame, rather than the whole page.

We'll do this one step at a time, and test each step as we go.

Submit Form 1 - Button & Function

  1. Add a Submit Search via Frame button to the searchcountries.htm static web page.

    <input type="button" value="Submit Search via Frame" onclick="submitSearchViaFrame()" />

    This can be in the line directly after the Ping File input button.
  2. Add the following JavaScript function to the countries.js file.

    function submitSearchViaFrame() {

    alert("Start submitSearchViaFrame");
    }

  3. Reload the web page in FireFox. The new button should appear. Click the button to make sure the new function is being called.
Note

Working with JavaScript it is a good practice to write a small chunk of code and test it, then write some more, and test again. Debugging JavaScript is a bear, so you want to find and fix errors one small step at a time. Remember to use the JavaScript Console to debug your code. It will tell you the location of the first error it hits.

Submit Form 2 - Get Base URL

Now add the code to the submitSearchViaFrame function which gathers the information are going to need.

  1. Modify the submitSearchViaFrame function so that it reads as follows:

    function submitSearchViaFrame() {

    //alert("Start submitFormViaFrame");

    // Get a reference to the Search Form
    var rForm = document.SearchForm ;

    // Get the action property from the form.
    var URL = rForm.action
    alert("URL = " + URL);
    }



    Tip

    You can comment out code in JavaScript using the // double slash charaters.

  2. Reload the web page in FireFox. Click the Submit Search via Frame button. The alert message should report something like: URL = http://localhost/cgi-bin/nph-omniscgi

Submit Form 3 - URL with Parameters

Now we'll build the full URL which we want to point the frame to.

  1. Modify the submitSearchViaFrame function so that it reads as follows:

    function submitSearchViaFrame() {

    //alert("Start submitFormViaFrame");

    // Get a reference to the Search Form
    var rForm = document.SearchForm ;

    // Get the action property from the form.
    var URL = rForm.action
    alert("URL = " + URL);

    // Get the search value from the form's entry field.
    var SearchValue = rForm.SearchValue.value
    alert("SearchValue = " + SearchValue);

    var OmnisServer = rForm.OmnisServer.value
    alert("OmnisServer = " + OmnisServer);

    var OmnisLibrary = rForm.OmnisLibrary.value
    alert("OmnisLibrary = " + OmnisLibrary);

    var OmnisClass = rForm.OmnisClass.value
    alert("OmnisClass = " + OmnisClass);

    URL = URL + "?" + "OmnisServer=" + OmnisServer + "&OmnisLibrary=" + OmnisLibrary + "&OmnisClass=" + OmnisClass + "&SearchValue=" + SearchValue;
    alert("URL = " + URL);
    }

  2. Reload the web page in FireFox. Click the Submit Search via Frame button. The alert message should report something like: URL = http://localhost/cgi-bin/nph-omniscgi?OmnisServer=5912&OmnisLibrary=ContactsWeb&OmnisClass=rtCountryList&SearchValue=
You could type the URL into a new web browser page and it should return a list of countries to the web browser.

Submit Form 4 - Set Frame URL

The final step is to point the frame to the URL causing it to send an HTTPRequest to the web server. The frame's src (source) property is what points it to a specific web page. All we need to do is set the src property to the URL and we will taste the sweet victory of success.

  1. Comment out all the alerts in the submitSearchViaFrame function.
  2. Add the following JavaScript to the end of the function, just before the closing } character.

    // Get a reference to the frame
    var rFrame = document.getElementById("SearchResults");
    alert("Frame ID = " + rFrame.id);

    // Point the frame to the URL
    rFrame.src = URL ;

  3. Reload the web page in FireFox. Click the Submit Search via Frame button. All going well a list of countries will appear in the frame on your web page.
  4. Enter the first letter or a country in the search value entry field and click the Submit Search via Frame button. All going well the countries beginning with the letter you type will be listed in the frame on your web page.

Congratulations! You have an ultra-thin client Omnis Studio application up and running! Go ahead and test if from other web browsers.

Warning

Unfortunately, Internet Explorer is not a fully W3C compliant. There are a few little JavaScript glitches that you will run into between FireFox, Internet Explorer, and Safari. If you run into one of these, do a Google search and you'll likely be able to find a work around.

Eliminating the Form

The <form> on the static page isn't actually needed. On my web apps I usually put all of the hidden inputs at the bottom of the <body> section of the web page. I also add a hidden input called WebAppServerCGI with its value set to the URL path to the Omnis CGI or Script.

Eliminating the form and moving the inputs to the bottom of the page, makes for a very simple HTML page.

Here is what the cleaned up HTML page looks like:

<html>
<head>
<title>Countries</title>

<script type="text/javascript" src="../js/countries.js"></script>

</head>
<body>
<h3>Countries</h3>

<p>Enter the first letter of a country and click the Search button</p>

<input type="text" id="SearchValue" name="SearchValue" size="1" />
<input type="button" value="Search" onclick="submitSearchViaFrame()" />

<iframe id="SearchResults" name="SearchResults" src="" width="100%" height="100%" scrolling="yes"></iframe>

<input type="hidden" id="WebAppServerCGI" value="http://localhost/cgi-bin/nph-omniscgi" />
<input type="hidden" id="OmnisServer" value="5912" />
<input type="hidden" id="OmnisLibrary" value="ContactsWeb" />
<input type="hidden" id="OmnisClass" value="rtCountryList" />

</body>
</html>

Here is what the cleaned up submitSearchViaFrame JavaScript function looks like:

function submitSearchViaFrame() {

// Gather the hidden inputs needed to assemble the URL
var CGI = document.getElementById("WebAppServerCGI").value
var OmnisServer = document.getElementById("OmnisServer").value
var OmnisLibrary = document.getElementById("OmnisLibrary").value
var OmnisClass = document.getElementById("OmnisClass").value
var SearchValue = document.getElementById("SearchValue").value

var URL = CGI + "?" + "OmnisServer=" + OmnisServer + "&OmnisLibrary=" + OmnisLibrary + "&OmnisClass=" + OmnisClass + "&SearchValue=" + SearchValue;
//alert("URL = " + URL);

// Get a reference to the frame
var rFrame = document.getElementById("SearchResults");

// Point the frame to the URL
rFrame.src = URL ;

}

  1. Make a backup copy of your searchcountries.htm and countries.js files.
  2. Modify the searchcountries.htm file to match the above HTML.
  3. Modify the countries.ja file to match the above JavaScript.
  4. Test the modified web page to make sure it still works.

StudioTips Documentation - Copyright 2006 Vencor Software