Q&A
おはようございます、HTMLはそのまま貼ると見づらいのでコードタグで囲んでくださいね、編集画面の上にある＜／＞というボタンです。
以前請求書処理の質問をさせていただいたものです。
結果形は纏まったのですが、他にも似たような処理をするページもあり、色々と調べて実行してみたのですが、知識不足が故にわからない点がいくつかあり、質問させていただきます。
処理の流れとして、
・モーダルウィンドウを開き、MySQLから取得した顧客データを一覧表示
・選択した顧客データを各[会社名][郵便番号][住所]フォームに出力
（選択ボタンを押すとモーダルウインドウは閉じる）
という動作をさせたいです。
モーダルウインドウを開き顧客情報一覧を表示させるところまではできたのですが、
選択ボタンを押してからモーダルウインドウを閉じ情報をフォームに出力する、スクリプトの記述の仕方がわかりません。
以前の質問で教えて頂いたあるサイトを参照し、
$(function() {
$("#sentaku").click(function(){
$.ajax({
type: "POST",
url: "ajax.php",
data: {
"output":
},
success: function(j_data){
// 処理を記述
}
});
});
});
http://raining.bear-life.com/jquery/ajax%e3%82%92%e4%bd%bf%e7%94%a8...
とありますが、顧客情報一覧はwhile文で1行ごとに出力しているため、選択のリンクもhref="ajax.php?id='$row=['顧客ID']'" となるかと思いますが、この記述の仕方がどうしていいかわからないのと、フォームに出力するやり方（以前教えて頂いたサイトを参照したり、調べてみたりしたのですが、上手くいかず...）を教えて頂きたいのです。
フォームデータとモーダルウインドウ部分のソースコードを記載しておきます。
フォーム部
<form action = "kakunin.php" method="post"> <table><tr><th>会社名:</th><td><input type="text" name="coltd" size="45"></td><th>担当者様名:</th><td><input type="text" name="name" size="30"></td><th>郵便番号:</th><td><input type="text" name="znum" size="10"></td></tr> <tr><th>住所:</th><td colspan="5"><input type="text" name="zyuusyo" size="100%"></td></tr></table> <input type=submit name=send value="登録"> </form>モーダルウインドウ部分
<div id="modal-content-02" class="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <p><h2>顧客情報を選択してください</p> <p> <table> <tr><th>ID</th><th>会社名</th><th>担当者様名</th><th>住所</th><th>電話番号</th><td>選択</td></tr> <?php $con = mysql_connect('localhost', 'root', 'パスワード') or die('error(connect)'); mysql_select_db('testdb', $con) or die('error(select_db)'); mysql_set_charset('utf8'); $sql = 'select * from kokyaku'; $result = mysql_query($sql, $con); while ($row = mysql_fetch_array($result)) { echo '<tr><td>' .$row['顧客ID'] . '</td><td>' .$row['coltd'] . '</td><td> ' .$row['担当者様名'].'</td><td>' .$row['住所']. '</td><td>' .$row['電話番号']. '</td><td><button type="button" class="btn">選択</button></td></tr>' ; } mysql_close($con); ?> </table> </p> <p><a id="modal-close" class="button-link">閉じる</a></p>このような場合、どういった記述になるのか教えて頂ければ幸いです。
拙さ全開で申し訳ございませんが、よろしくお願いします。
####余談ですが...
phpのmysql系の関数は脆弱性があり、削除されたという情報をお聞きしました。
現状他の機能もこの状態で実装されており、書き換えればならないと思うのですが、小耳にはさむ程度でもよいので効率よく置き換える方法等ご存じであれば教えて頂ければと思います。
####追記
改めて見返すとわかりにくかったので、
メイン部分のソースコードそのまま貼ります
<div class="contents"> <!-- 1つ目のコンテンツ [開始] --> <div id="modal-content-01" class="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <p>1</p> <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p> <p><a id="modal-close" class="button-link">閉じる</a></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div> <!-- 1つ目のコンテンツ [終了] --> <!-- 2つ目のコンテンツ [開始] --> <div id="modal-content-02" class="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <p><h2>顧客情報を選択してください</p> <p><table> <tr><th>ID</th><th>会社名</th><th>担当者様名</th><th>住所</th><th>電話番号</th><td>選択</td></tr> <?php $con = mysql_connect('localhost', 'root', 'パスワード') or die('error(connect)'); mysql_select_db('testdb', $con) or die('error(select_db)'); mysql_set_charset('utf8'); $sql = 'select * from kokyaku'; $result = mysql_query($sql, $con); while ($row = mysql_fetch_array($result)) { echo '<tr><td>' .$row['顧客ID'] . '</td><td>' .$row['coltd'] . '</td><td> ' .$row['担当者様名'].'</td><td>' .$row['住所']. '</td><td>' .$row['電話番号']. '</td><td><button type="button" class="btn">選択</button></td></tr>' ; } mysql_close($con); ?> </table> </p> <p><a id="modal-close" class="button-link">閉じる</a></p> </p> <p><a id="modal-close" class="button-link">閉じる</a></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div> <!-- 2つ目のコンテンツ [終了] --> <!-- 3つ目のコンテンツ [開始] --> <div id="modal-content-03" class="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <p>2つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-03"]が設定されています。</p> <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p> <p><a id="modal-close" class="button-link">閉じる</a></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div> <!-- 3つ目のコンテンツ [終了] --> <!-- 右カラム --> <div id="main"> <h1>請求書作成</h1> <!--テスト--> <form action="" method="post"> <p> <label for="">会社名</label> <input type="text" name="company_name" /> </p> <p> <button type='submit'>更新</button> </p> </form> <!--テストここまで--> <p><a class="modal-syncer button-link" data-target="modal-content-01">見積もり書のデータを参照する</a></p> <p><a class="modal-syncer button-link" data-target="modal-content-02">顧客情報を自動入力する</a></p> <p><a class="modal-syncer button-link" data-target="modal-content-03">商品情報を自動入力する</a></p> <p><button type="button" class="modal-syncer button-lin" data-target="modal-content-02">顧客情報を一覧から入力する</button> <button type="button" class="modal-syncer button-lin" data-target="modal-content-01">見積書データを入力する</button> <form action = "kakunin.php" method="post"> <table><tr><th>会社名:</th><td><input type="text" name="coltd" size="45"></td><th>担当者様名:</th><td><input type="text" name="name" size="30"></td><th>郵便番号:</th><td><input type="text" name="znum" size="10"></td></tr> <tr><th>住所:</th><td colspan="5"><input type="text" name="zyuusyo" size="100%"></td></tr></table> <table> <tr><td>*</td><td>商品名</td><td>数量</td><td>単価</td><td>金額</td><td>備考</td></tr> <tr><td><button type="button" class="modal-syncer button-lin" data-target="modal-content-03">選択</button></td><td><input type="text" name="nm" size="40"></td><td><input type="text" size="2" name="kosuu" value="1"></td><td><input type="text" name="nm" size="7"></td><td><input type="text" name="nm" size="10"></td><td><input type="text" name="nm"></td></tr> <tr><td><p>プレビュー</p></td> <td><p><input type=submit name=send value="登録"><br></p></td></tr> </table> </form>
あ、PHPでしたね、失礼 ^_^；
回答1件
0
#common.php
php
1<?php 2 3/** 4 * common.php 5 * 6 * @since 2016/07/17 7 */ 8ini_set('display_errors', 1); 9error_reporting(E_ALL); 10 11function h($string) 12{ 13 return htmlspecialchars($string, ENT_QUOTES, 'utf-8'); 14} 15 16function getConnection() 17{ 18 try { 19 $host = 'localhost'; 20 $dbname = 'test'; 21 $dsn = sprintf('mysql:dbname=%s;host=%s;charset=utf8' 22 , $dbname 23 , $host 24 ); 25 $user = 'root'; 26 $password = 'password'; 27 $options = [ 28 PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION 29 ]; 30 $pdo = new PDO($dsn, $user, $password, $options); 31 return $pdo; 32 } catch (PDOException $e) { 33 throw new Exception($e); 34 } 35} 36
#index.php
php
1<?php 2/** 3 * index.php 4 * 5 * @since 2016/07/17 6 */ 7require_once 'common.php'; 8 9try { 10 $pdo = getConnection(); 11 $statement = 'select id, company_name, staff_name, address, tel from kokyaku'; 12 $stmt = $pdo->prepare($statement); 13 $stmt->execute(); 14 $recSet = $stmt->fetchAll(PDO::FETCH_ASSOC); 15} catch (PDOException $e) { 16 $err = $e->getMessage(); 17} 18?> 19 20<!DOCTYPE HTML> 21<html lang="ja"> 22 <head> 23 <meta charset="UTF-8"> 24 <title></title> 25 <style type="text/css"> 26 #model { 27 display:none; 28 position: absolute; 29 width: 600px; 30 top: 0; 31 left: 50%; 32 margin-left: -300px; 33 background-color: #EEE; 34 border: 1px solid #666; 35 } 36 #model p { 37 margin: 0.5em; 38 } 39 </style> 40 </head> 41 <body> 42 43 <table> 44 <thead> 45 <tr> 46 <th>ID</th> 47 <th>会社名</th> 48 <th>担当者名</th> 49 <th>住所</th> 50 <th>電話番号</th> 51 <th>選択</th> 52 </tr> 53 </thead> 54 <tbody> 55 <?php foreach ($recSet as $rec) : ?> 56 <tr> 57 <td><?= h($rec['id']); ?></td> 58 <td><?= h($rec['company_name']); ?></td> 59 <td><?= h($rec['staff_name']); ?></td> 60 <td><?= h($rec['address']); ?></td> 61 <td><?= h($rec['tel']); ?></td> 62 <td> 63 <button class="opendialog" type='button' data-id='<?= h($rec['id']); ?>'> 64 選択 65 </button> 66 </td> 67 </tr> 68 <?php endforeach; ?> 69 </tbody> 70 </table> 71 72 <!-- model --> 73 <div id="model"> 74 <form action="" method="post"> 75 <p> 76 <label for="">会社名</label> 77 <input type="text" name="company_name" /> 78 </p> 79 <p> 80 <button type='submit'>更新</button> 81 </p> 82 </form> 83 </div> 84 85 <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script> 86 <script type="text/javascript"> 87 $(function () { 88 $("#model").hide(); 89 $("#model button:submit").on('click', function () { 90 $("#model").hide(); 91 }); 92 93 $(".opendialog").on('click', function () { 94 var url = 'ajax.php'; 95 var params = { 96 id: $(this).attr('data-id') 97 }; 98 $.getJSON(url, params, function (json) { 99 $("#model").show(function () { 100 $(this).find('input[name=company_name]').val(json.company_name); 101 }); 102 }); 103 }); 104 }); 105 </script> 106 </body> 107</html>
#ajax.php
php
1<?php 2 3/** 4 * ajax.php 5 * 6 * @since 2016/07/17 7 */ 8require_once 'common.php'; 9 10try { 11 $id = filter_input(INPUT_GET, 'id'); 12 13 $pdo = getConnection(); 14 $statement = 'select id, company_name, staff_name, address, tel from kokyaku where id=?'; 15 $stmt = $pdo->prepare($statement); 16 $arr = []; 17 $arr[] = $id; 18 $stmt->execute($arr); 19 $recSet = $stmt->fetchAll(PDO::FETCH_ASSOC); 20 21 $res = null; 22 if (isset($recSet[0])) { 23 $res = $recSet[0]; 24 } 25} catch (PDOException $e) { 26 $res = $e->getMessage(); 27} finally { 28 echo json_encode($res); 29}
投稿2016/07/17 01:40
編集2016/07/17 01:45
退会済みユーザー
総合スコア0
ありがとうございます。 既存のコンソールに組み込んでみたら500エラーを吐いてしまったので、回答にあるindex.phpの代替としてtest.phpを作成しテストしてみたのですが、選択ボタンを押してもなにも反応せず、色々思い当たる部分（主にデータベースのカラム名）等いじってみましたが改善しませんでした...
質問内容もわかりにくいと見返して思ったのでコンテンツ部分のソースコードをまるまる貼りました。 まだ試作なのでお見苦しいかとは思いますが....
ちなみに、モーダルウインドウ部のスクリプト/CSSは、
https://syncer.jp/jquery-modal-window
こちらのものを使用させていただいております。
私が提示したソースに合わせてDBを新規で作れば、動きます。
提示したソースを無理に既存コードに組み込むのではなく、単独で動作させてみてください。組み込むことを想定してソースは書いていません。
どうやれば良いのかがわかるように書いたものです。
新規にDBを作成し、ソースコードもpass部分のみの変更で単独動作を試みてみましたが、やはり選択ボタンを押しても何も反応しませんでした。実行環境に関して、ほとんどがyumコマンドでインストールしたものなので念のため実行環境を記しておきます。
実行環境
CentOS7
Php5.4.16-36
MariaDB 5.5.47
Apache(httpd)2.4.6-40
ツールとしてphpmyadmin導入
「動かない」だけでは何も判断できません。ログを見てみるなり、解決につながる情報を提示してください。
とりあえず。
ini_set('display_errors', 1);
error_reporting(E_ALL);
をindex.php にも記述してみては？
Apacheのエラーログを参照したところ、
[Mon Jul 18 18:52:56.003115 2016] [:error] [pid 5555] [client ] PHP Parse error: syntax error, unexpected '{' in /var/www/html/console/ajax.php on line 27, referer: http://hogehoge.com/console/test.php
調べてみたらfinally句が使えるのはphp5.5以降とのことで
やはり実行環境が古いのが原因？だと見受けられるので、環境の更新作業をしていますが、何か不手際があったのかphp自体が動かなくなるという事態に発展してるので、解決までしばらくお待ちください....(汗
業務多忙で遅くなりました...すいません。
php5.6に更新後、同じエラーは吐かなくなりましたが、選択ボタンを押してもうんともすんとも言わないのでエラーログを参照しても何のエラーも吐いておらず、ためしに
ini_set('display_errors', 1);
ini_set('log_errors','On');
ini_set('error_log','/log/php_error.log');
error_reporting(E_ALL);
とし、ログも残るようにしてみたのですが、こちらも何のリアクションも取れず...
JavaScript側の問題かと思いChromeのツールで確認しようとしても「No Breakpoints」....。
Apacheのエラーログも特にｴﾗｰを吐いているわけでもなく、原因を特定しようにも、さっぱりな状態です.... 現在進行形で原因特定を急いでますので、何か進展ありましたらまた追記します。
尚、ブラウザはMicrosoftEdge、Chromeで確認しました。
> JavaScript側の問題かと思いChromeのツールで確認しようとしても「No Breakpoints」....。
なんのことやら？
いい加減な直訳ですが「エラー等なし」です。
chrome等のデベロッパーツールではJavaScriptなどにエラーがあると教えてくれる機能があります。
さすがに回答者の立場ですから、「開発者ツール」くらいは当たりまえに知っていますよ。
「ツール」と言っても、プラグインなのか、デフォルト機能の開発者ツールなのか、また、開発者ツールであってもどの機能を使ってみていて、どう判断しているのかというような、具体的な記述がないと判断できないよってことです。単純に使い方間違っている可能性も排除できません。
「エラーがない」といっても、使うべき機能を間違っているなんてことがよくあるのです。なので、主に回答者として利用している人は、質問者の言っていることが事実なのか、推測なのか、本当に意図した内容を指して言っているのか、その判断のもとになる根拠が示されないと、回答しにくいのです。
若葉つけて質問している理由を少しは察していただければと思うのですが…
少なくともなにもしてない訳ではありませんし、拙い知識ながらも自分で出来ることは出来る限りやっての情報を開示してるのに対して、情報を提示してくださいという割には、その具体的な情報の提示の方法は全く記されていないので、具体的な提示のしようがありません。
具体的に、
•何を実行するか
•何を何に追加するのか
•どういった情報や項目を提示すればいいのか
を教えて頂ければと思います。
あまりにも業務多忙な為あまり調べる時間もなく拙い知識丸出しでお見苦しいかとは存じますがお願いします。
無償でやってもいいと思える範囲内であれば、お手伝いはしますよ。
ただ、お金を払って仕事をくれるお客さんがいる立場ですから、丸投げされるよりも手間のかかるお手伝いはできません。
あなたの回答
tips
プレビュー
