$(document).ready(function() {
  $("#firstTimeSubmit").click(function(event) {
    event.preventDefault();
    var name = $("#firstTimeText").val();
    if (name == "" || name.length > 12) {
      $("#updates").html("<b>Dummy! Invalid name!</b>");
    } else {
      $.ajax({
        type: "GET",
        url: ".ws?player=" + name,
        success: function() {           
          $.ajax({
            type: "POST",
            url: "includes/handlers/firsttime.php",
            data: { name: name },
            success: function() {
              $("#updates").html("<b>Now tracking: " + name + "</b>");
            },
            error: function() {
              $("#updates").html("<b>Already being tracked.</b>");
            }
          }); 
        },
        error: function() {
          $("#updates").html("<b>Name doesn't exist.</b>"); 
        }               }       
      });
    }
  });
});

Should the $.ajax request inside the other $.ajax request work?

$(document).ready(function() {
  $("#firstTimeSubmit").click(function(event) {
    event.preventDefault();
    var name = $("#firstTimeText").val();
    if (name == "" || name.length > 12) {
      $("#updates").html("<b>Dummy! Invalid name!</b>");
    } else {
      $.ajax({
        type: "GET",
        url: "http://hiscore.runescape./index_lite.ws?player=" + name,
        success: function() {           
          $.ajax({
            type: "POST",
            url: "includes/handlers/firsttime.php",
            data: { name: name },
            success: function() {
              $("#updates").html("<b>Now tracking: " + name + "</b>");
            },
            error: function() {
              $("#updates").html("<b>Already being tracked.</b>");
            }
          }); 
        },
        error: function() {
          $("#updates").html("<b>Name doesn't exist.</b>"); 
        }               }       
      });
    }
  });
});

Should the $.ajax request inside the other $.ajax request work?

• javascript
• jquery

• Please watch the formatting. It helps. – cletus Commented Nov 29, 2009 at 1:18
• I tried. A tab in my editor is equivalent to four spaces, but when I copy and paste to here it's a huge difference.. – Andrew Commented Nov 29, 2009 at 1:43
• 1 Usually with any editor there is an option to use tabs or spaces (for tabs). SO is quite narrow. Please don't use tabs. Two spaces is the standard indenting used here. Any more and things tend to run off the screen too much. – cletus Commented Nov 29, 2009 at 1:57
• To give you an example: I thought you had two error handlers on your inner Ajax call. Well if you scroll right you see the }) at the end of one meaning the second error handler is for the outer Ajax call. Look back at how I formatted the code in the history (click "edited XX mins ago" link) and try to mimic that or something like it. – cletus Commented Nov 29, 2009 at 2:16

2 Answers 2

In principle that can work but your syntax is wrong. You want:

success: function() {
  $.ajax({...});
}

and change:

error: $("#updates").html("<b>Name doesn't exist.</b>");

to:

error: function() {
  $("#updates").html("<b>Name doesn't exist.</b>");
}

What you've done above is assign a jquery object to the success and error attributes (of the anonymous object). That won't work. You need to assign a function that makes those jquery calls. Also change:

data: "name=" + name,

to

data: {
  name: name
},

Otherwise it's one ajax request after another.

What you normally have to watch out for is trying to do too many simultaneous Ajax requests as browsers have (typically fairly low) limits on the number of requests to one domain (eg IE, at least certain versions, has a limit of 2). In your case the requests are consecutive and the success handler for one has nothing special about it preventing another request.

You might want to wrap some of that into a named function just to make the code more readable however.

Organize your code in a read able way. This will help you out greatly while developing. By splitting things up like below you will be able to test things out much easier because you can call things from firebug. It also makes it much easier as thing get more plex as they always do.

Function names are random guesses on what its really doing.

$(document).ready(function() {
    $("#firstTimeSubmit").click(function(event) {
        event.preventDefault();
        var name = $("#firstTimeText").val();
        if(name == "" || name.length > 12) {
            $("#updates").html("<b>Dummy! Invalid name!</b>");
        } else {
            getHighScore(name);
        }
    });     
});

function getHighScore(name){
    $.ajax({
        type: "GET",
        url: "http://hiscore.runescape./index_lite.ws?player=" + name,
        success: function() {
            setUpFirsttime(name);
        },
        error: function() {
            $("#updates").html("<b>Name doesn't exist.</b>"); 
        }
    });
}
function setUpFirsttime(name){
    $.ajax({
        type: "POST",
        url: "includes/handlers/firsttime.php",
        data: { name: name },
        success: function(){
            $("#updates").html("<b>Now tracking: " + name + "</b>");
        },
        error: function(){
            $("#updates").html("<b>Already being tracked.</b>"); 
        }
    }); 
}