常連

自己紹介

予定を表示するカレンダーをつくっているのですが、予定の部分をjsonから読み取る仕様にしたいと思っています。

下記jsonです。
```json
                                                          
   {"res":                                                 
       {"ScheduleData":[
           {                                               
               "id":"0001",                                
               "title":"サンプル01",                       
               "day":[                                     
                   {                                       
                       "year":"2018",                      
                      "month":"03",                       
                      "_day":"31"                         
                  }                                       
              ],                                          
              "appoint_1":"単体テスト",                   
              "appoint_2":"javascript勉強会",                  
              "appoint_3":"新規プロジェクトキックオフ",           
          },  
          {
              "id":"0002",
              "title":"サンプル02",
              "day":[
                  {
                      "year":"2018",
                      "month":"04",
                      "_day":"01"
                  }   
              ],  
              "appoint_1":"会議",
              "appoint_2":"要件定義",
              "appoint_3":"ログ収集機能改修",
          }
      ]}
  }

```

```php
    private function _getTail() {                         
                                                          
      $url = "jsondata.json";                             
      $json = file_get_contents($url);                    
      $arr = json_decode($json, true);                    
                                                          
                                                          
      $tail = '';                                         
      $lastDayOfPrevMonth = new \DateTime('last day of ' . $this->yearMonth . ' -1 month');
      while ($lastDayOfPrevMonth->format('w') < 6) {
        $tail_pre = sprintf('<td class="gray">%d', $lastDayOfPrevMonth->format('d'));
        
          $tail_appoint_1 = sprintf('<ul><li>%s</li>', $arr["res"]["ScheduleData"][0]["appoint_1"]);   ←※１
          $tail_appoint_2 = sprintf('<li>%s</li></td>', $arr["res"]["ScheduleData"][0]["appoint_2"]);
          $tail = $tail_pre . $tail_appoint_1 . $tail_appoint_2 . $tail;
          
        $lastDayOfPrevMonth->sub(new \DateInterval('P1D'));
      } 
      return $tail;
    } 

```
上記のphpの※１のところをforeachで回してid:0001とid:0002もそしてさらに増えても取得してカレンダーに表示できるようにしたいのですが、どのように書き換えるべきでしょうか。

jsonデータをforeachで読みたい

### 前提・実現したいこと

現在、PHP+Ajax(jQuery)で、slackライクなインターフェースの掲示板を作成しようとしています。
この掲示板ではコメント入力の他に、悪質なコメントがあれば、一般のユーザーが該当コメントを任意で個々に非表示できる仕組みを持つ形です。

