Tag Archives: jQuery

How to Use Chrome Developer Tools to Debug Ajax

Ajax is a popular technique that we’re seeing more of our clients use to create faster and more dynamic web applications. It’s also part of the new WebSmart templates and used in the underlying Presto code. It can, however, be difficult to know where to start when debugging Ajax. How do you tell which component (e.g. HTML, jQuery event, Ajax call, server-side script, Ajax response callback) isn’t working properly?

Continue reading

WebSmart Webinar: A Closer Look at the Grid Template and Customizing Themes

In the past year, a grid template and new template themes were added to both WebSmart ILE and PHP. In this technical webinar, we’ll take a closer look at both of these exciting new features.

You’ll learn:

  • The benefits of the grid, including better performance and end user experience
  • The key differences between the grid and other templates
  • How to customize grids
  • Why the new themes use jQuery UI
  • How to create your own template themes using jQuery ThemeRoller

Please contact us for a link to the recording.

Dive into jQuery

If you’re like most programmers today, you’re expected to write modern looking, quick responding web apps with cross-browser (and cross-platform) capabilities. For this reason, client-side programming often accounts for a significant portion of coding time. Tools and technologies that help speed it up – while giving end users web apps that look and behave the way they expect – can be invaluable.

Continue reading

Code Snippets for PHP, JavaScript and ILE

