Question

This code works fine in Firefox and IE. In Chrome, you need to click each link twice and even then the page loads twice. There is an example at http://www.crowdfundcenter.com/ajaxpage.php and this is the code:

<script type="text/javascript">

$(document).ready(function () { <!-- Begin document ready function -->

    $.history.init(pageload);   

    $('a[href=' + window.location.hash + ']').addClass('selected');

    $('a[rel=ajax]').click(function () {    <!-- Begin click function -->

        var hash = this.href;
        hash = hash.replace(/^.*#/, '');
        $.history.load(hash);   

        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');

        return false;

    }); <!-- End click function -->


}); <!-- End document ready function -->


function pageload(hash) {   <!-- Begin pageload hash -->
    if (hash) getPage();    
    }   <!-- End pageload hash -->


function getPage() {    <!-- Begin getPage function -->
    var loading = $("#loading");
    var data1 = document.location.hash;
    showLoading();
    switch(data1){
        case "#home":
            $('#content').slideUp();
            $('#content').load('xhome.html', hideLoading);
            $('#content').slideDown();
            break;
        case "#business":
            $('#content').slideUp();
            $('#content').load('xbusiness.html', hideLoading);
            $('#content').slideDown();
            break;
        case "#aboutus":
            $('#content').slideUp();
            $('#content').load('xaboutus.html', hideLoading);
            $('#content').slideDown();
            break;
        case "#hidpage":
            $('#content').slideUp();
            $('#content').load('xhidpage.html', hideLoading);
            $('#content').slideDown();
            break;
        default:
            $('.loading').hide();
            break;
    }

function showLoading(){
    loading
        .css({visibility:"visible"})
        .css({opacity:"1"})
        .css({display:"block"});  
        }

function hideLoading(){
    loading.fadeTo(1000, 0);
    };

};      <!-- End getPage function -->

</script>


<div id="wrapper">  <!-- Begin wrapper -->

<div id="header">
    <ul id="menu">
        <li><a href="#home" rel="ajax">Home</a></li> 
        <li><a href="#business" rel="ajax">Business</a></li> 
        <li><a href="#aboutus" rel="ajax">About Us</a></li>
    </ul>
</div>

    <div style="clear: both;"></div>

    <div style="display: block; float: left; height: 24px;">
    <div id="loading">
    <img src="img/loading99small.gif" alt="Loading..." />
    </div>
    </div>


    <div style="clear: both;"></div>


    <div id="content">  <!-- Begin content -->
        <!-- Ajax Content -->

<div style="display: block; width: auto; margin: auto;">

<div style="display: block; width: auto; margin: 0px 0px 0px 0px; color: #CCCCCC; font-size: 12px;">
    <h2>Home Page</h2>
    This is the home page generated by code on this page.
</div>
    </div>


</div>  <!-- End content -->


<div style="display: block; float: left; clear: both;"></div>


<div style="display: block; width: auto; margin: auto;">  <!-- Begin footer -->

<div id="footer" style="display: block; margin: 40px 0px 40px 0px; color: #808080; font-size: 16px; font-weight: bold;">
    This is the footer for the page.
    </div>

    </div>  <!-- End footer -->

</div>  <!-- End wrapper -->

Everything works fine in Firefox and IE. The problem is Chrome and don’t know what the problem is, any assistance is greatly appreciated.

Answer 1

The problem is all yours.

You are issuing page loads in both

• $('a[rel=ajax]').click(), and
• $.history.init().

So, the code is actually working as intended.