ここで[nifty modal window effects](https://tympanus.net/Development/ModalWindowEffects/)というモーダルウインドウのアニメーションjsがあったので、これを導入し、コメント入力前の確認画面と、非表示操作前の確認画面をモーダル画面でアニメーション表示しようと考えています。

大雑把な画面構成としては、「１．既に入力されたコメントの表示部」を上段、「２．コメントの入力部（テキストエリアとボタン）」を下段に配置しています。

ここにモーダルウインドウのアクションをつけます。
１．コメント表示部の各コメントの脇に「✕非表示」と言うリンクをつける。
非表示にする際、ユーザーにこのリンクをクリックしてもらい、リンククリック時にjQueryでイベントハンドリングして、非表示確認用のダイアログを出す。
２．コメント入力部にSubmitボタンをつける。
このSubmitボタンクリック時にjQuery側でイベントハンドリングをし、コメントの入力内容の事前確認ダイアログを出す。

実装してみたところ、上記の１，２ともに、個々の操作では、上手く動いています。

なお、コメントを入力→Submitボタンクリック→確認モーダルで確認ボタンクリックでコメントを書き込んだあと、jQueryのload機能で、画面更新なしでコメント一覧を、表示されているコメントを、新しく読み込んだコメントに全部置き換える方式で更新しています。

コメント送信機能、更新表示機能ともに、正常に動作しています。

### 発生している問題・エラーメッセージ

上記のコメント入力・コメント非表示のそれぞれ単独同士の動きだと上手く動きます（非表示リンククリックも、コメントSubmitボタンクリックも、アニメーションでモーダルウィンドウが起動する）。
ただ、コメントを入力した後に、別のコメントを非表示にしようとすると、イベントを拾ってくれず、アニメーションのモーダルウィンドウが起動しません。

※エラーメッセージはありません。

### 該当のソースコード
コメント投稿とコメント取得・表示部：
```javascript
$(document).ready(function(){

  $('#btnSendComment').click(function(){
    CommentsendData();
    $('textarea').val("");
  });
});
function CommentsendData() {
  $.post(
    'post_Comment.php',
    {
      'txtaComment': $('textarea[name="txtaComment"]').val(),
    },
    function(data){
      CommentgetData();
    }
  );
}
function CommentgetData() {
  $("#commentZone").load("get_Comment.php" , {bid:"123",bpage:"1"});
  $('#commentZone').show();
}

```

ModalEffects 本体：
```javascript
var ModalEffects = (function() {
  function init() {
    var overlay = document.querySelector('.md-overlay');
    [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el,i){
      var modal = document.querySelector('#' + el.getAttribute('data-modal')),
      close = modal.querySelector('.md-close');

      function removeModal( hasPerspective ) {
        classie.remove( modal, 'md-show' );
        if( hasPerspective ) {
          classie.remove( document.documentElement, 'md-perspective' );
        }
      }

      function removeModalHandler() {
        removeModal( classie.has( el, 'md-setperspective' ) ); 
      }

      el.addEventListener( 'click', function( ev ) {
        classie.add( modal, 'md-show' );
        overlay.removeEventListener( 'click', removeModalHandler );
        overlay.addEventListener( 'click', removeModalHandler );
        if( classie.has( el, 'md-setperspective' ) ) {
          setTimeout( function() {
            classie.add( document.documentElement, 'md-perspective' );
          }, 25 );
        }
      });

      close.addEventListener( 'click', function( ev ) {
        ev.stopPropagation();
        removeModalHandler();
      });
    } );
  }
  init();
})();
```

### 試したこと

相談する前に代替策を実施しておくべきなのですが、既に手詰まりのため試行できることが実施できておりません。

### 補足情報（FW/ツールのバージョンなど）

今立てている作業仮説としては、導入した「nifty modal window effects」が、
el.addEventListener( 'click', function( ev )
などでクリックイベントを拾っており、
$(div_name).load("load.php",load_param);
でひょっとしたら[コメント入力後に対象DOM要素が書き換わると、addEventListenerで指定したものを拾わなくなるのではないか](http://www.finefinefine.jp/jquery/kiji2117/)ということです。

これの解決法として、
$("div").click(function() {
↓
$(document).on('click', 'div', function() {
があるのですが、
対象のModalEffects内では、イベントリスナーにaddEventListenerで二回イベントを加えているので、$(document).onの形式にすると最後に適用したものだけが反映されてしまうのでＮＧだと考えています。

PHP+Ajaxで外部のモーダルウインドウjsを導入→jQueryのload後に動かない

現在htmlでFORMをつかったPOST通信を使っています
入力フォームを作るにあたり、記入されているか確認するためにjavascriptを使ってみました。
いかにコードを入れます
```html
<FORM name="formChecker" METHOD="post" ACTION="accept.php">
        テキスト入力場所
	<TEXTAREA NAME="mess" ROWS="10" COLS="70"></TEXTAREA>
	<input type="button" value="送信" onClick="check()">
</FORM>
	
	<script type="text/javascript">
function check() {
		var rcheck1 = document.formChecker.mess.value;
	if (rcheck1) { //tureの場合
		document.location = "accept.php"; //リンク先を呼び出す
	} else { //falseの場合
		alert("記入漏れがあります"); //アラートを表示する
	}
}
</script>
```
いろいろ試したところPOST通信しているつもりが送信が何もされていないみたいで、その原因を探しています。
もしかしてcheck()のところに送信するための何かを作らないといけないのでしょうか
なにとぞよろしくお願いします

POST通信とjavascript

###目的
wordpressの投稿本文から、改行と特殊文字だけ残して、HTMLタグなどはエスケープさせたいです。

※ただし、下記Cにあるように、<br>を入力しての改行ではなく、エンターキーを押したときの改行を残したいです。

###ダメだったコードA
↓改行は残りませんでした。
```php
<div class="honbun">
	<?php
	$content = strip_tags(strip_shortcodes(get_the_content('')));
	echo $content;?>
</div>

```
###ダメだったコードB
↓何も出力してくれませんでした。
```php
<div class="honbun">
<?php
$content = get_the_content();		
$content = wp_strip_all_tags( $content );				
$content = remove_shortcode( $content );				
echo $content;?>
</div>
```
###ダメだったコードC
↓改行は残るが、投稿時に<br>を入力しなければならず、エンターを押すだけの改行は残りませんでした。
```php
<div class="honbun">
<?php
echo strip_tags(apply_filters('the_content', $post->post_content), '<br>');
?>
</div>
```

改行を残すHTMLエスケープ

はじめまして、node初心者のものです。
今、顧客マスターを作成してます。
mysqlからデータ取得し、格納しselectタグで
選択時、ajaxでデータをpost送信しそれを
また返して表示としたいのですが、うまくいきません。

js側
// nodeのコアモジュールのhttpを使う
var http = require('http');
var ejs  = require('ejs');
var qs   = require('querystring');
var fs     = require('fs');
var config = require('./config');
var server = http.createServer();
var path = require('path');
const bodyParser = require('body-parser');
var express  = require('express');
const app = express();

//mysqlに接続
var connection   = require('./mysqlConnection');

var nitta = [];

my_sql = ""
my_sql = "select CST_CD, CST_NAME from users ;"

//接続します
connection.connect();

var query = connection.query(my_sql);

//イベント発生
query
  //エラー用
  .on('error', function(err) {
    console.log('err is: ', err );
  })
  //結果用
  .on('result', function(rows) {	
	console.log(rows);
	
	nitta.push(rows);	
  })
//終了
  .on('end', function() {
    console.log('end');
    connection.destroy(); //終了
  });


//urlencodedとjsonは別々に初期化する
app.use(bodyParser.urlencoded({
    extended: true
}));

app.use(bodyParser.json());

// ejsを使用するための設定
app.set('views',  __dirname + "\Views\");
app.set('view engine', 'ejs');

app.get('/', function(req, res) {
     //ejs テンプレートエンジンでレンダリング
    res.render('index.ejs', {
          message : nitta	  	    
     });
});

//2018.03.13追記
app.get('/', function (req, res) {
    res.sendFile(__dirname + '\Views\reset.css');
});

app.use(function(req, res, next){
    res.header("Access-Control-Allow-Origin","*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
})

//postデータ受信
app.post('/',function(req, res){
    var obj = {}; 
    console.log('body: ' + JSON.stringify(req.body.name));
    var rejson = JSON.stringify(req.body);
    res.send(rejson);
    //ここへmysql接続処理？	
});

app.listen(8124, '127.0.0.1');

*********************************
ejs側

<html>
  <head ng-app = "myApp">
    <link href="C:\Program Files\webserver\Test2\Views\reset2.css" rel="stylesheet" type="text/css">
    
    <script src="//code.angularjs.org/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

    <script>

	$(function() {

    		$('#selectCst').change(function() {		

			var str = $('#selectCst option:selected').text();
			
			
			alert(str);

        		$.ajax({
          		　　async: false,
              		　　url: 'http://localhost:8124',
          		　　type: 'post',
		 //↓挿入したいデータ(mysqlでのカラム:CST_NAME)
          		　　data:{"name": str },
          		　　dataType: 'json'
                	}).done(function(res){

                 	　　	console.debug(res);

                	}).fail(function(xhr, status, error){
                   	　　alert(status);
                	});   			


			
    		});


	});


    </script>	    

    <title>customer</title>
  </head>
  <body>
    Customer_Master
    <div id="customerDisplay"></div>
    <div id="sqlDisplay"></div>

    <form id="form1" action="/" method="post">
	<select id="selectCst">
		<option value= "0" >Please select!!</option>
		<% message.forEach(function(messageItem) { %>
        	<option value = "<%= messageItem.CST_CD %>"><%= messageItem.CST_NAME %></option>
    		<% }); %>
	</select>	
      <p>
        <input type="button" name="btnInsert" id="btnInsert" value="add">
        <input type="button" name="btnUpdate" id="btnUpdate" value="update">
        <input type="button" name="btnDelete" id="btnDelete" value="delete">
　　//↓↓mysqlからの返信データをこちらに差し込みたい
      </p>
      CST_CD:<input type="text" name= "txtCstCd" id="txtCstCd">
      <a href="" name="linkMaxCd" id="linkMaxCd">Max</a>　<br />
      CST_NAME:<input type="text" name= "txtCstName" id="txtCstName"><br />
      TOWN_CD:<input type="text" name= "txtTownCd" id="txtTownCd"><br />
      ADDRESS:<input type="text" name= "txtAddress" id="txtAddress"><br />
      TEL:<input type="text" name= "txtTel" id="txtTel"><br />
      BIRTH:<input type="text" name= "txtBirth" id="txtBirth"><br />
      SEX_CD:<input type="text" name= "txtSexCd" id="txtSexCd">
    </form>
	
  </body>
</html>

DBからのデータを受信したい。

### 前提・実現したいこと

jQueryを用いて
「チェックボックスにチェックされたらdivで囲まれた部分を開く。また、チェックボックスはCSSを用いて隠し、
上にlabelタグを用いてその中の文字列と共に四角い枠にする」
というものを作ろうとしています。

### 発生している問題・エラーメッセージ
Google Chromeの検証を見るとエラーは出ておらず、チェックボックス隠蔽とlabelタグの部分は問題ありませんが、
チェックをしてもdivで囲まれた部分が表示されません。
また、下記のコードでは全ての四角の枠が重なり合います。
尚、チェックをしたか否かはjQueryで確認し、Google Chromeの検証を用いてチェックをしたかは確認してあります。
また、CSSとJavascriptのソースはPHPファイルに埋め込んであります。
### 該当のソースコード

```Js
$(funtion(){
	var prop= $('.survey').prop('checked');
	$('.hidden_show').css('display', 'none');
	if(prop){
		$('.hidden_show').show(120);
		}

});
```
```HTML
    <p><label for="label1" class="survey_l">属性</label>
    <input type="checkbox" id="label1" class="survey"></p>
    <div class="hidden_show">

</div>

```
```CSS
<style type="text/css">
.survey_l{
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

/*チェックは見えなくする*/
 .survey {
    display: none;
}

/*中身を非表示にしておく*/
  .hidden_show {
    display: none;
/*     height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;  */
}  
```

### 試したこと
CSSの最後の部分のdisplay:none;を消してコメントアウトを解除すると四角の枠が重なりませんが状況は変わりませんでした。
また、Javascriptの変数propをチェックボックスのidにしましたがそれでも状況は変わりませんでした。


### 補足情報（FW/ツールのバージョンなど）

jQuery:3.2.0
jQueryはheadタグの中で既に読み込んでおり、パスも正しいです。

JQueryによる表示非表示に関して

## 質問内容

　皆さま、こんにちわ。私は今以下の様な条件で検索できるSQL分はないかと探しています。

```
table: estate

{
  id: 1,
  name: サンプル建設
},
{
  id: 2,
  name: サンプル不動産
}

table: tags
{
  id: 1,
  tag: 神奈川県,
  estate_id: 1
},
{
  id: 2,
  tag:ペット可,
  estate_id: 1
},
{
  id: 3,
  tag:　東京都,
  estate_id: 2
}
```

この様なテーブル構造で「神奈川県タグとペット可タグをもつ不動産」を検索できるSQL文はないでしょうか？皆様のお知恵をお借りできれば幸いです。

また、質問者自身RDBに詳しくないのでテーブル構造がそもそもまずいということもあると思います。ですのでもっと良いテーブル構造があればご教授いただければ幸いです。よろしくお願いします。