jQuery Question

[TechBoyJK]

Hi Guys,

I'm trying to wrap my mind around javascript and using jQuery for ajax. I'm building an example form (just a button for now) using a few remote functions I wrote that return json results.

#apiSubmit is the submit button id
#applyform is the form div id
#popUpDiv is the "waiting to process" div

When someone clicks the 'apiSubmit' button, jquery will send a getJSON request to a function that checks if thier userID is on a list. It will return {error:0} if successful and {error:"entry exists"} if there's a match. If there's an error, it does a basic javascript 'alert' displaying the json results error value ie "entry exists". The nature of the script I'm building this example from is doing the request to make sure a userID isn't in a table, that's why it's an error if it's there. If it's successful (no id match), then it fires off another getJson method adding that userID to the list. Same deal on error results. {error:0} if successful and {error:"entry exists"} I know the previous method already checked if the entry exists but I think it's reasonable to throw the error again if the actual insert throws an error. In more complex scripts I'd be more likely to do this.

Everything works up to the if/then statement. If I comment it out it fires off the first JSON method. Can someone look at my if/then statement and tell me how to get the syntax right? Logically I think it's right. Hopefully someone can deduct what I'm trying to do and note the corrections? If I can see how this basic script is put together, I think I'll be ok. I have scripting experience in other languages but I haven't used jquery much.

*This is contained within a CFML markup document, so hashtags need to be escaped using double ##, stuff within hash tags are cfml variables.

$("##apiSubmit").click(function(){

   $("##applyForm").toggle();
   $("##popUpDiv").fadeIn(1000);

   $.getJSON("http://myco.net/com.cfc?method=checkUser&userID="+ #session.myID#, function(checkUserResults){} );

   if (checkUserResults.error != '0') {
      alert(checkUserResults.error);
   }

   else {

      $.getJSON("http://myco.net/com.cfc?method=createUser&userID="+ #userID#,function(createUserResults){});

      if (createUserResults.error != '0') {
         alert(createUserResults.error);
         $("##applyForm").toggle();
      }
      
      else {
         $("##popUpDiv").fadeOut(1000);
      }

   }
});

 

[Woosta]

Put your if/else inside the callback,


$.getJSON("http://myco.net/com.cfc?method=checkUser&userID="+ #session.myID#, function(checkUserResults){} );

Whatever function you specify to $.getJSON, that is what gets called after the request has been made. The if/else gets parsed before that. Throw everything into that callback, so basically nest it.

This is because the request is asynchronous, aka not synchronous, so the if/else doesn't wait for it to happen. The other solution is to make it synchronous, but that kinda defeats the purpose of "ajax".

 

[jsedlak]

What Woosta said.

AJAX is just "asynchronouse javascript and xml" by the way. The getJSON method (terrible method name btw) will return immediately with the request object, not the response from the server (which is handled via a callback).

 

[DannyBoy]

As has been noted you need to move your conditions into the callback:

  $.getJSON("http://myco.net/com.cfc?method=checkUser&userID="+ #session.myID#, function( data, textStatus ){
      // This is your callback scope

      if( checkUserThingy.error ) { 
            // Do something
      }

   });

Alternatively you can define your callback function somewhere else and reference it in your call to $.getJSON

// Callback function
var myCallback = function( data, textStatus, xhrObj ) {
   // Condition
   if ( checkUserThingy.error ) {
      // Do something
   }
}

// Call $.getJSON
$.getJSON("http://myco.net/com.cfc?method=checkUser&userID="+ #session.myID#, myCallback );