1

ページをリロードせずに、div要素へのリンクのコンテンツをロードしようとしています。このソリューション「http://wecodesign.com/demos/stackoverflow-7071545.htm」を見つけて試しましたが、動作させることができませんでした。

私がしていることはまったく同じですが、何らかの理由で機能しません。

これはJqueryの部分です：

<script type="text/javascript">

    function updateContainer( url ){
        dynamicCon = '#mainContent';    
        ObjTag = $( dynamicCon );
        ObjTag.load( url );
    }
    $( document ).ready( function() {
        $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
            url = $( this ).attr( 'href' );
            updateContainer( url );
            event.preventDefault();
            event.stopPropagation();
        });
    });
</script>

そしてこれは私がHTMLを出力するために使用するPHPビットです：

echo '<li><a href = "/getPost.php?q='. $row['id'] .' " rel="dynamicLoad" >'. $row['title'] .'</a> </li> <br>';

しかし、これにより、divにロードする代わりに、リンクに移動します。コンテンツをロードしたいdivは「mainContent」と呼ばれます。今、私はJQueryを知っているとは言えませんが、すべてが私には問題ないように見えますが、明らかに私は何かが欠けています。

更新：後のライブラリにリンクしてサーバーを再起動し、ブラウザのキャッシュをクリアして、Javascriptを次のように変更してみました。

        function updateContainer( url ){
            dynamicCon = '#mainContent';    
            ObjTag = $( dynamicCon );
            $("#mainContent").load(url)
        }
        $( document ).ready( function() {
            $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
                url = $( this ).attr( 'href' );
                updateContainer( url );
                event.preventDefault();
                event.stopPropagation();
            });
        });

ここで、リンクを読み込もうとすると、mainContent divが空になります（状況を考慮すると確かに改善されています）

更新2：いろいろ調べたい場合は、ネットにアップロードしました。electricbrownie.net

4

3 に答える 3

1

答えは簡単です。生成されたURLで末尾のスペースを削除すると、機能します:)

echo '<li><a href = "/getPost.php?q='. $row['id'] .'" rel="dynamicLoad" >'. $row['title'] .'</a> </li> <br>';

<a href = "/getPost.php?q='. $row['id'] .' "あるべきだった<a href = "/getPost.php?q='. $row['id'] .'"

于 2012-07-25T18:29:02.007 に答える
0

要素のデフォルトの機能は、あなたを属性<a>に送ることであるためだと確信しています。hrefこれを試して、機能するかどうかを確認してください。

<script type="text/javascript">

    $( document ).ready( function() {
        $( 'a[rel="dynamicLoad"]' ).each(function(index){
            $(this).click(function(){
                url = '/getPost.php?q='+$(this).attr('id');
                $('#mainContent').load(url);
            });
        });
    });
</script>

<?php
...
    echo '<li><a id="'.$row['id'].'" href = "#" rel="dynamicLoad" >'. $row['title'] .'</a> </li> <br>';
?>
于 2012-07-25T15:22:12.723 に答える
0 
   $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
        var url = $( this ).attr( 'href' );
        $.get(url, function(data) {
            $('#mainContent').html( data);             
        }):
        event.preventDefault();
    });
于 2012-07-25T15:28:35.920 に答える