CodeIgniterでdivを表示/非表示にするjQueryコードを調整する

私は自分のサイトをHTML/CSSからCodeIgniterに移しています。 PHPの経験はあるが、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 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('LOADING...');  
    $('#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">

</div>
</div>


<div id="content">

</div>

<div id="rightcol"

</div>
0

2 答え

あなたのJSコードが有効であることを確認したら、 preventDefault メソッドを配置して、ブラウザを妨害してみましょうアンカーリンクをたどることから

JSLint is a great tool for checking your JS scripts.

0
追加された
バインド関数の最初の行に挿入するだけです...しかし、私が混乱しているのは、それが以前のところ(HTMLだったとき)どのように動作していたかです。繰り返しますが、間違いが1つありますので、コードを確認してください。不足している見積もりが1つあります。
追加された 著者 Shomz,
どういたしまして。私はそれを見ることができるようにどこかにそのページを投稿できますか? jsfiddle.net を試してみてください(PHPではなく、HTMLのみ必要です)
追加された 著者 Shomz,
新しいコードにエラーがあるはずです...アラートやコンソールログを入れて、スクリプトがまったく実行されるかどうかを確認してください。
追加された 著者 Shomz,
あなたが提供したリンクを読みました。これはトリックを行うかもしれないように見える。このjqueryスニペットを現在のコードに統合できますか、別の関数が必要ですか?それを追加するだけの十分なjqueryを知らないでください。
追加された 著者 chowwy,
さて、あなたの編集を見て、試してみましょう。それがうまくいくならあなたの答えをアップアップします。
追加された 著者 chowwy,
再度、感謝します。さて、prevDefで追加されました。まだ動かない。最初にHTMLページに追加してからjqueryコードを変更していない。それは働いていたので、私はそれを残しました。私はHTMLで再作成し、再度動作し、CIで再試行します。
追加された 著者 chowwy,
HTMLバージョンを確認しました。それはうまく動作します。ここではjsfiddle(jqueryを含む)にあります。これはコードの初期のバージョンです - jsfiddle.net/9qLrk
追加された 著者 chowwy,
さて、します。ありがとう。
追加された 著者 chowwy,
スクリプトコードに隠れたエラーが見つかりました。今は完璧に動作します。コードをもう一度チェックするように指示したので、あなたの答えを選んだ。トラブルのお詫び十分に長いものを見ると、小さなものを見逃すのは簡単です。
追加された 著者 chowwy,

コードをコピーして貼り付けた場合は、引用符がない場合があります。

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

また、 loadContent および showNewContent 関数では、コールバック関数をパラメータとして渡すだけです。あなたはそれらを呼び出すべきではありません:

function loadContent() {  
    $('#content').load(toLoad,'',showNewContent)  
}  
function showNewContent() {  
    $('#content').show('normal',hideLoader);
}
0
追加された
plsは私の修正を見ます
追加された 著者 cenanozen,
ありがとう。私は訂正をした。まだ動作していません。
追加された 著者 chowwy,