Question

I’m moving my site from HTML/CSS into CodeIgniter. Have some experience with PHP, but not much with jQuery.

The jQuery script I was using to .show()/.hide() <div>s worked fine with HTML pages, but doesn’t work in CodeIgniter. I know what the script does (and I have attempted a few hours worth of modifications), but can’t get it to function properly in CodeIgniter.

Here’s what’s happening: When I click on the <a href=""> link, a new page opens, instead of opening the view into the <div>. Because of CodeIgniter’s controllers, I’m not actually opening the page. I think this is where the difficulty is, but am not sure.

On the CodeIgniter side: I’ve already autoloaded the JavaScript library, and I am calling the script in the header. Here’s the jQuery code (HTML below):

$(document).ready(function() {  

    var hash = [removed].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)  
        }  
    });  

    $('#nav li 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');  
    [removed].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;  

    });
}); 

and the HTML:

<div id="leftcol">

<div id="usermenu">
<ul id="nav">
<li><a href="/option1">Option 1</a></li><br />
<li><a href="/option2">Option 2</a></li><br />
<li><a href="/option2">Messages</a></li><br />
</ul>
</div>
</div>


<div id="content">

</div>

<div id="rightcol"

</div>

Answer 1

After you make sure your JS code is valid, try to put the preventDefault method, to prevent browser from following the anchor link.

JSLint is a great tool for checking your JS scripts.