Code for loading the content without loading the total page?

Kmandapalli
Posted by Kmandapalli under jQuery category on | Points: 40 | Views : 555
$('#' + id + ' .content1').bind('click', function (e) {
e.preventDefault();
getContent('http://coding.smashingmagazine.com/wp-content/uploads/2011/11/content1.html');
});

$('#' + id + ' .content2').bind('click', function (e) {
e.preventDefault();
getContent('http://coding.smashingmagazine.com/wp-content/uploads/2011/11/content2.html');
});

$('#' + id + ' .content3').bind('click', function (e) {
e.preventDefault();
getContent('http://coding.smashingmagazine.com/wp-content/uploads/2011/11/content3.html');
});

function getContent(filename) {
$.ajax({
url: filename,
type: 'GET',
dataType: 'html',
beforeSend: function () {
$('#' + id + ' .contentarea').html('<img src=&quot;http://coding.smashingmagazine.com/wp-content/uploads/2011/11/loading.gif&quot; />');
},
success: function (data, textStatus, xhr) {

if (filename == 'http://coding.smashingmagazine.com/wp-content/uploads/2011/11/content3.html') {
setTimeout(function () {
$('#' + id + ' .contentarea').html(data);
}, 2000);
} else {
$('#' + id + ' .contentarea').html(data);
}
},
error: function (xhr, textStatus, errorThrown) {
$('#' + id + ' .contentarea').html(textStatus);
}
});
}

Code to Reset

$('#' + id + ' .contentarea').html('Content will appear here.');
$('#' + id).hide();

Comments or Responses

Login to post response