Question

I have a jquery to show links in a div without reloading page:
jQuery Code:

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function(event) {
        // Prevent default click action if javascript is enabled
        event.preventDefault();
    //load the content of the new page into the content of the current page
    $("#content").load( $(this).attr("href") + " #content");
    })
});
</script>

everything is fine and working, but this is so simple! how i can add a loading image before content loading in this code?

and second question, is there any way to show a new page link in address bar after loading?

Answer 1

You can use the call back function to remove the loader.

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function(event) {
        // Prevent default click action if javascript is enabled
        event.preventDefault();
        //load the content of the new page into the content of the current page
        $('#loader').show(); // Show some hidden loader on the page
        $("#content").load( $(this).attr("href") + " #content", function() {
            $('#loader').hide(); // Hide the loader when it completely loads the given URL.
        });
    })
});
</script>

For your second question this should be the answer. Change the URL in the browser without loading the new page using JavaScript