Menu
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.
315
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.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
