In your HTML page, How to Update contents without page refresh?
i.e JQuery, A powerful scripting language for us.
Now I'm going to give the sample demo.
Here You need:
Here You need:
- jquery-1.9.1.js
HTML Code: UpdateContents.html
<!DOCTYPE html>
<html>
<head>
<title>Sample Page!</title>
</head>
<body>
<div id="page">
<h1>Sample Update Contents in a Div Demo</h1>
</div>
<div id="sample" style="height: 200px; color: white; background-color: black;overflow: auto; font-weight: bold;">
</div>
<div>
<h1>Some othre content</h1>
</div>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval('addnewline()',1000);
});
var number = 1;
function addnewline(){
$($.parseHTML( "<div>Image Number: " + number + "...</div>" )).prependTo( "div#sample" );
number++;
}
</script>
</body>
</html>
<html>
<head>
<title>Sample Page!</title>
</head>
<body>
<div id="page">
<h1>Sample Update Contents in a Div Demo</h1>
</div>
<div id="sample" style="height: 200px; color: white; background-color: black;overflow: auto; font-weight: bold;">
</div>
<div>
<h1>Some othre content</h1>
</div>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval('addnewline()',1000);
});
var number = 1;
function addnewline(){
$($.parseHTML( "<div>Image Number: " + number + "...</div>" )).prependTo( "div#sample" );
number++;
}
</script>
</body>
</html>
No comments:
Post a Comment