2012-01-24 49 views
2

他のページの特定のコンテンツを読み込み、アドレスバーのURLを変更するにはjQueryアドレスを使用しています。AJAX読み込みページ内の別のページからdivを読み込み

ソーシャルネットワークのような小さなWebサイトで作業していますので、postsのテーブルのID をPHP経由で読んでいます。私はjQueryとAJAXの可能性を使い、すべてを動的に読みたいと思っています。

私は最高の可能性があることが判明した(delegate()( も1.7.1に古いであることが判明している)またはon()、私は(古いことが判明している)live()を使用する必要があること、が分かった jQuery + AJAXを使用して動的にロードされたコンテンツの内部でイベントを動作させる)。

私も(私も 何を知らない、それは「バブル」がないので、私は、すでにロードされたコンテンツの中に別の ページから新しいコンテンツをロードするためにload()またはget()を使用することができないことを、どこかで読んそれは意味する)。

AJAXを読み込んだページに新しいコンテンツを読み込むにはどうすればよいですか?ここで

は、私は(ロードされたページに含まれている)で動作するようにしようとしたスニペットです:

<?php 
    if(exist('`posts`')) { 
     $load = mysql_query('SELECT `id` FROM `posts` ORDER BY `id` DESC LIMIT 10'); 
     while($row = mysql_fetch_object($load)) { 
?> 
      <script type="text/javascript"> 
       $('body').on('body', 'load', function() { 
        $.get('getpost.php', { pid: <?= $row->id ?> }, function (data) { 
         $('#posts').html($('#post_<?= $row->id ?>', data).html()).show(); 
        }); 
        $('#posts').off('load'); 
       }); 
      </script> 
<?php 
     } 
    } 
    else { 
?> 
    <div align="center">No posts yet.</div> 
<?php 
    } 
?> 

getpost.phpは、それがスタートページに表示されるように、私はdiv_$row->idを得ることができ、そこから私のファイルです。

PLUS(あなたの知識のために追加するだけ) マウスオーバー、クリックまたはブラーイベントなしでコンテンツにコンテンツをロードします。

ありがとうございました。

答えて

0

私はこのアプローチが完全に間違っていると思いますか?あなたは各投稿のためにajaxリクエストを作成していますが、これはあまりにも多くのリクエストを作成することになり、読み込み時間が大幅に遅くなります。私はPHPのwhileループの中に投稿のHTMLを直接書きたくないという理由を見ることはできません。

+0

ロジックを鳴らし、より良い解決法のようにします。あなたは私に言ったようにそれをしましたか?ありがとう! :-) –

+0

PHPコードでN個のブロックをチャンクし、ユーザーが目に見えるコンテンツの最後までスクロールしたり、「次へ」ボタンをクリックしたりすると、次のブロックのNブロックをロードすることができます。あなたのUIが提供するものは何でも。 PHPコードでは、一度に1ページ分の内容のページを生成してから、ユーザーのアクティビティに応じてより多くのコンテンツを生成するのが妥当です。 – technomage

1

セレクタに一致する新しいDOM要素に特定のイベントマッピングを動的に適用する場合は、 ".live()"を使用します。あるいは、読み込まれたコンテンツの各チャンクにビヘイビアを添付することもできます。

DBルックアップとは独立して、Ajaxロードを記述して開発すると、作業が簡単になります。次のスニペットは、各要素がロードされた後に別のajax呼び出しをトリガーします。

<?php 
$id = 'div'.mt_rand(); 
$counter = isset($_REQUEST['counter']) ? $_REQUEST['counter'] : 0; 
$next = $counter + 1; 
echo <<<END 
<div id="{$id}">{$counter} 
<script> 
$(function() { 
    $.ajax('/url?counter={$next}', function(html) { 
     $(html).appendTo($('#{$id}').parent()); // or whatever your favorite method is for adding a sibling 
    }); 
}); 
</script> 
</div> 
END; 
?> 
+0

ありがとうございました。解決策(上記参照)。あなたのソリューションは、私のウェブサイトの他の部分にとって本当に役立つかもしれませんが。だから、ありがとう! –

関連する問題