Updating a section of the page

Ajax technique to enter data and display updated data on a template without reloading the whole template.
The basic idea is to display a table within a restricted area on the main template. Open a new template that enables one to create new data and immediately refresh the table so that it includes the new data.

The "host" template

The extremely simple host template comprises of :
- a "Test" button which opens the data entry template "postback_test" via a javascript,
- a fixed value assign for test purposes
- a QAJAX tag to call the "testcallee" template which receives the creditor_id_entry value via the QREQUESTPARAM
- a script to trigger the QAJAX
- a DIV to display the result

The "Test" button opens the following:


This template just creates a new record in the debitor table for a creditor id of 923, tells the window opener template ("test") to run the tcall script and close itself.
The tcall script in the "test" template calls the QAJAX "postback_test" which fills in the list of all debtors for the creditor 923.


Here's a quick clip.

the action


Getting a WebTemplate Name

There are many times when a web template name needs to be integrated into a project design. For example, if a construction occurs on multiple webtemplates, it may be helpful to know which one is used for specific actions. Here is how to get the name of the webtemplate. Note that we are talking about the export name, not the name in the framework window.


The environmental variable, SCRIPT_NAME, is used to extract the portion of the URL that contains the webtemplate name. In some circumstances, the suffix, .jsp, may be used. The construction tests for, and removes .jsp when it exists.


Case coercion error

A common problem developers run into is the java error where a value cannot be converted (or coerced) from a number into a string or a string into a number. While the problem can easily be addressed, It is often difficult to find and even harder to understand. So, let's review the issue and shed some light.

Cannot convert 12A45 of type class java.lang.String to class java.lang.Long

There are some Qilan operators that require the same value type in order to accurately determine a result. Operators such as >, <, ≥ and ≤ are comparison operators that can only function properly if what is being compared is of the same type. Consider the following: 2 > 100. Objectively, the answer here is NO, two is not greater than on hundred. However, this is true only if we are comparing numbers. If we assume both values are strings, the answer is YES. If one parameter is a a string and the other a number, java will return an error as the values are ambiguous with relation to one another.

In the example shown above, if 'data' is not a number, java will return an error. However this can be corrected by coercing the field value to a number.

Values submitted or obtained from a web submission are always considered as strings. Values such as ABC, 123, A1B2C3 are all strings when evaluated from a web submission, meaning the framework field that carries the value.

A number is construed as digits, with or without a decimal, when retrieved from a database table, or strings manipulated with Qilan abacus operators where the result is a number. Strings such as 10.12.2012 and 34 778,00 are not numbers.

To convert a string to a number, you must use a case operator: integer [ ], float [ ], round [ ], add [ ] [ ], etc. or any other operator where the result will be a number.

To convert a number to a string, use text [ ], [ ] followedby [ ], substring [ ], etc. or any other operator that returns a string.


HREF OpenWindow

A very common and useful construction is to create a link a user can click on to open a new window. Not only is a new window opened, but values from the current form are passed so that the window can perform a query based on the passed values.

The first step is to use the HTML A tag. This is placed on the originating page. You have considerable control over how this link is displayed, from color to the style of the cursor.

When the link is clicked, a javascript is invoked that defines the data to be passed (href_cus_discounts) as well as window parameters such as size, toolbar, scrollbar, etc.


The values of cus_number and order_number will be passed to the Discounts window. Note however, these values must exist or be passed from the originating page or the onClick event will fail.



Building a Dictionary

In this example, we are going to store a complete database table in a framework field scoped as session (__LabelDictionary). The data will be accessed by referencing the dictionary. This technique saves time, particularly database access. A dictionary is a type of array that uses a key rather than a index value.

The table 'Translation' is retrieved when a user logs in. That is, it is only accessed once per user access. Two fields are retrieved, the EnglishName and Column_Selector. In this example, EnglishName is the primary key.


To create a dictionary, use a QASSIGN and add the attribute, 'key'. When this QFIND is executed, the dictionary will automatically be created. The scoping of the field icon, __LabelDictionary, as session, will save the dictionary for future use by the user. If you want all users to be able to access the dictionary (as a global value), scope the field as application.

