<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
<script type="text/javascript">
var JQFUNCS =
{
runFunc:
{
"ajax":
{
run: function(id)
{
$('#'+id+' .content1').bind('click', function(e)
{
e.preventDefault();
getContent('/function-demos/functions/ajax/data/content1.html');
});
$('#'+id+' .content2').bind('click', function(e)
{
e.preventDefault();
getContent('/function-demos/functions/ajax/data/content2.html');
});
$('#'+id+' .content3').bind('click', function(e)
{
e.preventDefault();
getContent('/function-demos/functions/ajax/data/content3.html');
});
function getContent(filename)
{
$.ajax({
url: filename,
type: 'GET',
dataType: 'html',
beforeSend: function() {
$('#'+id+' .contentarea').html('<img src="/function-demos/functions/ajax/images/loading.gif" />');
},
success: function(data, textStatus, xhr) {
if (filename == '/function-demos/functions/ajax/data/content3.html')
{
setTimeout( function() {
$('#'+id+' .contentarea').html(data);
}, 2000);
}
else
{
$('#'+id+' .contentarea').html(data);
}
},
error: function(xhr, textStatus, errorThrown) {
$('#'+id+' .contentarea').html(textStatus);
}
});
}
},
reset: function(id)
{
$('#'+id+' .contentarea').html('Content will appear here.');
$('#'+id).hide();
}
}
}
}
</script>
</head>
<body>
<h3>Demo: Using $.ajax() to load content without reloading the entire page.</h3>
<p>HTML content is held in separate files which are inserted below using AJAX. Note that it is also courtesy to show a loading image while the AJAX request is processing. Content 3 has a 2 second delay to simulate the loading image.</p>
<p><a href="#" id="ajax-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="ajax-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="ajax-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="ajax">
<div class="contentarea" style="border:1px solid orange;padding:10px;margin-bottom:5px;">Content will appear here.</div>
<button class="content1 btn">Load content 1</button> <button class="content2 btn">Load content 2</button> <button class="content3 btn">Load content 3</button></div>
</body>
</html>
Enjoy ........ :)
No comments:
Post a Comment