ボックス内をスクロールすると自動でコンテンツをロードするjQuery – かちびと.net

を読んで、ちょっとやってみたくなったので作った。
言ってもたいしたことやってませんがｗ

かちびと.netのシロさんには許可を頂いてます。

詳細は以下。

上記記事では、下までスクロールしたあとにワンテンポ置いてから（タイマー処理で）コンテンツがロードされる形になってます。

しかし、IEで見てみるとわかるのですが、内側のスクロールが完了した時点で外側のスクロールも動いちゃうんですね。

なので、ロードされる前にページの下に行ってしまう。

これをちょっと改善できないかなーと思って作ったのがこちら。

Auto Scroll Test

コードは以下。

<script type=”text/javascript”>
$(function(){
function updatestatus(){
//ロードしたアイテムの数を表示
var totalItems=$(‘#content p’).length;
$(‘#status’).text(‘現在、 ‘+totalItems+’ 個を表示しています。’);
}
function scrollalert(){
var scrolltop=$(‘#scrollbox’).attr(‘scrollTop’);
var scrollheight=$(‘#scrollbox’).attr(‘scrollHeight’);
var windowheight=$(‘#scrollbox’).attr(‘clientHeight’);
var scrolloffset=300;
if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
{
//新しいアイテムのロード
$(‘#status’).text(‘続きを読み込んでいます・・’);
$.get(‘./hoge.txt’, ”, function(newitems){
var arr = newitems.split(“\n”);
for(var i=0;i<arr.length;i++){
$(‘#content’).append(“<p>”+arr[i]+”</p>”);
}
updatestatus();
});
}
}
scrollalert();
$(‘#scrollbox’).scroll(function(){scrollalert();});
});
</script>

HTMLは元記事と同じです。

処理の変更ポイントは、

１）スクロールが一番下に行く前にロードするようにした
var scrolloffset=300;
の部分ですね。
この数値は「スクロールの一番下のポイントからどのくらい離れた位置でロードするか」という設定になってますので、
「20」になってたのを「300」に増やしました。

２）タイマーをやめて、スクロールイベントにバインドした
元スクリプトでは、タイマー処理で1.5秒毎に関数が実行されるようになってました。
これを変更して、スクロールしたら関数を実行するように変えました。
こうすることで、ちょっとはIE対策になってるはず。。

３）おまけ：　読み込み元のテキストを書き方を変えた
読み込む元テキストが

<p>hoge</p>
<p>hogehoge</p>
<p>hogehogehoge</p>

となってて、元テキストにHTMLタグが含まれてるのが気に入らないのでｗ

hoge
hogehoge
hogehogehoge

を読み込んで、JavaScript側で<p>タグをつけるように変更しました。
完全に好みの問題ですけどｗ

こんな感じです。

こうしたほうがいいんじゃない？という意見は随時募集！＾＾

jQueryは簡単に変更できるのが面白いですねー＾＾

＜やりたいこと＞
jQueryを使ってAJAXでPHPに配列を渡したい

＜10/26：追記しました＞

＜前提＞
・CentOS5.3
・PHP5.2.11
・jquery-1.3.2.min.js

＜サンプルソース＞

$.ajax({
type: “GET”,
url: “test.php”,
data: {
id:[1,2,3,4,5,6,7]
},
success: function(){
alert(‘成功しました’);
},
error: function(){
alert(‘エラーです’);
}
});

＜問題点＞
・jQueryは上記のソースで「id=1&id=2&id=3&id=4&id=5&id=6&id=7」というリクエストを行う
→同じキーで複数の値を送信する
・PHPは同じキーで複数の値が送信されていた場合、後から受け取ったものだけが有効になる
→上記ソースで受け取れるのは「array(1) { ["id"]=> string(1) “7″ } 」のみ

＜解決方法＞
見当たらない。
ので、別の方法を使えということか。

仕方ないので、当面は「カンマ区切りの文字列にしてPHP側で分割」という方法で回避しようと思いますが、
どうにかならないんだろうか？これは…

＜10/26：追記＞
コメントにて提案頂いた方法

data: {
“id[]“:[1,2,3,4,5,6,7]
},

で取得できました…！
これでvar_dumpの結果は

array(1) {
["id"]=>
array(20) {
[0]=>
string(1) “1″
[1]=>
string(1) “2″
[2]=>
string(1) “3″
……
}

となりました！！
HOGE-CHONさん、ありがとうございます！

＜さらに追記＞
var_dumpの結果を他のソースから持ってきて不思議なことになってしまっていたので修正しました。失礼しました。