人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

foreachとajaxについて

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

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

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


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

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● 匿名回答1号

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

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


2 ● 匿名回答2号
ベストアンサー

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>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