Question

i want load Content(is html) with jQuery. why following code not worked for me?
i use of this tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

html:
click on each of this link load page it(href).

<div id="icon">
    <a href="http://localhost/test/test2.php" id="delete_icon"></a>
    <a href="<?=base_url();?>admin/tour/insert_foreign" id="add_icon" ></a>
    <a href="http://localhost/test/1st.htm" id="edit_icon" ></a>
    <a href="http://localhost/test/index1.php" id="print_icon"></a>
    </div>

js:

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function () {
    var href = $(this).attr('href');
    if (hash == href.substr(0, href.length - 5)) {
        var toLoad = hash + '.html #content';
        $('#content').load(toLoad)
    }
});

$('#icon a').click(function () {

    var toLoad = $(this).attr('href') + ' #content';
    $('#content').hide('fast', loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);

    function loadContent() {
        $('#content').load(toLoad, '', showNewContent())
    }

    function showNewContent() {
        $('#content').show('normal', hideLoader());
    }

    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

Answer 1

First of all:

• What exactly is not working?
• Are you getting errors?
• Is the XHR firing properly? (see
  http://fixingthesejquery.com/#slide33 for some debugging tips)

If you want your question answered properly you should include as much relevant information as possible.

Secondly, looking at the code quickly:

You need to pass a reference to a function as you callback functions, instead you are invoking the functions (showNewContent() instead of showNewContent), and passing whatever it returns (in your case, nothing).

Try this instead:

function loadContent() {
    $('#content').load(toLoad, '', showNewContent);
}

function showNewContent() {
    $('#content').show('normal', hideLoader);
}