Yesterday we added a folder to the consulting SVN repository to store code snippets in (http://svn.excelsystems.com/svn/consulting/001 Code Snippets). There are already a few snippets in there. The purpose is of course easier sharing and accessibility to reusable code. And all the advantages of subversion, e.g. tracking changes.

Please feel free to add any of your code snippets to this folder and/or improve existing snippets.

The following scripts/functions/files are already there:

  • ILE
    • A search and replace function, that scans a text file for place holders and replaces those with any text. WebSmart 8.8 required with local variables and function parameters enabled.
  • JavaScript
    • A print_r/var_dump function that I found on a website. It’s similar to PHPs print_r/var_dump
    • jQuery Plugins: autoSubmit and elapsedTime. I wrote these two scripts. The autoSubmit plugin submits a form when a maximum defined number of characters is reached. The elapsed Time outputs a simple timer, I found the plugins out there too complicated for what I wanted to do. The autosubmit is used for two touch screen applications that we developed, Skechers and Cleveland Gear.

New WebSmart Updates, Examples & KB Articles. Last Call to Sign up for WS ILE Online Training.

We have recently created new WebSmart example programs and published many KB articles that may be useful to you. Also, registration closes on Saturday for the WebSmart ILE online training, and there are some new updates you should be aware of.

WebSmart 8.8 IDE Update
WebSmart IDE version 5983-8198 is available for download. This updated version of the IDE resolves two issues: getparm would not retrieve values into a structure, and some View Data problems with user input values in Clover. We also added additional JavaScript keywords to the context-sensitive F1 help.

WebSmart 8.8 Feature Spotlight: jQuery
Developers wanting to use more powerful web development features will be particularly excited to see that in WebSmart 8.8 we switched our templates to use the jQuery JavaScript library. If you aren’t yet familiar with jQuery it’s well worth spending a few hours reading up on it online and reviewing some of our own online examples. We use it extensively ourselves, both in our software tools and our professional services work.

WebSmart 8.8 is the latest release of the software. Check our web site for an overview of the new features, or view the recorded webinar.

WebSmart 8.2 Updates
Just before releasing WebSmart 8.8 we had created a few updates for WebSmart 8.2. You can find more information about these updates at the WebSmart server and client side updates history pages.

These fixes are included in version 8.8, but if you aren’t ready to upgrade and would rather just apply them as updates to your current installation of version 8.2, email us to request download instructions.

Last call for WebSmart ILE Online Training
Registration for next week’s first WebSmart ILE online training course ends this Saturday. You can attend these 2 hour courses from the convenience of your office at the low cost of $149 per course. You can register for individual courses or all of the following topics: WebSmart templates, intro to PML, passing parameters, getting user input and validating the data, stateless programming and security. Enroll or learn more >>.

New Code Samples
We have published several code samples you can use as you create WebSmart applications:

  • Example 214 illustrates how to use jQuery to quickly display list record details in a pop-up window without loading a separate page.
  • In Example 213 we helped a client resolve a validation problem where users were submitting data that included specific characters they could not have in their files.
  • Example 206 describes the steps to create a web service using PHP and SOAP.

Let us know if you have any questions or comments on these, or need help implementing them!

New KB Articles
Our Tech Team has also been busy writing new KB articles. Here is a sampler:

  • A solution to a problem with PHP programs timing out before fully loading very large pages.
  • Information on how to work with PDF and Excel files in your PHP programs.
  • How to check which WebSmart service programs are currently used by your applications (a great new feature in WS 8.8!)
  • A way to add compiler directives to your programs via the PML.
  • Advice on where to look if you have issues with user-written functions after an upgrade.
  • Suggestions on how to use SQL scalar functions for enhanced functionality in the PML.
  • Information on the option to log program execution time.
  • An approach to limiting the number of records returned by a Clover report.
  • A technique for adding post-processing actions (deleting a work file) to Clover programs.

These are just a few of the new articles. There are also many others that include troubleshooting and error information for obscure compile and runtime errors.

jQuery UI Autocomplete, JSON and PHP

In case you are not familiar with the term ‘autocomplete,’ it refers to the kind of functionality you get with Google mail when typing a ‘to’ email address, or in Google Suggest.  As you type characters in the search box, it ‘autocompletes’ by providing you a list of matches. The list gets refined the more you type.  We also have  a WebSmart example you can try out live.  Autocomplete widgets can help make your applications more user-friendly, because they make it much easier for users to find items in large sets of data.

We’ve used Autocomplete plugins in a number of our web applications (both for customers and internal use) for some time now. I just stumbled upon the relatively new jQuery UI Autocomplete plugin. There is some good example code at the jQueryUI site.  Another good tutorial on how to use it is this one.

This post explains how to code it for a typical usage. Note that although I am using PHP here, you can accomplish exactly the same thing with PML and DB2 SQL in WebSmart ILE.

Here’s a sample image from a work in progress (new customer log system using jQuery, AJAX, PHP and MySQL). I’ve blurred the customers, as this is real data from our files.

 

 

Let’s look at the code required to implement this. First, the client-code (jQuery and JavaScript).

Client Code

	jQuery("#sercompany").autocomplete({
			minLength: 3,
	 	    delay : 400,
			source: function(request, response) { 

				jQuery.ajax({
				   url: 	 "index.php",
				   data:  {
				   			mode : "ajax",
				   			component : "consearch",
				   			searcharg : "company",
				   			task : "display",
				   			limit : 15,
				   			term : request.term
				   	},
				   dataType: "json",

				   success: function(data) 	{

					 response(data);
				  }	

				})
	 	   },

		   select:  function(e, ui) {
				var keyvalue = ui.item.value;
				alert("Customer number is " + keyvalue); 

			}
		});

The important pieces here are the source property and the select event. The source property really defines 2 key aspects of the autocomplete widget: the source (input) of the data to populate, and how to put it in the autocomplete box (formatting, etc).

First, it defines the source of the data. This can be a local Javascript array – useful for small, relatively static data sets such as State abbreviations. It can also be a string with a value of a URL. The URL will point to a script (see below for example code) that gets invoked via AJAX and returns an array of items. While this may seem the obvious choice for most cases, it’s really not that useful because you have no control over how you format your response data. The third possibility, as shown in the example code above, is an anonymous function. This is the most useful coding pattern. The function accepts two parameters- request and response. Request is an object that has a property called term, whose value is whatever the user types in to search for. So, if the user types ‘AME’, then request.term == ‘AME’. Response is a callback function name that implicitly accepts one parameter, the data to display in the autocomplete results box. This is poorly explained and documented on the jQuery UI site. I only really understood this by reading Dan Wellman’s article. Look at the client code above and you’ll see this line:

  response(data);

That’s a call to the manufactured callback function. You’ll notice, also, that in order to actually do anything, you have to explicitly code the ajax call in the callback function for the source property. This is quite a different coding pattern than what we used with the ‘old’ jQuery autocomplete plugin, but the whole design of this code is so much more elegant and flexible.

The other key piece in the client-side code is the select event. This event is triggered when the user clicks on one of the values in the list. In my example code this just causes an alert box to popup that shows the value of the customer number. The select callback function accepts 2 parameters- the event object (not sure why you’d want that) and the ‘selected item’ object (which I’ve called, by convention, ‘ui’). Note that ui has an object called ‘item’ as one of its properties, which in turn has ‘value’ as a property. Hence: ui.item.value refers to the value of the selected line. You can have other, custom properties besides the 2 standard ones (‘value’ and ‘label’), as shown in this example.

I could not find formal documentation describing ui.item, only example code.

In the real world, the next step would be to do either a redirect or an AJAX call to a script/program that lets me work with my selected customer. I’d likely include the customer key in the url, for example:

  var surl = "index.php?task=edit&custno=" + ui.item.value;
  $.get(surl);
  ...

Next, let’s look at the server code.

Server Code

	$searcharg  = getparm('searcharg');
	$limit = getparm('limit');
	if (!$limit) $limit=10;
	$sercontact = '';
	$sercompny = '';
	$term = getparm('term'); 

	 	$sercompny = strtoupper($term);
		$query = "SELECT  CLCLNU, CLCLNA FROM CS_CLTF WHERE clclna like '%" . trim($sercompny) . "%' order by CLCLNA";  

	$query = $query." LIMIT  $limit";  // Limit results based on the limit parameter from the ajax call. 

	$rows = $db->get_results($query);  // Populate result set
		// While we retrieve a row from the result set:
	$count=0;
	if ($rows)
	{
		foreach($rows as $row)
		{
			$companies[$count] = array("value" => $row->CLCLNU, "label" =>  $row->CLCLNA);
			$count++;
		}
		echo  json_encode($companies);
	}

(FYI I’m using the EZSql library here to do my SQL coding. EZSql is a PHP library that makes coding SQL statements simpler, and supports multiple databases. A comparable library is PDO, part of Zend Frameworks. EZSql is Free and Open Source).

Note the use of json_encode. What this does is produce a JSON-formatted  array of  objects. Each object has a property of “value” (the customer number – key to the customer table) and “label” (customer name- what appears in the autocomplete). Even though I assign these values to an associative array, json_encode treats it like an object when it translates it (which makes sense when you think about it, and is documented on php.net as intended behavior).

To be a little more clear, the returned data from the PHP script to the AJAX callback will look something like this:


[{"value":"3215","label":"COMMUNICATION INC."},
{"value":"1572","label":"ABADOCOMS"},
{"value":"8243","label":"ACME MANUFACTURING COMPANY"},
{"value":"5713","label":"ABCDEFS COMPANIES, INC."},
{"value":"4869","label":"ABERYSTWYTH AVENUE COMPANY"},
{"value":"223","label":"ALLKINDS COMPRESSOR"},
{"value":"3705","label":"MIGHTY INSURANCE COMP"}]

It seems to me this Autocomplete plugin is way better than the jQuery autocomplete plugin I’ve used before, particularly since it uses the jQueryUI CSS framework to style the autocomplete dropdown box. It’s more flexible, you can define the code in one object call instead of two, and it’s more likely to be supported and maintained by the jQueryUI team.

New WebSmart Example Programs and KB Articles

Over the last few weeks we have created several new example programs and KB articles. In other news, we have added a Google KB search [beta] over our web site’s technical content.

New Code Samples
Our latest code samples include:

  • RPG String Capitalizer (PML). Information in database files is often stored in all capitals for simplicity, but it looks awkward if displayed. This example walks you through creating a custom RPG function to properly capitalize string data and then adding it to WebSmart’s PML for easy access.
  • Streaming Data SmartCharts. This example illustrates how to create a dynamically changing SmartChart which displays the status of a rapidly & constantly changing value (for example, the number of visitors currently at your site).
  • Export to Excel from a Report (Clover). Enhance your online reports by allowing access to the greater functionality of a full spreadsheet application. Adding the code from this example will allow you to export a report to Excel directly from the page it’s displayed on.
  • Cool Tabs with jQuery (JavaScript). Organize your page content more coherently with tabs, using this jQuery UI plugin.

Visit myBCDSoftware.com to review all our code samples.

New Knowledge Base Articles
Here are a few of our most recent KB articles:

  • Article 8193. How can I use a PML array field directly in an HTML segment like I do for other fields?
  • Article 8176. How can I modify my APACHE configuration to prevent the browser from caching a page?
  • Article 8111. How can I run debug on VERY large WebSmart definitions?
  • Article 8092. How to create a dropline navigation menu with all levels of content centered.
  • Article 8052. How can I reset my form fields to blank as opposed to their original values?

If in trying to use our KB you have been stymied by the rudimentary search capabilities, you’ll want to try out the new Google KB search which covers KB articles, example programs, update lists and other technical content from our web site.