Differences

This shows you the differences between two versions of the page.

--- dreamapps_and_jquery [2012/10/22 00:53]
+++ dreamapps_and_jquery [2012/10/22 00:53] (current)
@@ Line 1: / Line 1: @@
+======DreamApps & jQuery======
+[[http://en.wikipedia.org/wiki/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.\\  [[http://jquery.com/|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 [[http://jqueryui.com/demos/draggable/|Darggable]]\\
+We need more implementation like  [[http://jqueryui.com/demos/autocomplete/|Auto Complete]] and [[http://api.jquery.com/category/ajax/ |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 <code>xcodedumloc display(hide) attrib(local)</code> then populate it with result-set returned by a query in valid block:
+<file>
+  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
+</file>
+<file>
+  <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>
+</file>
+  * 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.
+<file>
+  <script>
+    <LINK REL="STYLESHEET" TYPE="text/css" HREF="chtml/mycustomfolder/mythemename/jquery-ui-1.8.23.custom.css" >
+  </script>
+</file>
+The image below illustrates the scenario: user starts to type "cash" as soon as "ca" is written, a matching list of data is shown.:
+{{ :autocomplete.png?direct&600 |}}
+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.

DreamApps Wiki

User Tools

Site Tools

Differences

Page Tools