Using Low Pro and jQuery

What is Low Pro?

So what is Low Pro? This is a plugin that allows you to make JavaScript more object-oriented through the delegation of events. The jQuery architecture of plug-ins allows simple extension of kernel functionality. Previously, there was no easy way to create a macro that would create several types of events per element. But this time has come!

Probably the easiest way to explain how Low Pro works is to create a quick demonstration. Sometimes I find that many of the strangers suggest having a previous acquaintance with the technology, knowing this, I will try to make the splint as simple as possible. However, this example uses several other plugins that are not covered in this tutorial:

• Live Query - Low Pro uses this plugin to facilitate communication with dynamic DOM elements.
• jQuery Validation - We will use this plugin to show how to associate other plugin functions with events.

Both plug-ins have excellent documentation, therefore, if you want to extend the basic example, read it.

Example # 1: Creating a reusable registration form.

For this examples, we will create a simple registration form. Despite its simple appearance, it can be used in many places with small, if required, modifications. Hopefully, after disassembling this template, you will see many other applications that can be reused in the same style.

Our first step is to create a simple form:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN"
" Www.w3.org/TR/html4/strict.dtd ">
< html >
< head >
< meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1 " / >
< title > Lowpro Example < / title >
< script type = "text / javascript" src = "js / jquery.js" / >
< script type = "text / javascript" src = "js / jquery.livequery.js" / >
< script type = "text / javascript" src = "js / lowpro.jquery.js" / >
< script type = "text / javascript" src = "js / jquery.validate.js" / >
< script type = "text / javascript" src = "js / reg-form.js" / >
< / head >
< body > < / p >
< div id = "form-container" >
< form method = "post" action = "." id = "lowpro-form" >
< fieldset >
< legend > User Details < / legend > < / p >
< ul >
< li >
< label for = "username" > Username < / label > < / p >
< input type = "text" id = "username" name = "username" / >
< / li >
< li >
< label for = "email" > Email < / label > < / p >
< input type = "text" id = "email" name = "email" / >
< / li >
< li >
< label for = "password1" > Password < / label > < / p >
< input type = "password" id = "password1" name = "password1" / >
< / li >
< li >
< label for = "username" > Password (Again) < / label > < / p >
< input type = "password" id = "password2" name = "password2" / >
< / li >
< / ul >
< input type = "submit" class = "register" value = "Register" / >
< / fieldset >
< / form >
< / p > < / div >
< p > < / body >
< / html >

Now we will create our javascript, call it reg-form.js. In it we will create a class that we attach to the form. Inside this class, we will create functions that trigger events. Each class created using Low Pro takes the form $ .klass ({...}) ;. Inside the curly braces, we use the nature of JavaScript prototypes to create pseudo-classes. We will call our example RegisterForm

RegisterForm = $. klass ( {
initialize : function ( options ) { </ p >
< p > }
} ) ;

If you have developed using PHP, Python, or Java, you've probably already seen this. This first function, initialize, is a reserved function in Low Pro, which accepts one parameter (we will discuss it later). This function is always called when associating a class with an element. Since it does not require any event initiation, it is very convenient to set data for initialization or an event for dynamic DOM elements.
')

Validation

The first thing we need to do is create our JavaScript validation rules. This splint does not cover the creation of these rules, however, they should be clear. If you want more information, read the excellent documentation .

RegisterForm = $. klass ( {
initialize : function ( options ) {
this . element . validate ( {
rules : {
username : {
required : true
minlength : 4
} ,
email : {
required : true
email : true
} ,
password2 : {
equalTo : "# password1"
}
} ,
messages : {
username : {
required : 'Your username is required' ,
minlength : 'The minimum number of characters is 4'
} ,
email : {
required : 'You must enter your email' ,
email : 'You must enter a valid email'
} ,
password2 : {
equalTo : 'Your passwords must match'
}
}
} ) ;
}
} ) ;

Notice that I use this.element as opposed to $ ('# lowpro-form') inside the function. Low Pro provides this convenient nickname and you always work with the right object. If you are going to write a complex function, it is best within the function, assign this.element to another variable.

Now the code does nothing. That's because we have to bind the class to the form. That's where we should go back to the good old jQuery that we know and love. Place this file in the file below:

$ ( document ) . ready ( function ( ) {
$ ( '# lowpro-form' ) . attach ( RegisterForm ) ;
} ) ;

And so, we open the page in the browser and start filling out the fields. You should already notice the work of field validation rules. Congratulations, you just wrote your first reusable class with Low Pro!

Improvements

Now that we have validation rules, let's begin to make the form more attractive. For a start, something simple. Let's make sure that the first field (username) is always active first and the user can easily switch using Tab.

$ ( '#username' ) . focus ( ) ;

Refresh the page and now your username field should receive focus.

Let's add some pepper - another event. When the user submits the form, we want the user to know that the data is being sent to the server. To do this, we will notify the user by changing the text to the buttons from “Register” to “Submiting”.

RegisterForm = $. klass ( {
initialize : function ( options ) {
...
} ,
onsubmit : function ( ) {
$ form = this . element ;
$ ( '.register' ) . val ( 'Submitting' ) ;
/ * If your using Ajax it goes in here * /
return false ;
}
} ) ;

So we have: Reusable, full-featured Ajax registration form with validation. You can watch the demo .

And finally, the parameters of the initialization function. While connecting the Low Pro class, the initialization function accepts an object containing any data that needs to be passed to the function.

$ ( '#myform' ) . attach ( MyFunction , { foo : 'moo' , bar : 2 }

In our example above, we added a tag to display the message of the day. In HTML, create a div with the motd class. Next, add the following code to the initialization function:

if ( options. motd ) {
$ ( '.motd' ) . text ( options. motd ) ;
}

Now that we have attached our class to the form, we use the following:

$ ( document ) . ready ( function ( ) {
$ ( '# lowpro-form' ) . attach ( RegisterForm , { motd : 'jQuery Rocks!' } ) ;
} ) ;

Now when you update the form, you should see a message on the screen.