foundationのmodalで、Ajaxを用いた値の受け渡し(php,javascript)

今回、htmlでラジオボックスで選択された場所に応じてmodalのフォームでphpのデータをJavaScriptに渡してjQueryでtextのvalue属性に値を代入するということをしました。

まず、元のページの一部(index.php)を示します。

<form action="./json.php" method="POST" id="modal">
　<div class="row">
　　<div class="large-12 columns">
　　　<table>
　　　　<thead>
　　　　　<tr>
　　　　　　<th>変更</th>
　　　　　　<th width="100">ID</th>
　　　　　　<th width="200">商品名</th>
　　　　　　<th width="100">値段</th>
　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　<?php 
　　　　　//DBからデータを取得し表示
　　　　　foreach($dbdata as $k => $val){
　　　　　　echo "<tr>";
　　　　　　echo "<td><input type='radio' name='radio' value='{$k}'></td>";
　　　　　　foreach($val as $key => $value){
　　　　　　　echo "<td>".$value."</td>";
　　　　　　}
　　　　 　 echo "</tr>";
　　　　　}
     　 ?>
　　　　</tbody>
　　　</table>
　　</div>
　</div>
　<!-- 変更のTrigger -->
　<div class="row">
　　<div class="large-12 columns">
　　　<input type="submit" class="button info" value="変更">
　　</div>
　</div>
</form>
<!-- 変更のModalの内容 -->
<div id="hoge" class="reveal-modal" data-reveal aria-labelledby="hogetitle" aria-hidden="true" role="dialog">
　<div class="row">
　　<div class="large-12 columns">
　　　<h1 id="hogetitle">変更</h1>
　　<div>
　</div>
　<!-- form -->
　<form action="" method="POST" data-abide>
    <div class="row">
      <div class="large-12 columns">
	 <label>
	    ID
	    <input type="text" name="p_id" id="p_id" value="" readonly>
         </label>
      </div>
    </div>
　　<div class="row">
　　　<div class="large-12 columns">
　　　　<label>商品名
　　　　　<input type="text" name="name" id="name" value="" required>
　　　　</label>
　　　</div>
　　</div>
　　<div class="row">
　　　<div class="large-12 columns">
　　　　<div class="row collapse">
　　　　　<label>価格</label>
　　　　　<div class="large-8 small-8 columns">
　　　　　　<input type="text" name="price" id="price" value="" required>
　　　　　</div>
　　　　</div>
　　　</div>
　　</div>
　　<div class="row">
　　　<div class="large-12 columns">
　　　　<label>
　　　　　<input type="submit" class="button expand" name="submit" value="変更">
　　　　</label>
　　　</div>
　　</div>
　</form>
　<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

今回Modalウィンドウを開くときのボタンを押した場合、ページはリロードされないので、非同期処理Ajaxを用いて値を渡す必要がある。
ラジオボックスが選ばれてsubmitされた場合Modalウィンドウを開くようにしている。
modal.jsを示す。

$(function(){
    $('#modal').submit(function(event){
        event.preventDefault();
        var f = $(this);
        $.ajax({
            url: f.prop('action'),
            type: f.prop('method'),
            data: f.serialize(),
            timeout: 10000,
            dataType: 'json'
        })
        .done(function( data ) {
            // 通信が成功したときの処理
			$('#hoge').foundation('reveal', 'open');
			var radio_id = parseInt(data[0]) + 1;
			$('#p_id').val(data[radio_id]["id"]);
			$('#name').val(data[radio_id]["name"]);
			$('#price').val(data[radio_id]["price"]);
        })
        .fail(function( data ) {
            // 通信が失敗したときの処理
        })
        .always(function( data ) {
            // 通信が完了したとき
        });
    });
});

ここで、modal.jsの説明をする。
f.prop('action')は、formタグのaction属性からURLを受け取り、Ajaxのurlにセットしている。
これは、urlからデータを受け取るということを意味している。
次に、CSSフレームワークのfoundationのmodalのページに、jQueryを用いてmodalウィンドウを開くやり方が表記されている。
それによると、
$('#hoge').foundation('reveal', 'open');
で、開くことが出来るため、json.phpから値を受け取った時だけmodalを開くようにしている。
後は、適当に好きなように書いてください(笑)

次に、非同期で値を渡す先であるjson.phpを示す。

<?php
	/*
	DB接続,切断 insert,fetch,deleteの機能がsql.phpに備わっている。
	*/
	require_once("../sql.php");
	$conn = new MySQL("","","","");
	if(isset($_POST["radio"])){	
		$radio = $_POST["radio"];
		//今テーブルhogeに登録されてるデータ
		$query = "select * from hoge;";
		$row = $conn->fetch($query);
		array_unshift($row,$radio);
		$json_data = json_encode($row);
		echo trim($json_data);
	}
?>

json.phpでは、受け取ったラジオボタンの位置を受け取り、受け取ったデータとDBからのクエリの結果を連結してAjaxの.doneにデータを受け渡すものである。
ここでsql.phpは著者が適当に作成したMySQLの操作のためのクラスなので、適当に受け流してください。
json.phpでラジオボタンの場所、DBに入っていたデータを表示している。
Ajaxは、表示しているデータをjsonで受け取り、処理を行っている。

とりあえず、こんな感じです。

参照は、いろいろだけどここらかな
foundation.zurb.com
chaika.hatenablog.com