QA@IT

ajaxローディングで取得したデータをsort関数で並べ替える方法

5105 PV

お世話になっております。

データベースからデータを取得し表示し、「もっと見る」ボタンを押下されたらajaxローディングで追加分を取得するという処理と行っています。

$(function() {
    //More Button
    $('.more').live("click",function() {
        var ID = $(this).attr("id");        
        if(ID) {
            $.ajax({
                type: "POST",
            url: "~.php",
                        data:"id="+ID,
            cache: false,
            success: function(html){
                $("#updates").append(html);
                $("#more"+ID).remove();
            }
           });
        }
    });
});

追加部分を取得することはできています。

同じページ内にボタンを配置し取得したデータをソートできるようにしているのですが、
上記の「もっと見る」ボタンで取得後にソートを行うと取得した部分が消えてしまいます。

jQuery(document).ready(function($) {
     $('#btn').click(function() {
    //**********************************************
    //新着順で並べ替え
    //**********************************************
    $('#list').html(
        $('#list > li').sort(function(a, b) {
            return parseInt($(b).attr('id'), 10) - parseInt($(a).attr('id'), 10);
        })
    );
});

ボタンとリスト部分は以下の通りです。
liタグを並べ替えるボタンを配置しています。

<button id="btn">降順に並べ替え</button>
<ul id="list">
<li id=1></li>
<li id=2></li>
<li id=3></li>
</ul>

ajaxローディングで追加取得している部分はliタグと認識されていないため、このような挙動となってしまうと思うのですが解決策はありますでしょうか?ご教示いただけますようお願いします。

  • ブラウザとそのバージョンは何でしょうか?
    他のブラウザでも同じですか?
    ajaxで取得したhtmlはどうなっていますか?
    -
  • ありがとうございます。ブラウザはchromeでバージョンは22.0.1229.79 mです。IE9とFF15.0.1でも同じ挙動でした。ajaxで取得するhtmlは<li>~</li>までの部分と「もっと見る」ボタン部分になります。ブラウザ上で「ページのソース表示」を行ってもajaxでとっている部分のソースは表示されず①初めの状態、②もっと見るを押した後、③ソート順を変更した後、ですべて同じでした -
  • すみません、タグ部分がhtml表示されてしまいました。
    上記の~の箇所ですが「liタグ~liの閉じタグまで」です。
    -

回答

JSON形式で受け取って、

function(data) {
 $("#list").append(data.html);
 if(!data.more) {
   $("#more"+ID).remove();
 }
}

みたいにするか、
JSONPで、

function(html, more) {
 $("#list").append(html);
 if(!more) {
   $("#more"+ID).remove();
 }
}

とかしたらどうでしょう?

そもそもajaxのサービスはhtmlをそのまま返すのではなく、
idとtextのリストと、続きがあるかのフラグを返すようにして、

JSON形式の例
[
  "list": [
    { "id": "1", "text": "foo"},
    { "id": "2", "text": "bar"},
    { "id": "3", "text": "baz"}
  ],
  "more": true
]

ul-li等の表現方法はJavaScript(というか画面側)に
分業した方が良いかと思います。
そうすりゃtableにしたくなってもajaxのサービスは修正いらないし、
selectのoptionなんかはhtmlをappendしてもうまく行かず、
createElementしてaddしたりしなきゃいけないので。

編集 履歴 (0)
  • h-satomiさん、ありがとうございます。
    JSON形式で実装しようと思います。追加分データと続きがあるかのフラグ取得までは出来そうなのですが、受け取ったJSON形式のデータ("more": true)をどのようPHPのIF文で使えばよいかがいまいちわかりません。HTML上に表示するのは$('#result').html(~)でできるのかと思いますが。。
    -

アドバイスありがとうございます。

$("#updates").append(html);ではなく$("#list").append(html)とすることでご教示の通りで無事動かすことができました。

apendで要素を追加する部分の仕様を少し勘違いしていました。

合わせてもう一つ教えていただきたいのですが、
現在もっと見るリンクをリストの下に配置しています。

元のhtml

<div id="more" class="morebox">
<a href="#" id="append">もっと見る</a>
</div>

追加取得するhtml

<li>~</li>
<li>~</li>
<li>~</li>
<?php if ($value == 'XXX'): ?>
<div id="more" class="morebox">
<a href="#" id="append">もっと見る</a>
</div>
<?php endif; ?>

リンクを押下し追加取得処理をするとリンクが消えてしまうため、追加取得するhtml内にも上記のコードを記載するようにしています。(IF文でまだ追加データがある場合だけもっと見るを表示するようにしています)
ただそのようにすると上記のdivタグもliタグの中に追加されてしまい、表示が崩れてしまいます。このように続けてもっと見るリンクを表示したい場合はどのようにすればよいでしょうか?
ご教示いただけますようお願いします。

編集 履歴 (1)

とりあえずこんなんで期待した動きはするようですが(IE8)
$("#updates").append(html);ではなく
$("#list").append(html);ではありませんか?

<html>
<head>
<title>jQuery Test</title>
<script type="text/javascript" src="./jquery-1.8.2.min.js"></script>
<script type="text/javascript">
  $().ready(function(){
    $("#btnAppend").click(function(){
      $("#list").append("<li id=3>charlie</li><li id=5>echo</li>")
    });

    $("#btnSort").click(function(){

      $("#list").html(
        $("#list > li").sort(function(a, b) {
            return parseInt($(b).attr("id"), 10) - parseInt($(a).attr("id"), 10);
        })
      );
    });

  });
</script>
</head>
<body>
<h1>jQueryのテスト</h1>
<button id="btnAppend">append</button>
<button id="btnSort">sort</button>
<ul id="list">
<li id=1>alpha</li>
<li id=2>bravo</li>
<li id=4>delta</li>
</ul>
</body>
</html>
編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。