質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

Ajaxによるすでに表示されているPHP内容の変更

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 313

YutaNkai

score -68

題名の通りですが非常に苦戦しております。作成しているのはホテルの予約サイトで,現段階では閲覧までです。

★実現したい機能★
既に画面に表示されているホテルの内容をAjaxとJqueryを使用し変更する(ページ読込みなし)
値段が高い順で表示されているのを低い順でクリックでソート

★問題★
この時どのようにHTML内に上手く値を入れるかわかりません。全てをemptyにして入れるのでしょうか。しかしemptyにすると複数作成することができませんし、クローンにするとHTMLが変更になるたびに変更しなければならないきがします。ヒントだけでもお願いします。

サンプルコードを用意しました。

<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <style media="screen">
    #push {
      background-color: lightblue;
      color: #fff;
      cursor: pointer;
    }

    .hotel {
      border: solid 1px #808080;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>これはJSのサンプルです</h1>
  <span id="push">ここを押してください</span>
  <h4>ホテルが表示されます</h4>
  <div class="hotels">
    <div class="hotel">
      <h1 class="name">デフォルトホテル1</h1>
      <p class="price">デフォルトプライス300</p>
      <p class="img">デフォルト画像</p>
      <div class="tags">
        <span class="tag">デフォルトタグ</span>
      </div>
    </div>
    <div class="hotel">
      <h1 class="name">デフォルトホテル2</h1>
      <p class="price">デフォルトプライス200</p>
      <p class="img">デフォルト画像</p>
      <div class="tags">
        <span class="tag">デフォルトタグ</span>
      </div>
    </div>
    <div class="hotel">
      <h1 class="name">デフォルトホテル3</h1>
      <p class="price">デフォルトプライス100</p>
      <p class="img">デフォルト画像</p>
      <div class="tags">
        <span class="tag">デフォルトタグ</span>
      </div>
    </div>
  </div>
</body>
<script>
  $(function() {
    $('#push').on('click', function() {
      // ajax処理
      $.post('sampleAjax.php', {
        //データは何も送らない
      }, function(reslut) {
        //配列が返ってくる(動作確認済)
        console.log(reslut);
      });
      return false;
    });
  });
</script>
</html>
<?php

//以下の配列はDBから取得したものであると仮定する。

//ホテルの基本情報(値段でソートした設定)
$hotels = array(
  array('hotel_id' => '1', 'country_code'=>'PHL', 'hotel_name'=>'SARROSAホテル', 'hotel_address'=>'セブ シティ, セブ', 'hotel_tel'=>'12345', 'price'=>'30'),
  array('hotel_id' => '2', 'country_code'=>'PHL', 'hotel_name'=>'SPAホテル', 'hotel_address'=>'セブ シティ, セブ', 'hotel_tel'=>'12345', 'price'=>'40'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'hotel_name'=>'MATTHERホテル', 'hotel_address'=>'セブ シティ, セブ', 'hotel_tel'=>'12345', 'price'=>'50')
);
//$hotelsに含まれているそれぞれのホテルの画像(DBの設定によりホテルの数と必ず一致する。今回はホテルが3つなのでこちらも同じ)
$pics = array(
  array('hotel_id' => '1', 'country_code'=>'PHL', 'pic'=>'hotel_idが1の画像です'),
  array('hotel_id' => '2', 'country_code'=>'PHL', 'pic'=>'hotel_idが2の画像です'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'pic'=>'hotel_idが3の画像です'),
);
//ホテル側が自由に複数持つことができるタグ。
$tags = array(
  array('hotel_id' => '1', 'country_code'=>'PHL', 'tag'=>'無料Wi-Fi'),
  array('hotel_id' => '1', 'country_code'=>'PHL', 'tag'=>'後日支払い可'),
  array('hotel_id' => '1', 'country_code'=>'PHL', 'tag'=>'宿泊施設へ直接支払い'),
  array('hotel_id' => '2', 'country_code'=>'PHL', 'tag'=>'キャンセル無料'),
  array('hotel_id' => '2', 'country_code'=>'PHL', 'tag'=>'無料Wi-Fi'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'無料Wi-Fi'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'後日支払い可'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'宿泊施設へ直接支払い'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'朝食付き'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'キャンセル無料'),
);
/*
表示に関して
HTML .hotel .nameクラスは $hotelsのhotel_name
HTML .hotel .priceクラスは $hotelsのhotel_price
HTML .hotel .imgクラスは $$picsのpic
HTML .tags .tagクラスは $tagsのtag
*/
$allOfHotelsInfo = array($hotels,$pics,$tags);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json');
    echo json_encode($allOfHotelsInfo);
    exit;
}

完成画像イメージ
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2019/02/11 22:10

    前に言った気がするけど h1 タグはタイトルと同じレベルなので 複数書くのはいかがなものかと。

    h1の次にh4がきてるのも google的にマイナス配点

    キャンセル

  • 退会済みユーザー

    2019/02/20 01:20

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

+1

ざっくりと説明すると、
phpによって出力されたhtmlなのだから、
htmlのDOM操作になるので、
phpでで出力制御されるhtmlにおいて
タグにclassだのidだのをもたせて、
jsとかjQueryとかから操作します。

Selectors - jQuery 日本語リファレンス
こういうのを駆使できるようにidとかclassとか持たせたhtmlを出力します。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/11 20:53

    ありがとうございます。それは考えておりました。
    しかし、仮に今回のサンプルコードの.hotelのクラスにidが入っていたとしても、並び替えのためどのようにした操作するかわかりません。簡単なサンプルコードをお示しいただけませんか。

    キャンセル

  • 2019/02/11 22:23

    js(jQuery)上で並べ替えをするためには、
    js上に並べ替えに必要なデータを持たせるのが王道かもしれません。
    phpによる出力ではjsに引き渡す、div class=hotelのブロックを構成する必要なデータを
    jsonにまとめて持たせつつ、
    並べ替えの際には一旦div class=hotelsの内側htmlを除去して
    json上のデータを頼りにjQueryからhtmlをdiv class=hotelsの内側に出力するような感じです。
    Manipulation - jQuery 日本語リファレンス http://semooh.jp/jquery/api/manipulation/
    empty()でカラにして、
    append()で内側に足していく、もしくは
    replaceWith()が使えれば一発で挿げ替えできるはず。
    (jQuery習得中なので、自信なし。)

    キャンセル

  • 2019/02/12 01:30

    ありがとうございます。
    中々私には難しそうなので、jaxを使用しページ遷移を行うことにします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る