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

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

ただいまの
回答率

90.35%

  • jQuery

    8754questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    2606questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

お気に入り登録機能を実装したのですが、ここから先がわかりません。。。

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 2,010

atsupoooon

score 38

cakephp2.6

お気に入り機能を実装したと思っています。
●概要●
⑴ユーザがログインして。
⑵お気に入りボタンを押したらボタンが押せなくなり、お気に入り追加完了

処理としてajaxで画面推移なしで、お気に入り追加しましたの表示をさせる

Favoritesのテーブル構成
id
user_id
post_id

になります。

今現状で、お気に入り登録ボタンを押して、
ajaxでFavorites内にデータは、格納できました。
お気に入り登録が完了しましたの表示もでます。

ここから、ボタンを押しているものは、ボタンが押せないの
判定がいると思いますが、これをどのように実装するかわかりません。

調べるとjqueryで実装する必要があるようなないような。

view

<?php
                    echo $this->Form->create('favorite', 
                        array('controller' => 'favorites','type'=>'post')); 
                    echo $this->Form->input('Favorite.user_id', array(
                        'type'=>'hidden',
                        'value' => $userdata['id']
                        ));
                    echo $this->Form->input('Favorite.post_id', array(
                        'type'=>'hidden',
                        'value'=>$post['Post']['id'])
                    );
                    echo $this->Js->submit('Favorite', array(
                        'before'  => $this->Js->get('#favo-js-submit')->effect('fadeIn'),  // => beforeSend (Local Event)
                        'success' => $this->Js->get('#favo-js-submit')->effect('fadeOut'), // => success (Local Event)
                        'url' => '../favorites/favo_btn',           // Ajax処理で呼び出すURL(controller/action)
                        'update' => '#favo-js-submit', // ajax更新の結果を出力する要素
                    ));
                    echo $this->Form->end();
                    echo $this->Js->writeBuffer();
                ?>

                <div id="favo-js-submit"></div>
                <div id="favo-js-submit"></div>

favoriteのコントローラー

//お気に入り登録機能
    public function favo_btn(){

        // Ajax or not
        if (!$this->request->is('ajax')){
            $this->redirect( '/js_submit_form');
        }
        // save OK
        if ($this->Favorite->save($this->data)) {
            $this->render( '/Elements/Ajaxs/favoajaxupdated','ajax');

        // save NG
        } else {
            $this->set('valerror', $this->Favorite->validationErrors);
            $this->render( '/Elements/Ajaxs/favoajaxupdated','ajax');
        }
    }

以上になります。

宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

お気に入りボタンを押した場合と、
すでにお気に入り済みでページを開いた場合とで2パターン必要かと思いましたので、
そのように書いています。
$isFavoはControllerから渡したり他の条件に置き換えてください。

// id=favo_buttonのdisabledを有効にするjs
$js_disabled = '$("#favo_button").attr("disabled", "disabled");';

// すでにお気に入り済みならdisabledを有効に
$attr = array();
if($isFavo) $attr = array('disabled' => true);

// ボタン作成
echo $this->Js->submit(  'Favorite'
                       , array(  'id' => 'favo_button' // ボタンのidをfavo_buttonに
                               , 'htmlAttributes' => $attr
                               , 'before'  => $this->Js->get('#favo-js-submit')->effect('fadeIn')
                               , 'success' => $this->Js->get('#favo-js-submit')->effect('fadeOut').$js_disabled // ajax成功時にこのボタンを押せなくする
                               , 'url' => '../frees/favo_btn'
                               , 'update' => '#favo-js-submit'));

と、ここまで書いてて思ったのですが、お気に入りの解除があるのであればdisabledにしちゃダメなのかな。

2016/02/23 お気に入り解除に関する追記

(2016/02/24 <?php?>でくくりました。)

<?php
// View側

// id=favo_buttonの文言を変更するjs
$js_favo_change = '
    if($("#favo_button").attr("value") == "お気に入り登録"){
        $("#favo_button").attr("value", "お気に入り解除");
    }else{
        $("#favo_button").attr("value", "お気に入り登録");
    }