The column_selector, based on the user's country, defines the output language. The Translation table contains several columns that, using the EnglishName, translate words into several languages.


Now that we have our dictionary, how do we access it? Simply, by referencing the dictionary icon and key value. In this case, when the key value (EnglishName) is 'Search'. The output will be the word that translates from 'Search' according to the user's language.

You can either re-create this abacus in all frameworks that require a translation or in one framework where the abacus is acquired. In both cases, the field, __LabelDictionary (scoped as session with framework sharing enabled) must exist.


Dynamic Formatting

Some projects require specialized formatting dependent upon user parameters. In this example, the format of a date is changed based on the country of the user. A user table has been set up, so when a user logs in, his/her country is retrieved and stored as a session field. This value is then used to change how a date is displayed.

A framework icon is created that has framework sharing enabled (out_date). This icon will carry the date value, from the database (ESP/Invoice/invoice_due_date) to the Globals framework and display the output via QINCLUDE.

In the Globals framework, a corresponding icon (out_date) is created, also with framework sharing enabled.


Based on the user's country, the proper format is determined for out_date.


The web template that is 'included' returns the date in the proper format. Note that the final element is a QVALUE. This will display the date where the QINCLUDE is placed.


Conditional Query

Queries used by a QFIND or QGROUP need to built in an Access/Table, but may use values set by a user. Webtemplates submissions can be evaluated by Qilan and passed directly to query icons. Consider this query...


The values, ymd_number (formatted as an integer yyyymmdd) and staff_rowid (integer) are database columns. Our query will use these values to return a result. Furthermore, the user may or may not enter a staff_rowid, thus we want the query to use ymd_number regardless. This is what is referred to as 'conditional'.

The field values, report_start_date and report_stop_date are framework fields. A user will be entering these values as dates, but our query requires them to be in the format of yyyymmdd. Additionally, the report_start_date, by our report design, will always be the first day of the month. Since the column value of ymd_number is an integer, a case conversion is made before the value is acquired by the query.

The third query element uses an IF-THEN-ELSE operator. While the operator itself is not passed to the database, the result is. Staff_rowid_search is a framework value submitted by the user. If it is undefined, we want the query to ignore it; otherwise the staff_rowid_search is to be used by the query. This is done by testing for the presence of a value at the framework level by acquiring the abacus above. Finally, if no value exists, we use a query that selects ALL records. Using the primary key (rowid) accomplishes this.

A couple of notes about this type of construction. A query icon cannot contain empty or undefined elements. This will return SQL errors by the database. In our example, report_stop_date cannot be undefined as no provision has been made for this event.

The AND conjunction is expanded. One AND operator is used and each parameter is expanded. This approach is recommended as it highly optimized, although multiple operators will work.

Lastly, this type of conditional query can be expanded as your designs require. There is no practical limit.


Age Calculation

This is how to calculate a person's age knowing their date of birth (DOB).


CSV Import

This construction is designed to load a csv file, parse its contents and load them into a database.

A jar file (csvtag) is used from Cold Beans Software. The jar file is then placed into qilan/WEB-INF/lib/.

The parent tag, forEachRow, defines the location and separator for the file. Each child tag, getField, obtains the field data and assigns it to an 'id'. The id is then assigned to a Qilan framework field using the java syntax, '<%=[id]%>. The syntax is defined by the tag. The last action is to then use a QUPDATE to insert each row into the database.


AJAX Constructions

Here is a very simple example as to how to use QAJAX to obtain form values, pass them to another web template for computation, then return the result to the originating page. All of this is done without a FORM submit.


A Q-wiki

My first entry to the bloq that I will call a Qwiki.
How to create a download page for text files without the text displaying in the browser.

A thousand words in a picture :

text file download

Using the above technique and modifying to become more reusable you can end up with lsts where you can select individual files for download.

The above uses a couple of ajax calls, jqueryui plus a javscript or two but the download itself uses the technique displayed at the top

1 comment