How to Load Content of Page Without Refreshing the Whole Page

Is it possible to load content of page without Refreshing the whole page

Yes you can use the jQuery.ajax() call. Like this:
Change the text of a element using an AJAX request:

$("button").click(function(){
    $.ajax({url: "demo_test.txt", success: function(result){
        $("#div1").html(result);
    }});
});

See this tutorial for more information:
http://www.w3schools.com/jquery/ajax_ajax.asp

Load content within div without refreshing main page

You can achieve this by having three divs with say ids as '#home-page', '#result-page' and 'link-page'. Keep the last two pages hidden. Then make an ajax call on form submit and display the response to the #result-page div and hide the form. After few secs, you show the #link-page and hide the #result-page.

Here is a jsfiddle for you. I hope this is what you want.

HTML

<form method="post" action="results.php"> 
    <h2>Form Page</h2>
    Your form elements here
</form>
<div id="result-page" style="display:none">
    <h2>Result Page:</h2>
    Result of the ajax call here
</div>
<div id="link-page" style="display: none;">
    <h2>Link page:</h2>
    Link page content here
</div>

On load of page, attach an event for form submit where in you make an ajax call and append the response into the result-page div

JS

$("form[ajax=true]").submit(function (e) {
$.ajax({
        url: 'results.php',
        type: 'POST',
        success: function (data) {
            $("#result-page").append(data).show(); // appending data response to result-page div
            $('form').hide();  //hiding form
            setTimeout(function () {
                $("#result-page").hide(); 
                $("#link-page").show();
            }, 5000);
        }
    });
});

How to reload content according exac time without refreshing the page

If you want your page to refresh automatically after a certain time period, you can use javascript's setInterval() function.

setInterval(function() { window.location.reload(); } , timePeriod );

Update a web page without reloading the whole page

It's called ajax load. It probably uses an API in the background, but you do not need to and it is a Javascript technology.

Here is a primer for ajax Ajax tutorial by W3Schools

---

Related Topics