CODEWITHSUNDEEP
htmljquery
Ashish Singh
Ashish Singh

Reputation: 287

Refreshing a div using .load() function

$(document).ready(function(){
$('#container').load('contents/home.html');
$('#nav ul#navigation li a').click(function(){
        var page = $(this).attr('href');
        $('#container').fadeOut('slow').load('contents/' + page + '.html').fadeIn('slow');
        return false;
    });
});

This works good when loading pages within a div container. home.html containing nivoSlider, when the whole page is refreshing it works good but loading home.html again onto #container after loading pages using function $('#container').load('contents/' + page + '.html') then the nivoSlider isn't not working. I have to refresh the whole page just to refresh the div. So I need a code to refresh the div every time it load the pages onto the div #container.

Upvotes: 0

Views: 110

Answers (1)

Aram Kocharyan
Aram Kocharyan

Reputation: 20421

Make sure to encapsulate unique knowledge in a single place in your code. If you need to refresh something, make sure to put this in a single place and then call it as required. Your code could look something like this:

$(document).ready(function() {
    var container = $('#container');
    function loadContent(url, callback) {
        return container.load(url, {}, function () {
            // Add code here to refresh nivoSlider

            // Run a callback if exists
            if (callback) {
                callback();
            }
        });
    }
    loadContent('contents/home.html');

    $('#nav ul#navigation li a').click(function (event) {
        var page = $(this).attr('href');
        container.fadeOut('slow').loadContent('contents/' + page + '.html').fadeIn('slow');
        event.preventDefault();
    });
});

Upvotes: 1

Related Questions