jQuery does NOT work without no-conflict enabled

[Presto-X]

I'm using some jQuery to see if a username is already in used, it calls a php file.  If no-conflict is disabled the script does not work, I will be the first to say it I have no clue what I'm doing lol my background is PHP, I just started learning jQuery, please take a look at my code and tell me what I'm doing wrong here, thanks guys.

 

$(document).ready(function() {
var box1 = $('usernameStatus');
var cun1 = document.getElementById('username1');
$(cun1).addEvent("blur",function(){
	if ( $(cun1).value.length > 0 ){
		var url1="index.php?option=com_conferencesystem&format=raw&view=checkavailability&username="+$(cun1).value;
		box1.style.display="block";
		box1.set('html','Checking username availability...');
		var a1 = new Request.JSON({
			url:url1,
			onComplete: function(response){
				if(response.msg == "true"){
					box1.set('html', '<span class="ajaxStatus_available">' + response.html + '</span>');
					cun1.setAttribute("class", "inputbox textfieldValidState");
				}else{
					box1.set('html', '<span class="ajaxStatus_unavailable">' + response.html + '</span>');
					cun1.setAttribute("class", "inputbox textfieldRequiredState");
				}
			}
		});
		a1.get();
	}
});
});

[haku]

In jQuery, you use the $ symbol. This is an alias for (ie. it does the same thing as) the actual jQuery object, which is written: jQuery. So usually you could use either 'jQuery' or '$', and both would work. But after setting no conflict, only the former works.

 

You have to options. Change all of your $ to jQuery, or wrap everything in an anonymous function as follows:

 

(function($)
{
  $(document).ready(function() {
    // Do everything here
  });
}(jQuery));

 

In the above, the $ symbol only exists as an alias of jQuery inside this anonymous function, and overrides the $ symbol in any other library, and since it is only inside this function, does not mess with the meaning in those other libraries. I use the above method for everything, as it keeps everything encapsulated, and generally prevents other scripts from failing if mine does and often vice-versa as well.

[Presto-X]

Thanks for the reply Jay,

 

I was able to get the script working, I used the developer tools within Chrome to help me bug test my script, it looked like some of the code was for MooTools.  I looked up the correct functions for jQuery and was able to get the script rewritten, I also had the same function 5 times on the page for each of the types of fields that I was using, so I was also able to make just one function, but made it a bit more flexible so I only needed one function in place of 5 wahoo lol.

 

Maybe this will help someone else down the road, here is my working jQuery Username / email availability checker function.

$(document).ready(function() {

// Check Value Availability, i.e. used for check for usernames, email addresses etc.
function checkAvailability(field, div, type){ 
	var message = $(div);
	var input = $(field);
	$(input).blur(function() {
		if ( $(input).val().length > 0 ){
			var value = encodeURIComponent( $(input).val() );
			var url = 'index.php?option=com_conferencesystem&format=raw&view=checkavailability&' + type + '=' + value;
			message.css('display','block');
			message.html('Checking username availability...');
			var req = new Request.JSON({
				url:url,
				onComplete: function(response){
					if(response.msg == "true"){
						message.html('<span class="ajaxStatus_available">' + response.html + '</span>');
						input.attr('class', 'inputbox textfieldValidState');
					}else{
						message.html('<span class="ajaxStatus_unavailable">' + response.html + '</span>');
						input.attr('class', 'inputbox textfieldRequiredState');
					}
				}
			});
			req.get();
		}
	});
}

// Check for individual fields availability
$('#username1').blur( checkAvailability('#username1', '#usernameStatus', 'username') );

});