I'm using an ajax request to retrieve a text string from the server. I've tried to use .load() but the problem is that it injects the text into the page before running my callback function (which simply displays the text letter by letter).

So, to alleviate this, I've moved to .ajax() and used my function in the success callback. This works as far as displaying the text letter by letter.

Here's my issue. When there are no more strings from the server, the site is supposed to redirect you to another page. This is exactly what happens when using .load().

However, when using .ajax(), the raw HTML from the server is injected into the current page and isn't properly rendered.

I'm not sure how to fix this and I've searched the web for quite some time now. Here is the code for each method.

.load() method (no letter by letter callback)

$('#nextButton').click(function(){
  $('#thonow').load('next.php');  
});

.ajax() method (with letter by letter callback)

$('#nextButton').click(function(){
  $.ajax({
    url: 'next.php',
    dataType: 'text',
    success: function(result) {
        $('#thonow').html("");
        lbyl('#thonow',result,0,50);
      }
   });
});

And just in case you need the lbyl function...

var lbyl = function (target, message, index, interval) {
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () {
        lbyl(target, message, index, interval);
    }, interval);
  }
};

Any assistance would greatly be appreciated.

I'm using an ajax request to retrieve a text string from the server. I've tried to use .load() but the problem is that it injects the text into the page before running my callback function (which simply displays the text letter by letter).

So, to alleviate this, I've moved to .ajax() and used my function in the success callback. This works as far as displaying the text letter by letter.

Here's my issue. When there are no more strings from the server, the site is supposed to redirect you to another page. This is exactly what happens when using .load().

However, when using .ajax(), the raw HTML from the server is injected into the current page and isn't properly rendered.

I'm not sure how to fix this and I've searched the web for quite some time now. Here is the code for each method.

.load() method (no letter by letter callback)

$('#nextButton').click(function(){
  $('#thonow').load('next.php');  
});

.ajax() method (with letter by letter callback)

$('#nextButton').click(function(){
  $.ajax({
    url: 'next.php',
    dataType: 'text',
    success: function(result) {
        $('#thonow').html("");
        lbyl('#thonow',result,0,50);
      }
   });
});

And just in case you need the lbyl function...

var lbyl = function (target, message, index, interval) {
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () {
        lbyl(target, message, index, interval);
    }, interval);
  }
};

Any assistance would greatly be appreciated.

• javascript
• php
• jquery
• ajax

• 1 The .load() function is just a convenience front-end to $.ajax(). – Pointy Commented Mar 22, 2015 at 22:47
• Yes, I understand, but what are the underlying settings? In other words, what do I need to do in my .ajax() function so that the last request redirects to a page instead of injecting raw HTML? – MikelG Commented Mar 22, 2015 at 22:49
• @MikelG: see for yourself :) github./jquery/jquery/blob/… – Matt Commented Mar 22, 2015 at 22:50
• @Matt yeah I've been staring at that for the last 30 minutes. Unfortunately, it's a bit over my head. I'm still very new to coding. I'm still working through it though... hopefully I'll see something or have a flash of insight. – MikelG Commented Mar 22, 2015 at 22:52
• @MikelG: Ah. I guess when you say "the site is supposed to redirect you to another page ", you mean the site replaces the current page with the response of the AJAX call, rather than redirecting the user via a HTTP request to a different URL? – Matt Commented Mar 22, 2015 at 22:53

1 Answer 1

To directly answer your question, the ajax() equivalent of $('#thonow').load('next.php') would be;

jQuery.ajax('next.php', {
    type: 'GET',
    dataType: 'html'
}).done(function (response) {
    $('#thonow').html(response);
});

Note that load() has more logic in it, so not all load() calls are equivalent to this ajax() call, but in this circumstance, it is.

However, this doesn't actually help solve your problem. Because your lbyl function append()'s the response one-character-at-a-time, jQuery is treating each character as a Text node*, rather than the HTML string that load() treats it as. This is why you see the HTML string being outputted, rather than the HTML string being parsed.

^{* append() calls domManip() internally, which itself calls jQuery.buildFragment(), which ends up creating a Text node if the passed string doesn't look like a HTML string}

What you really need to do is to detect whether the response is a "full page refresh", or a "letter-by-lettter response". Given your example response, you could do this via:

$('#nextButton').click(function(){
  $.ajax({
    url: 'next.php',
    dataType: 'text',
    success: function(result) {
        if (result.slice(0, 15) === '<!DOCTYPE html>') {
            document.write(result);
            document.close();
        } else {
            $('#thonow').html("");
            lbyl('#thonow',result,0,50);
        }
      }
   });
});

Note that replacing the entire page via AJAX is a bit of a "code smell". I'd rather redirect the user to the new URL, or only replace the page from <body> or a descendant.