DreamApps & jQuery

Jquery is a compilation of javascript functions to make scripting easy for the developer. JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
JQuery library is a simple javascript .js file with built-in functions containing all of its common DOM, event, effects, and Ajax functions.

DreamApps produces HTML files as output, and javascript is often used to access and manipulate the DOM elements. JQuery can help a great deal to improve dynamic looks and feels and other functionality like ajax.
DreamApps has JQuery implementation. A great example is cayard.page. HTML element like text boxes are made Darggable
We need more implementation like Auto Complete and Ajax. Ajax can fetch data asynchronously without refreshing the screen. Say Account code is entered by the user, Account description can be shown without refreshing the screen through asynchronous HTTP (Ajax) request.

Here is an example

AutoComplete - when user starts typing something in text box, a list of matching data is shown into a <div> element. Autocomplete is now successfully implemented in DreamApps. It involves 2 to 3 steps:

Add a local, hidden field in the form. Populate that with query string in preconfig section. Like: in Form-object section
```
xcodedumloc display(hide) attrib(local)
```
then populate it with result-set returned by a query in valid block:

 
  valid valid
    preconfig			
      str sql="select xcode from  xcodes where xtype='Employee Location'"  			
			set myarr =#sqllist(sql)
		end preconfig

    config		
      set xcodealtloc = myarr
    end config
  end valid

  <script language="javascript" type="text/javascript">
    $(function() {
      document.one.xcode.id="tags";//Assign id to the field you want to bind autocomplete with. id can be any name					
      var detval = document.one.xcodealtloc.value;
      var detvalarr = detval.split(',');//Converting string var to a array	
			
      $( "#tags" ).autocomplete({ //making the field autocompletable with id "tags"
	source: detvalarr	//	Binding the data source		
      });				
    });	
  </script>

This step is optional. DreamApps comes loaded with a default theme. However, if you want to override the theme or add a custom theme, download the css folder implementing the theme in the appropriate custom folder in chtml and add the following entry, for instance, in the script block.

        
  <script>
    <LINK REL="STYLESHEET" TYPE="text/css" HREF="chtml/mycustomfolder/mythemename/jquery-ui-1.8.23.custom.css" >
  </script>

The image below illustrates the scenario: user starts to type “cash” as soon as “ca” is written, a matching list of data is shown.:

Now we have only one problem that is Formatting the Result pane/div. You may refer to this url

http://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results

and work out a nice solution.