';

// ボタンの文言を設定
if(!$isFavo){
    $caption = 'お気に入り登録';
}else{
    $caption = 'お気に入り解除';
}

// ボタン作成
echo $this->Js->submit(  $caption
                       , array(  'id' => 'favo_button' // ボタンのidをfavo_buttonに
                               , 'before'  => $this->Js->get('#favo-js-submit')->effect('fadeIn')
                               , 'success' => $this->Js->get('#favo-js-submit')->effect('fadeOut').$js_favo_change // ajax成功時に文言を切り替える
                               , 'url' => '../frees/favo_btn'
                               , 'update' => '#favo-js-submit'));
?>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/02/25 06:26

    回答ありがとうございます。
    回答ありがとうございます。
    そういことだったのですね!
    完全にjsと認識していました。。。

    問題なくいけました。

    あとは、これで解除した時にDBのから指定の情報を削除するロジックを
    書けば問題ないですよね。

    頑張って書いています!!

    あと、1つお伺いしたいのですが、
    d_s_1 さんが
    「他にはページを開いた時にajaxでボタンの状態を取得設定するようなロジックも考えられます。」
    とおっしゃていたボタンの状態を取得するロジックとは、
    こういうことなのでしょうか。

    view1は、お気に入り登録済み → ボタンの文字:登録済み
    view2は、お気に入り未登録 → ボタンの文字:未登録

    ということなのでしょうか?




    キャンセル

  • 2016/02/25 10:34 編集

    動いたようで良かったです。
    引き続き頑張ってください!

    >ボタンの状態を取得するロジック
    そのようにView1,View2を用意してボタンを変更するのも勿論アリですが、
    私が想定していた手法とは別でした。

    質問のJSHelperを用いたajaxは、actionを通過して得たViewを、指定した箇所へ嵌めこむ機能です。
    これを用いずに、例えば引数にIDを指定して呼び出すと、そのIDがお気に入り登録されているかどうかをJSON形式で返すAPIを用意します。

    // 例。指定IDのお気に入り状態を返す
    function is_favo($id=null){
     $this->autoLayout = false;
     $this->autoRender = false;
     if($this->Favo->isFavo($id)){
      echo json_encode(array('is_favo' => 1));
     }else{
      echo json_encode(array('is_favo' => 0));
     }
    }

    あとはこのAPIを叩いて、ボタンの文言を変えたり、画像を変えたりするだけです。

    <script>
    <!--
     // お気に入りの状態に合わせてボタンの文言を変更
     function change_favo(){
      $.getJSON('http://lvh.me/favos/is_favo/1?time&#039; + new Date() / 1000,
       function(data, status){
        if(data.is_favo == 1){
         $('.favo_button').attr('value', "お気に入り解除");
        }else{
         $('.favo_button').attr('value', "お気に入り登録");
        }
       }
      );
     }
     // ページ読み込み完了時にchange_favo
     $(document).ready(
      function(){
       change_favo();
      }
     );
    -->
    </script>

    動作の確認はしてません。なんとなくの処理の流れが分かってもらえれば。
    この手法であればJSHelperのViewを取得するより、データの通信量が大きくならないです。
    とはいえ微々たるものではあるので、仕様や大人の事情と相談しまして、
    どの手法を取るのか選択すると良いかと思います。

    キャンセル

  • 2016/02/27 00:10

    コメントありがとうございます!!
    早速実装してみます!

    いろいろ質問に答えていただき誠にありがとうございます。
    大変勉強になります。

    また、なにかお伺いするかと思いますが、宜しくお願い致します。

    キャンセル

0

// idがfav_btnの要素を無効にする
$('#fav_btn').attr('disabled',true);

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/02/22 00:01

    コメントありがとうございます。

    jqueryの処理のところより、まずajaxでの処理方法がわかりません。
    jqueryのみで可能なのでしょうか。

    キャンセル

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

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

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

  • jQuery

    8754questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    2606questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。