Tuesday, 27 August 2013

Why isn't the HTML on the page being updated?

Why isn't the HTML on the page being updated?

I am creating an Ajax Handler so I can have one single ajax JavaScript
file for my website, and then pass all Ajax calls through it. All is
working well so far, it can send the Ajax request to the right file and
receive the data back in JSON format, however I have an issue when it
comes to updating the HTML on the page.
I am passing back a variable with the ID of the object to place the HTML
in. I am also passing back another variable with the HTML to put in that
object. I get back all the data from the ajax call fine. However it will
not update the HTML on the page at all. This is my code:
/**
* $value contains an array of the following
*
* content The HTML code that is replacing the content of the
specified div.
* fade Whether to fade out the ID or not before changing the
content.
* fadeOut Whether to fade out the div after a certain amount of time.
* function Function to call at the end of the case.
* restore Restore the original content in the div. Only used if
fadeOut is set.
* targetId The ID of the target div that is having it's content
replaced.
*/
case 'html':
console.log(value);
var $target = $('#' + value.targetId);
var original = '';
if(value.restore) original = $target.html();
if($target.length > 0) {
if(value.fade) {
$target.fadeOut(500);
setTimeout(function() {
$target.html(value.content).fadeIn(500);
}, 510)
} else {
$target.html(value.content);
}
}
if(value.fadeOut > 0) {
setTimeout(function() {
$target.fadeOut(500);
}, value.fadeOut);
}
if(value.fadeOut > 0 && value.restore) {
$target.html(original);
}
if(value.function != false) {
window[value.function]();
}
break;
console.log(value) produces the expected, it gives me the correct ID and
HTML, and if I do console.log($target), then I get the jQeury object back
with a length of 1. The fadeOut is working fine, so I know I can
manipulate $target fine, so why can I not replace the HTML?
I have created a jsfiddle here, and it works. So why wouldn't it work in
my Ajax?

No comments:

Post a Comment