Colorbox and jQuery form plugin for attractive interfaces


Lately it seems like it is becoming harder to program an effective user interface without the use of javascript.  I for one must admit I have drank the jQuery kool-aide.  I was working on a site for a client and needed a way for the users to change their password.  The site in question also makes extensive use of the Colorbox jQuery plugin and I know that Colorbox can display inline HTML so I thought this would be a good chance to check it out.  It will be aesthetically pleasing and it would be one less page I would have to write, I could just add the code to my current member page.

First after including the appropriate scripts we just need to setup some basic HTML and write the jQuery code to control it all.

Some content<br />
<a href="#">show box</a>
<div style="visibility: hidden;">
<div id='password_change' style="padding:10px; background:#fff;">
<strong>Change your password</strong><br /><br />
<form id="password_reset" action="ajaxProxy.cfc" method="post">
<input type="hidden" name="Method" value="updatePassword"  />
Password: <br />
<input type="password" name="password1" />
<br />
<br />
Verify Password: <br />
<input type="password" name="password2" />
<br />
<input type="submit" value="Update" />
</form>
<div id="formStatus"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#password_reset').ajaxForm({
success: showResponse,
clearForm: 'true'
});
function showResponse(responseText, statusText)  {
$('#password_reset').hide();
$('#formStatus').html(responseText);
};
$().bind('cbox_open', function(){
$('#password_reset').show();
$('#formStatus').html('');
});
$(".inline").colorbox({width:"300px", height:"250px", inline:true, href:"#password_change"});
});
</script>

That is basically all that is required.  The inline content that will be displayed in Colorbox is in the hidden div.  Basically the jQuery block is setting it up to post the form as an ajax form (using the jQuery form plugin).  The only thing out of the ordinary going on here is binding to the Colorbox open event.   I did this because the form may or may not be displayed.  If the user has tried to set the password before he will only see a message letting him know whether the password was changed or not.  I am just forcing the form to display when the box is opened.

Here is the code for “verifying” the password:

<cfcomponent output="no">
  <cffunction name="updatePassword" access="remote" output="no" returntype="string" returnformat="plain">

    <cfset var ret = "" />
    <cfscript>
       if(password1 is password2){
	ret = 'Password updated.';
       } else {
	ret = 'Passwords did not match';
       }

      return ret;
    </cfscript>

  </cffunction>
</cfcomponent>

If you would like to see it in action you can find it here: http://www.kisdigital.com/tests/colorbox/

Uses Colorbox and jQuery form plugin.

Advertisements

About Robert Zehnder

Web application developer specializing in ColdFusion/Railo and Open Source development.

Posted on November 30, 2009, in ColdFusion, jQuery. Bookmark the permalink. 9 Comments.

  1. thanks man .. i found some visits from your blog to my blog !

  2. Nice stuff. I don´t undestand where to put the code for verifying the passwort. I would like to use it for a contact form. I am using

    http://cssrevolt.com/upload/files/protoformclass/

    and Colorbox. I don´t get this thing work. Could you help?

    thanks in advance.

    • My demo is also making use of the jQuery form plugin for posting the form via AJAX. Are you using this as well? How you process the form posted data is largely dependent on your server architecture. If you are using ColdFusion this should work as posted. If you are using another server-side scripting language, I will not be much help.

      Let me know specifically what you are having problems with and I will do my best to help.

  3. The cbox_open part is not hiding my response and showing my form. What could be wrong?

  4. Just a heads up – the demo is down 😦

  5. Nice Collection…. !! Thank …you…………..

  1. Pingback: 2010 in review « KISDigital Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: