匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

foreachとajaxについて


サイトログインユーザー:A君
カテゴリ:投稿日記、お気に入りの2つ

<html>
<span>投稿日記</span><span>お気に入り</span>
<ul>
<?php foreach(): ?>
<li><a>投稿日記</a></li>
<?php endforeach; ?>
</ul>

というのがあったときにお気に入りを押した時にお気に入りの一覧を投稿日記の代わりに表示させるというのをajax処理でやりたいのですがどういったロジックになるのでしょうか?
(お気に入りと投稿日記の一覧はクリックするごとにページ遷移無く切り替わることを想定しています)


初歩的な質問で申し訳無いですが概要だけでもお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/11/14 23:48:07
  • 終了:2012/11/17 13:20:46

ベストアンサー

匿名回答2号 No.2

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2012/11/17 12:51:13

id:nakedfeelsの回答です。

適当ですけど、ajaxを使うならこんな感じじゃないですか。動かしてないので、このプログラムが動作するかどうか知りませんが。

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $content = $("#content"),
            $list = $content.find(".list"),
            $diaryTemplate = $content.find(".diary-template").removeClass("diary-template").detach(),
            $favoriteTemplate = $content.find(".favorite-template").removeClass("favorite-template").detach(),
            state = "diary",
            buttonNames = {
                diary: "投稿日記",
                favorite: "お気に入り"
            },
            user = {
                id: "a", // なんらかの方法でサーバーからデータを受け取っておく
            },
            ajaxOptions = {
                diary: {
                    url: "/diary/list",
                    data: {user_id: user.id},
                    contentType: "json",
                    /**
                     * data は以下のような json と仮定
                     * [
                     *   {
                     *     url: "http://www.sample.com/hoge/diary/1",
                     *     title: "日記1"
                     *   },
                     *   {
                     *     url: "http://www.sample.com/hoge/diary/2",
                     *     title: "日記2"
                     *   }
                     * ]
                     */
                    success: function(data, dataType) {
                        var $div = $('<div></div>');
                        $.each(data, function(i, diary) {
                            var $diary = $diaryTemplate.clone(true);
                            $diary.find('a').attr("href", diary.url).text(diary.title);
                            $div.append($diary);
                        });
                        $list.remove().append($div.html());
                    },
                    error: onError
                },
                favorite: {
                    url: "/favorite/list",
                    data: {user_id: user.id},
                    contentType: "json",
                    /**
                     * data は以下のような json と仮定
                     * [
                     *   {
                     *     url: "http://www.google.co.jp/",
                     *     title: "Google"
                     *   },
                     *   {
                     *     url: "http://yahoo.co.jp/",
                     *     title: "Yahoo"
                     *   }
                     * ]
                     */
                    success: function(data, dataType) {
                        var $div = $('<div></div>');
                        $.each(data, function(i, favorite) {
                            var $favorite = $favoriteTemplate.clone(true);
                            $favorite.find('a').attr("href", favorite.url).text(favorite.title);
                            $div.append($favorite);
                        });
                        $list.remove().append($div.html());
                    },
                    error: onError
                }
            };
            $content.find(".switch-button").click(function(event) {
                state = state === "diary" ? "favorite" : "diary";
                $.ajax(ajaxOptions[state]);
                $(this).text(buttonNames[state]);
            });

            /**
             * データ取得失敗時のコールバック関数
             * @see http://api.jquery.com/jQuery.ajax/
             */
            function onError(XMLHttpRequest, textStatus, errorThrown) {
                $list.remove().append($("<span>データの取得に失敗</span>"));
            }
        });
    </script>
</head>
<body>
<div id="content">
    <span class="switch-button">お気に入り</span>
    <ul class="list">
        <li><a class="diary diary-template" href="/">投稿日記</a></li>
        <li><a class="favorite favorite-template" href="/">お気に入り</a></li>
        <?php foreach(): ?>
        <li><a class="diary" href="/">投稿日記1</a></li>
        <li><a class="diary" href="/">投稿日記2</a></li>
        <li><a class="diary" href="/">投稿日記3</a></li>
        <li><a class="diary" href="/">投稿日記4</a></li>
        <?php endforeach; ?>
    </ul>
</div>
</body>
</html>

その他の回答(1件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2012/11/15 15:01:22

たとえばjQueryならloadメソッド使うのが簡単でしょう。

ただ、動的に読み込まなくても、両方埋め込んで、表示する方を切り替えるだけでよい気がします。
jQueryならshow, hideメソッドかtoggleメソッドを使います。

匿名回答2号 No.2

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2012/11/17 12:51:13ここでベストアンサー

id:nakedfeelsの回答です。

適当ですけど、ajaxを使うならこんな感じじゃないですか。動かしてないので、このプログラムが動作するかどうか知りませんが。

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $content = $("#content"),
            $list = $content.find(".list"),
            $diaryTemplate = $content.find(".diary-template").removeClass("diary-template").detach(),
            $favoriteTemplate = $content.find(".favorite-template").removeClass("favorite-template").detach(),
            state = "diary",
            buttonNames = {
                diary: "投稿日記",
                favorite: "お気に入り"
            },
            user = {
                id: "a", // なんらかの方法でサーバーからデータを受け取っておく
            },
            ajaxOptions = {
                diary: {
                    url: "/diary/list",
                    data: {user_id: user.id},
                    contentType: "json",
                    /**
                     * data は以下のような json と仮定
                     * [
                     *   {
                     *     url: "http://www.sample.com/hoge/diary/1",
                     *     title: "日記1"
                     *   },
                     *   {
                     *     url: "http://www.sample.com/hoge/diary/2",
                     *     title: "日記2"
                     *   }
                     * ]
                     */
                    success: function(data, dataType) {
                        var $div = $('<div></div>');
                        $.each(data, function(i, diary) {
                            var $diary = $diaryTemplate.clone(true);
                            $diary.find('a').attr("href", diary.url).text(diary.title);
                            $div.append($diary);
                        });
                        $list.remove().append($div.html());
                    },
                    error: onError
                },
                favorite: {
                    url: "/favorite/list",
                    data: {user_id: user.id},
                    contentType: "json",
                    /**
                     * data は以下のような json と仮定
                     * [
                     *   {
                     *     url: "http://www.google.co.jp/",
                     *     title: "Google"
                     *   },
                     *   {
                     *     url: "http://yahoo.co.jp/",
                     *     title: "Yahoo"
                     *   }
                     * ]
                     */
                    success: function(data, dataType) {
                        var $div = $('<div></div>');
                        $.each(data, function(i, favorite) {
                            var $favorite = $favoriteTemplate.clone(true);
                            $favorite.find('a').attr("href", favorite.url).text(favorite.title);
                            $div.append($favorite);
                        });
                        $list.remove().append($div.html());
                    },
                    error: onError
                }
            };
            $content.find(".switch-button").click(function(event) {
                state = state === "diary" ? "favorite" : "diary";
                $.ajax(ajaxOptions[state]);
                $(this).text(buttonNames[state]);
            });

            /**
             * データ取得失敗時のコールバック関数
             * @see http://api.jquery.com/jQuery.ajax/
             */
            function onError(XMLHttpRequest, textStatus, errorThrown) {
                $list.remove().append($("<span>データの取得に失敗</span>"));
            }
        });
    </script>
</head>
<body>
<div id="content">
    <span class="switch-button">お気に入り</span>
    <ul class="list">
        <li><a class="diary diary-template" href="/">投稿日記</a></li>
        <li><a class="favorite favorite-template" href="/">お気に入り</a></li>
        <?php foreach(): ?>
        <li><a class="diary" href="/">投稿日記1</a></li>
        <li><a class="diary" href="/">投稿日記2</a></li>
        <li><a class="diary" href="/">投稿日記3</a></li>
        <li><a class="diary" href="/">投稿日記4</a></li>
        <?php endforeach; ?>
    </ul>
</div>
</body>
</html>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません