Gossamer Forum: Products: Others: Gossamer Community: [TIP] Cool AJAX username checker (on signup page) (Andy)

Hi,

I've been wanting to do this feature for a while, and seeing as I'm playing around with AJAX now - I thought I'd have a go :)

This lets you setup your signup page so that when they have entered their username (and move onto the next field), it will automatically check if the username is available... as in these example images:

Shows them that its checking...

Shows that the username is available

Shows that the username is not available

For this hack, you need a few files.

1) http://docs.jquery.com/...uery#Download_jQuery - save as jquery.js, and put somewhere on your server (where it can be read)
2) The script attached - called ajax.cgi (upload to your community folder, CHMOD to 755.
3) The indicator.gif image (upload to the same folder as where you have jquery ideally)

In ajax.cgi, be sure to set these lines:

Code:
    use lib '';

..should look something like:

Code:
    use lib '/home/domain/public_html/cgi-bin/community/private_data/lib';

..and

Code:
    Community::init(');

..should be something like:

Code:
    Community::init('/home/domain/public_html/cgi-bin/community/private_data');

Then, in user_signup.html - add the following before the </head> bit:

Code:
<script type="text/javascript" src="/static/jquery.js"></script> 


<script type="text/javascript"> 

jQuery(document).ready(function() { 
	jQuery('#usernameLoading').hide(); 
	jQuery('#Username').blur(function(){ 

	  jQuery('#usernameLoading').show(); 
      jQuery.post("ajax.cgi", { 
        username: jQuery('#Username').val() 
      }, function(response){ 
        jQuery('#usernameResult').fadeOut(); 
        setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400); 
      }); 
    	return false; 
	}); 
}); 

function finishAjax(id, response) { 
  jQuery('#usernameLoading').hide(); 
  jQuery('#'+id).html(unescape(response)); 
  jQuery('#'+id).fadeIn(); 
} //finishAjax 
</script>

Be sure to change the bit in red to match the path of where you jquery.js script is

Then find:

Code:
<input type="text" id="Username" name="comm_username" maxlength="255" size="35" value="<%if comm_username%><%comm_username%><%endif%>" style="text" />

..and add these lines below it:

Code:
							<span id="usernameLoading"><img src="http://www.domain.com/static/indicator.gif" alt="Ajax Indicator" /></span> 
							<span id="usernameResult"></span>

Be sure to edit the URL to indicator.gif though (the bit in red)

That should be it - lemme know how any of you find it Cool

Cheers

Andy (mod)
andy@ultranerds.co.uk

Subject	Author	Views	Date
[TIP] Cool AJAX username checker (on signup page)	Andy	11814	Dec 17, 2009, 2:14 AM

Re: [Andy] [TIP] Cool AJAX username checker (on signup page)	VishalT	11636	Dec 17, 2009, 7:06 AM

Re: [SWDevil.Com] [TIP] Cool AJAX username checker (on signup page)	Andy	11637	Dec 17, 2009, 7:16 AM

Re: [Andy] [TIP] Cool AJAX username checker (on signup page)	VishalT	11674	Dec 17, 2009, 7:28 AM

Re: [SWDevil.Com] [TIP] Cool AJAX username checker (on signup page)	Andy	11629	Dec 17, 2009, 7:31 AM

Re: [SWDevil.Com] [TIP] Cool AJAX username checker (on signup page)	Andy	11645	Dec 17, 2009, 8:01 AM

Re: [Andy] [TIP] Cool AJAX username checker (on signup page)	MJ_	9961	Nov 24, 2011, 3:59 AM

Re: [MJ_] [TIP] Cool AJAX username checker (on signup page)	MJ_	9938	Nov 24, 2011, 4:20 AM

Re: [MJ_] [TIP] Cool AJAX username checker (on signup page)	Andy	9943	Nov 24, 2011, 5:26 AM

[TIP] Cool AJAX username checker (on signup page)

Last edited by:

Tags:

Attached Files: