初めて質問させていただきます。
php・jQuery・SQLを勉強し始めて3ヶ月の初心者です。
データベースの情報をWebブラウザで見れるためのプログラムをphpとjQueryで作成しています。
日別の情報を見るページに「今日」「前日」「翌日」を3つのボタンを作成し、
ボタンが押されたらajaxを利用して、
それぞれの日のデータを同一ページ内に入れ替わり表示しています。
構成例:
home.php(メインページ)
post.php(ajaxでhome.php内に表示するページ)
jquery.common.js(scriptをまとめたページ)
やりたいこと:
見ている日付によってボタンを無効にしたい
例)日付が今日の場合
前日ボタン(有効)
今日ボタン(有効)
翌日ボタン(無効)
問題:
1)翌日ボタンを無効にしようと、クリックイベントを指定している要素のclass(この場合:send)を$('#dateNext').removeClass('send')
で削除しても、翌日ボタンをクリックするとイベントが発生しpostしてしまう。
※Chromeのデベロッパーツールで削除を確認。
2)そして、ブラウザの更新ボタンを押すと、クリックイベントが発生しなくなり翌日ボタンが無効になる。
ググった結果、非同期通信の場合、入れ替え部分のclassを削除しても、home.php
に記述している元のscriptはリロードするまで削除を知らないと考えたのですが…。
リロードせずにボタンを無効にする方法はあるのでしょうか。
初心者ですが、考え方、ヒントなどご教授いただければ幸いです。
###該当のソースコード
php
1<!--home.php--> 2 3<div class="btnGroup"> 4 <button type="button" id="datePre" class="send" value="datePre">前日</button> 5 <button type="button" id="dateNow" class="send" value="dateNow">今日</button> 6 <button type="button" id="dateNext" class="send" value="dateNext">翌日</button> 7</div><!-- / .btnGroup--> 8<div id="ajax"> 9~post.phpの内容を表示~ 10</div> 11<script> 12//クリックイベント 13 $(function() 14 { 15 $('.send').on('click',{url :"post.php"},ajaxPost); 16 }); 17</script>
//jquery.common.js function ajaxPost(event) { ~処理~ $.ajax({~処理~}) .done(function(data)( { ~処理~ //ボタン無効関数呼び出し $(function() { dateNavAreaCtrl(date); }); }) .fail(function(data)({~処理~}); } //ボタン無効関数 function dateNavAreaCtrl(getDate) { if(今日の日付だったら) { //翌日ボタンを無効 $("#dateNext").removeClass("send"); } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/08 00:45