http://【mydomain】/themes/2/page:2がinfinitescrollのオプションnextSelectorに指定されている時、なぜか出力されないアイテムが表示されたり、アイテムがもっとたくさんあるはずなのに、「もうアイテムはありません」というようなメッセージが出てしまうのだ。 i
まず、サーバ側のaccessログをみると、 http://【mydomain】/themes/3/page:2というURLにアクセスしており、404エラーを返していた。なぜ、このようなURLにアクセスしてしまうのか。
infinitescrollのソースをchoromeのデバッグモードで見ていると、以下のことがわかった。
pathという2要素の配列があるのだが、 0番目に'http://【mydomain】/themes/'、1番目に'/page:2'という文字列が入っており、処理としては、このそれぞれの文字列の間にインクリメントされた数字を入れて結合しアクセス先のURLを作っているようだった。つまり、本来は 'http://【mydomain】/themes/2/page:【ページ番号】'と認識してほしいところ、'http://【mydomain】/themes/【ページ番号】/page:2'というように認識してしまったようだ。
infinitescrollのソースをよくみると、URLに/2/というようにスラッシュに直接はさまれた’2’があるとそれをページ番号として認識する作りになっていた。/suzuki2/や/2suzuki/など、他の文字列と一緒であれば、問題なかった。
これを防止するため、最初はinfinitescroll.jsに手を加えようと考えたが、pathはオプションで指定できるということがわかった。なので、以下のようにして指定した。
色々書いているが言いたいことは色が付いている行。
path=new Array(); path.push(location.href+'/page:'); path.push(""); $("#infiniteItems").infinitescroll({ navSelector : '#page-nav', // selector for the paged navigation nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) itemSelector : '.rankedItem', // selector for all items you'll retrieve loading: { finishedMsg: 'これ以上はないのじゃ', img: $("body").attr("data-ladingImg") }, path:path }, function(newElements){ var $newElems = $( newElements ).css({ opacity: 0 }); $newElems.each(function(i){ $itemInfo=$(this).children(".itemInfo"); $voters=$(this).children(".voters"); if($itemInfo.outerHeight()>$voters.outerHeight()){ mgnpdgSum=$voters.outerHeight()-$voters.innerHeight(); $voters.height($itemInfo.height()-20); } }); $newElems.css({ opacity: 1 }); } );
コレ探してた。
返信削除めちゃくちゃタスカッタヨ。