In this tutorial learn How to reload div content only without Refresh Page using Jquery/JavaScript. HTML Content create a div with content and another div for for refresh/ load the content.
The following div with define id name refresh and div id with with time to display the time and using setInterval() statement refresh the div without refresh the page.
set interval(), pass two parameter 1, function_name 2, time to reload to page 1 second = 1000 ms, and we set 8 second = 8000 ms.
and location.href this is get current URL.
TUTORIAL EXAMPLE
Read More Tutorial :
JQUERY
Jquery Form Validation tutorial
JAVASCRIPT
PHP
PHP : REST API Insert / store, Update, Delete and list records
PHP : Removes a particular value from an array
The following div with define id name refresh and div id with with time to display the time and using setInterval() statement refresh the div without refresh the page.
<div id="refresh"></div>
<div id="time">
<?php echo date('H:i:s');?>
</div>
Include a Jquery in the script and page load run document function of Jquery, now setInterval(my_function,80000);set interval(), pass two parameter 1, function_name 2, time to reload to page 1 second = 1000 ms, and we set 8 second = 8000 ms.
and location.href this is get current URL.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$( document ).ready(function() {
setInterval(my_function,80000);
function my_function(){
$('#time').load(location.href+ ' #time');
}
});
</script>
TUTORIAL EXAMPLE
<html>
<head>
</head>
<body>
<div id="refresh"></div>
<div id="time">
<?php echo date('H:i:s');?>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$( document ).ready(function() {
setInterval(my_function,80000);
function my_function(){
$('#time').load(location.href+ ' #time');
}
});
</script>
</body>
</html>
Read More Tutorial :
JQUERY
Jquery Form Validation tutorial
JAVASCRIPT
Javascript : Auto submit form after timer/countdown in Javascript / html
PHP : REST API Insert / store, Update, Delete and list records
PHP : Removes a particular value from an array
No comments:
Post a Comment