###追記
console.log(response);
の値を追記しておきます。
{rows: Array(10)} rows:Array(10) 0:{0: "217", 1: "test", 2: "rest", 3: null, 4: null, id: "217", title: "test", content: "rest", complement: null, deadline: null} 1:{0: "216", 1: "", 2: "", 3: null, 4: null, id: "216", title: "", content: "", complement: null, deadline: null} 2:{0: "215", 1: "", 2: "", 3: null, 4: null, id: "215", title: "", content: "", complement: null, deadline: null} 3:{0: "214", 1: "sentence", 2: "root", 3: null, 4: null, id: "214", title: "sentence", content: "root", complement: null, deadline: null} 4:{0: "213", 1: "clear", 2: "content", 3: null, 4: null, id: "213", title: "clear", content: "content", complement: null, deadline: null} 5:{0: "212", 1: "", 2: "", 3: null, 4: null, id: "212", title: "", content: "", complement: null, deadline: null} 6:{0: "211", 1: "", 2: "", 3: null, 4: null, id: "211", title: "", content: "", complement: null, deadline: null} 7:{0: "210", 1: "", 2: "", 3: null, 4: null, id: "210", title: "", content: "", complement: null, deadline: null} 8:{0: "209", 1: "", 2: "", 3: null, 4: null, id: "209", title: "", content: "", complement: null, deadline: null} 9:{0: "208", 1: "", 2: "", 3: null, 4: null, id: "208", title: "", content: "", complement: null, deadline: null} length:10 __proto__:Array(0) __proto__:Object
###前提・実現したいこと
PHPとjQueryを利用してAjaxでのToDoリストを作成しています。
現在、機能としてCRUDのUの部分(Update)を実装しようとしています。
実現したいこととしては、選んだ(ダブルクリックしたもの)タスクをHTMLのinput要素に突っ込むというものです。
###発生している問題・エラーメッセージ
実現したいことを妨げていることとして、選んだタスクが正しく認識されていない、というのが挙げられます。
A,B,Cというタスクがあって、Bを選んでいるのにAが選ばれていると認識されているという状況です。
他にも、一度選んだタスクが最優先(?)になってしまって、別のタスクを選んでも最初に選んだタスクの内容から切り替わらないという現象が起きています。
###該当のソースコード
表画面
JavaScript
1 // 編集したいところをダブルクリックしたらイベント発動 2 $(document).on('dblclick', ".labeling", function(){ 3 4 $('#editTitle').val(""); 5 $('#editContent').val(""); 6 7 // Ajax 8 $.ajax({ 9 url: 'php/read.php', 10 }) .done(function(response){ 11 console.log("成功してるよ"); 12 var $everyResponse = response.rows; 13 var $updateTitle = ''; 14 var $updateContent = ''; 15 16 for(let i = 0; i < $everyResponse.length; i++) { 17 console.log($everyResponse[i].id); 18 19 $updateTitle += $everyResponse[i].title 20 $updateContent += $everyResponse[i].content 21 22 //input要素へ値を突っ込む 23 $('#editTitle').val($updateTitle); 24 $('#editContent').val($updateContent); 25 26 // ループを中断 27 return false; 28 29 } 30 31 }) .fail(function(){ 32 console.log("失敗なのよね"); 33 }); 34 }); 35
API側(read.php)
PHP
1<?php 2 // header関数より前にechoなどを使ってはいけない 3 header('content-type: application/json; charset=utf-8'); 4 // データベースに接続 5 $dsn = 'mysql:host=localhost;dbname=todolist;charset=utf8'; 6 $user = 'secret'; 7 $passwd = 'secret'; 8 9 try { 10 $db = new PDO($dsn, $user, $passwd); 11 $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 12 13 // プリペアドステートメント発行(最新の10件を取得) 14 $statement = $db->prepare(" 15 SELECT * FROM list ORDER BY id DESC LIMIT 10; 16 "); 17// print_r($db->errorInfo()); 18 19 $statement->execute(); 20 $rows = $statement->fetchAll(); 21 // var_dump($rows); 22 echo json_encode(compact('rows')); 23 24 } catch (PDOException $e) { 25 echo "Error :" . $e->getMessage(); 26 }
###試したこと
SELECT文でデータベースの中身を取ってくる処理を書いたPHPへアクセスするAjaxの式を書き、
返ってきた値response.rows
の長さ分だけforでループを回します。
ループの中で変数にタスクのタイトルと内容を代入します。
inputに突っ込むときに値が連結されないようにするためにreturn false
をする、
という記述をしております。
###補足情報(言語/FW/ツール等のバージョンなど)
PHP5.3
CentOS6.9
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/15 08:30
2017/11/15 08:38
2017/11/15 08:42
2017/11/15 09:09
2017/11/15 09:27
2017/11/15 09:58