JavaScript Scriptlet

JavaScript  Scriptlet :

I have written this pluggin which helps in generating the HTML dynamically using scriptlets (similar to JSP sciplets). You can easily try it out by refering demo.html

-demo.html creates a simple table whose content is obtained dynamically using for loop within scriplets. To play around just refer below line and alter accordingly.

Scriptlet.generateHtml ( template, object);

The above function takes 2 arguments, template and object.

1. Template : String with or without scriplets block ( the dynamic content  between <% and %>). In demo.html that argument is sent by document.getElementById("tmpl").innerHTML
2. Object : This object is used as the scope object i.e.  properties of this object are available as local variables inside the scriplets. If this argument is not passed then window object is taken by default.

This function returns a string which is the output of processing the template string along with dynamic content from scriplets.

In demo.html, the return string is applied as innerHTML to an element in the body and table is displayed.

Just try out different use cases please share your feedback.

Form Management

FormManager is a tool to easily map an object to form and form to object. There are only two interface one is fillForm and other is getForm.

It is very time consuming to write code to read/write form field one by one then create a JSON object. But this form manager do every thing just by calling two method

fillForm: takes object as arguments and convert its leaves path as string then search into form for field with same name. after finding the field it change the value of fields. for example if object is { x:{x-child:{child:"xyz"}}} fillForm will convert this object as "x.x-child.child" and search inside the for for the field with name "x.x-child.child".
To call fillForm use $("form#myform").fillForm( myObj );

getForm: takes no argument. It simply reads each fields inside form and use its name to generate a JSON object.
To call getForm use myObj = $("form#myform").fillForm( );

obj = {
                   x : [ "x1", "x2", "x3"],
                   y:{ 
                      y1 : "y1", 
                      y2 : { 
                             y21 : "y21",
                             y22 : "y22"
                            }
                     }
                 };
           to map this object int form use
           $("form").fillForm(obj);
           name of the form fields should be according 
          to object for above case it would be.
 
      <form>
          <input name="x.0" type="text" />
          <input name="x.1" type="text" />
          <input name="x.2" type="text" />
          <input name="y.y1" type="text" />
          <input name="y.y2.y21" type="text" />
          <input name="y.y2.y22" type="text" />
     </form>
   

      and to map object from form 
       use $("form").getForm ();

JavaScript File Management