Настройте код jQuery, чтобы показать / скрыть div в CodeIgniter

Question

Я перевожу свой сайт из HTML / CSS в CodeIgniter.Имею некоторый опыт работы с PHP, но не очень много с jQuery.

Сценарий jQuery, который я использовал для .show() / .hide() <div>, отлично работал с HTML-страницами, но не работает в CodeIgniter.Я знаю, что делает скрипт (и я пытался изменить его на несколько часов), но не могу заставить его работать должным образом в CodeIgniter.открывается новая страница вместо того, чтобы открывать представление в <div>.Из-за контроллеров CodeIgniter я фактически не открываю страницу.Я думаю, в этом и заключается трудность, но я не уверен.

Со стороны CodeIgniter: я уже автоматически загрузил библиотеку JavaScript и вызываю скрипт в заголовке.Вот код jQuery (HTML ниже):

$(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;  

    });
}); 

и 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

После того, как вы убедитесь, что ваш JS-код действителен, попробуйте ввести метод protectDefault , чтобы браузер не следовал по ссылке привязки.

JSLint являетсяотличный инструмент для проверки ваших JS-скриптов.

Answer 2

Если вы скопировали и вставили свой код, то у вас может отсутствовать кавычка:

 function showNewContent() {  
    $('#content).show('normal',hideLoader());  
               ^
               |
 --------------+

А в loadContent и showNewContent функциях вы должны просто дать функцию обратного вызова какпараметры.Вы не должны называть их:

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