This is the second post of the Jquery plugin Selection series. If you didn’t read the others, take a look at this page.

Jquery for the one who don’t know it (probably not a lot), as described on its homepage, is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

So today, i’m going to write about the Jquery Form Plugin, that you can find on the malsup.com website. Well, the description from the plugin’s website is clear: The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!.

This is all you need to know! In a shorter version, you want to save a data from a form without reloading the page, then use Jform. How does it work:

1. Go on the the Jquery Form Plugin, download the file on the repository: http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js

2. Add this line before your </head>:

<script src="jquery.form.js" type="text/javascript" charset="utf-8"></script>

3. Now add a simple form to your page. Nothing complicated:

<form id="myForm" action="comment.php" method="post">
    Name: <input name="name" type="text" />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="Submit Comment" />
</form>

4.And finally our Jquery code:

<script type="text/javascript">
        $(document).ready(function() {
            $('#myForm').ajaxForm(function() {
                alert("Thank you for your comment!");
            });
        });
</script>

Time to explain the code. Like with all our jquery scripts, we start with $(document).ready(function() {. $(â€�#myformâ€�).ajaxForm(); will apply the « ajaxForm » plugin on our form with the “#myform“ id. The alert() in our function allows us to display a message after submitting.*

You can use this plugin just like that. But here are some useful options. If you want to use them, modify your $(‘#myForm’).ajaxForm(function(){ …. }); to:

var options = { 
        target:        '#output1',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 

        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 

    $('#myForm').ajaxForm(options);

The beforeSubmit and succes options are useful to verify and validate the script, and then diplay data. The url option will be useful if you want to redirect your datas to another file when the javascript is enabled. The clearForm and resetForm options are clear. And one last thing, if you want to use some options of the $.ajax , you can.

There is a lot of others great plugin for forms. If you want more informations about them, just make a little search on the jquery plugin repository. I’m waiting for your comments !

I would like to start a new category. In this one, i will give you my jquery’s plugin selection.

Jquery for the one who don’t know it (probably not a lot), as described on its homepage, is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

I’m using it a lot (who said too much?) in the OpenCV manager development. And i will probably use it in my next project because of it’s simplicity to use.

Jquery’s plugins allow you to even more in a simple line of code. You probably will just have to unarchive the content of the archive of a plugin and add 2 or 3 lines of code in your source code, and the job will be done.

The first one i’m going to present you is the Jeditable plugin, developed by Mika Tuupola.

In normal conditions, when you want your users being able to modify an information, you add a form in your page, even if you just have a single field to modify.
With Jeditable, a user just has to click on a text in a webpage, the text changes in a form, and after submitting, the form is back to a normal text.

You maybe want to say that it can’t be as simple. It is.

This is a little example of working code, sort of « how to use »:

1. Go on the the Jeditable homepage, download the lastest source, minified or packed

2. Add this line before your </head>:

<script src="jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>

3. Add a simple class to your div (nothing really hard no?), and remember you id (he’s important too):

<div id="mydiv" class="edit">I want to modify it!!</div>

4. And now the jquery time!

$(document).ready(function() {
     $(".edit").editable("http://www.mysite.com/save.php");
 });

Some explications: to start a jquery script, we start with $(document).ready(function() {. Then with $(« .edit »).editable(); , we just say to jquery, i want to use the « editable » plugin on the div with a class named « .edit« . One last thing, the link in the editable() function. It’s the file where the form’s data will be posted.
By example, your php file will use the $_POST['mydiv']; variable to use the changed data. By default, the id of your data will be, you understand now, the ID of your div.

That’s it, your script is finished.

But don’t run so fast. Jeditable has some great options! Take a look at these:

$(".edit").editable("http://www.mysite.com/save.php", {
         cancel    : 'Cancel', // change the text on the cancel button
         submit    : 'OK', // same thing for the submit button
         indicator : "", // here you  can change the image indicator
         tooltip   : 'Click to edit...' // and finally the tooltip, to inform users of what they should do...
     });

It should be easy for you now to use this great plugin. There is still tons of way to use it, so to learn more about it, go on the Jeditable homepage and checkout all the demos!

Now that OpenCV Manager is running (i’m still waiting for comments about it!), i’m think about the index page.
I would like to implement a wordpress like interface, using widget and an admin panel to manage them.

The admin could drag and drop existing widget (like one displaying the lastest job on a Jobberbase install, the last resume added or a RSS feed) or new one using Google/Yahoo widget and hand-made.

I’m going to use Jquery like for the rest of the app.
If someone has an idea, feel free to make a comment !

Just a little post to share with you a modification i’ve made of the Pass Meter Jquery Plugin.

Initially, when you use the plugin, the strength meter appears in the password input.

Now you can use it outside the input easily, just add the outsideElt option:

var options = {outsideElt = '#myelt'};
$('input#mypassword').attachPassMeter(options);

where #myelt could be the class of your element or the id.

• On the jquery plugin repository: http://plugins.jquery.com/project/KunePassMeter
• The dedicated page: http://opencv.kune.fr/jquery-plugins
• The original project: http://plugins.jquery.com/project/passmeter