1

mySQL データベースから最新の 50 件のレコードを取得しています。それぞれが同位体を持つ DIV に入り、完全に機能します - DIV のアニメーション化、リセットなど。

ただし、AJAX を使用して OFFSET を使用して次の 50 レコードを呼び出すと、新しいレコードは新しい DIV に読み込まれますが、Isotope のクラスはそれらに適用されません (Web インスペクターで確認できます)。

セットアップ:

index.php = ブラウザに読み込まれるとデータベースが呼び出され、Isotope は正常に動作します。index.php (a#update_newImages) 上のリンクは、リスナーをトリガーして "load-ajax.php" を読み込みます。

load-ajax.php = SQL SELECT と PDO ループのみを持つ外部ページ。これらのレコードは読み込まれますが、アイソトープが適用されていないため、問題が発生します。

index.php のコード

 ...database connection info and query code go here

 $filter = ""; // appears in the echo'd DIV below, for filtering the ISOTOPE divs. Turned off til this injection problem is solved

 //ISOTOPE SETTINGS, in <HEAD>
 var $container = $('#theContent');
 $container.isotope({
 layoutMode : 'fitRows', //leave blank for default masonry
 filter: '*',
 animationOptions: {
 duration: 750,
 easing: 'linear',
 queue: false,
 }
 });


in BODY:

<div id="theContent">
<?php  
for($i=0; $links = $query_links->fetch(); $i++){

echo "<div class=\"".$filter." box\"><a href=\"#\" data-filter=\"." . $filter . "\" class=\"theCat " . $filter . "\">" . $links['ATtitle']."</a><br>" .  "#" . $links['LID']."-
<a href=\"". $links['URL']."\" target=\"_blank\" class=\"theURL\">". $links['descr']."</a></div>";
}
?>
</div><!-- theContent -->


<script> // RIGHT BEFORE BODY TAG CLOSES
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
  event.preventDefault();
     offset_newImages += 50; // increments batches of records
     $.get('load-ajax.php?loadDataType=newImages&offset='+offset_newImages, function(data) {
      $("#theContent").hide().html(data).fadeIn(600);

//**EDIT**
     alert('Load was performed.'); // callback on success, works - is this where the Isotope "appended" code would go?

    }, false);
   });
</script>

load-ajax.php のコード

...database connection info goes here

$offset = $_GET["offset"]; // from URL
$filter = ""; // for filtering the ISOTOPE divs, turned off til the injection problem is solved

for($i=0; $links = $query_links->fetch(); $i++){
    $showList = "<div class=\"".$filter." box\"><a href=\"#\" data-filter=\"." . $filter . "\" class=\"theCat " . $filter . "\">" . $links['ATtitle']."</a><br>" .  "#" . $links['LID']."-
<a href=\"". $links['URL']."\" target=\"_blank\" class=\"theURL\">". $links['descr']."</a></div>";
echo $showList; // this is where ISOTOPE is not applied after each AJAX injection
}

コールバックの解決策があると考えていますが、次に何をすべきかわかりません。

注: 私はポール アイリッシュによるアイソトープ + 無限スクロールを試しましたが、無限スクロールのページング メカニズムを mySQL から JSON に変換できるようになるまで、ここでは使用できません。次のプロジェクト。

編集: index.phpを次のように修正しました。問題は解決しませんが、ほぼ解決したと思います。ajax は機能していますが、Isotope が起動すると、新しい DIV にそのクラスが追加されません。

<head>

<script type="text/javascript">
$(document).ready(function(){
//ISOTOPE SETTINGS
var $container = $('#container');
$container.isotope({
       layoutMode : 'fitRows', //leave blank for default masonry
       filter: '*',
       animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    }
});
});
</script>

の直前に行く</body>:

<script>
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
 offset_newImages += 50;
 $.ajax({
    type: 'GET',
    url: "load-ajax.php?offset="+offset_newImages,
    success:function(data){
          //    alert(data); // works
          $("#container").hide().html(data).fadeIn(600) // fades in the new recordset
          $container.isotope('insert', data); 
      }
  });
});
</script>

まとめると、新しいデータが DIV に読み込まれます。ブラウザー ウィンドウのサイズを何らかの方法で変更するまでは、それを見ることができます。これは、Isotope が起動し、CSS で新しい DIV を非表示にする場所です。

4

1 に答える 1

1

Isotope には、新しいコンテンツを動的に挿入した後にレイアウトを再計算する方法がいくつかあります。

于 2013-05-24T14:01:26.620 に答える