Jump to content

Problems With Jquery Ajax Function


chibineku
 Share

Recommended Posts

I am in the early stages of implementing a basic form-nicety whereby when you try to register or change your details, if the e-mail address/username you've chosen is taken, a little cross appears next to the form field onblur, and if it's okay a tick appears. Then, for the confirm field, the same happens, but also there is a comparison made to see if the confirm* field matches the first field.So far I have this:

  $('#formS form fieldset > input').blur(function() {	if($(this).is('#formS form fieldset > input[id*=mail]')) {	  $.post('checkemail.php5', {'email':$(this).val()}, function(data) {		if(data == 'free') {		  $(this).append('<img style="width: 16px; height: 16px; margin-right:-16px; display: none;" src="/images/greentick.png" id="markeremail" />');		} else if(data == 'taken') {		  $(this).append('<img style="width: 16px; height: 16px; margin-right:-16px; display: none;" src="/images/redcross.png" id="markeremail" />');		}		});		}		});

However, it doesn't work because, I think, the ajax callback function cannot pass $(this) as a parameter and it doesn't seem to know what 'this' is. If I alert(this), I get: [object Object], so at least it isn't empty. The error I get in firebug is:(this[0].ownerDocument || this[0]).createDocumentFragment is not a functionvar fragment = (this[0].ownerDocument || this[0]).createDocumentFragment(),\nI am pretty confident of the dom node creation/insertion statements, which is why I guess it must be a problem with $(this). I have checked the headers and the ajax call and response are as they should be. Anybody have any thoughts?

Link to comment
Share on other sites

bizzump fo' shizzle

Link to comment
Share on other sites

Firebug doesn't seem to recognize $ let alone $(this). Like I said in the OP, alert(this) gives [object Object], so it does seem to survive in some form to the ajax function.

Link to comment
Share on other sites

Oh yeah, I forgot about that already. Same as when I alert it: [object Object]. Not more details than that.

Link to comment
Share on other sites

You should see the object appear on the console, you should be able to click on the object to look at it in the DOM and inspect it. I don't know where you're putting that, but it goes in your code wherever you want to inspect the object, e.g.:

  $('#formS form fieldset > input').blur(function() {	if($(this).is('#formS form fieldset > input[id*=mail]')) {	  $.post('checkemail.php5', {'email':$(this).val()}, function(data) {		console.log(this);

Link to comment
Share on other sites

Oh I see - sorry, I'm slow on the uptake today, and still not fully familiar with Firebug's functions.It appears that $(this) refers to the ajax $.post object itself. I think the new strategy is to create and prepend the img element in the blur event handler before the ajax call and change the img src depending on the response from checkemail.php5. Though I still have the problem of trying to refer to the appropriate element. Oh, duh: I'll just hold the response data in a variable and continue after the ajax function, where $(this) still refers to the event.target. That should work, but I sha'n't hesitate to come pleading for more help should it fail. Ty!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...