I’m actually working on the translation system. I’m preparing the english version, but there will probably be some mistakes to correct. So i count on you to help me translate the app!

To see the actual version of the translation, feel free to go on the new demonstration page, or on the new wiki of opencv manager.

And as always, the forum is THE place to discuss about OpenCV manager!

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 !

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!

v0.2 – Little Fixes

• Profile
  • New tab for the Ziki and LinkedIn profile
  • Regenerate a password
  • Add a picture to your CV – edit of the 07.10.2008
• WIADN
  • RSS Feed
• Geolocalisation – User’s map

And if i have the time, i will add the resume export to word and txt format.

One thing important is that i will release an english version for non-french speakers.

Want something else ?

Here you can find the database.sql file to install … the database , or download the new

• The database file
• The new correct release

Please, understand that the app is in early alpha stage and is not actually really stable.
There are probably bugs, but with your help, the development will be faster!

One note on the translations. As i said on the forum, the app is actually in french. Now that a first version of the app is released, i’m going to work on the translation system.

I hope you will like it !

Remember, the forum’s url is http://opencvmanager.kune.fr/community

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 !

If you find news bugs (yes, you will …), tell me about it on the forum: http://opencvmanager.kune.fr/forum and I will try to fix it as soon as i can.

Oh and by the way, this little baby is now on twitter too: http://twitter.com/opencv

Hey people !!!

Just to get you in touch with the news about the project
You want to try it ? Now you can !!! But, as i said in a post, i’m going to host the first alpha release. You can log in at http://opencvmanager.kune.fr/demo/register.php
If you find a bug, explain me what you were doing and i will fix it.

Remember that the app isn’t actually compatible with IE. I’m working on it, there are just some code to change.

If you want to see the demo page: http://opencvmanager.kune.fr/demo

Thanks a lot !