画面遷移なしで編集したいのですが、書き方が全くわかりません。。

「編集」と「削除」を画面遷移なしで実行したいのですが、ajaxが分からず困っています。どうすれば、意図した結果が得られるでしょうか？＞＜

PHPとMySQLを使っています。
PHPを使用してMySQLへデータ（テキスト100文字程度）を入れています。
そのデータを「編集」「削除」したいです。

できれば、ざっくりと具体的なコードをいただけると助かります＞＜

よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

こんにちは。
私は新米プログラマなので正しく無い文法があるかもしれない点は
ご容赦いただきたいのですが、
下記のような書き方で
sskさんが悩む部分のプログラムを書きました。
ajaxを読み込ませてリストを管理するというものでした。

かなり略して
削除の部分だけフォーカスして見られるようにしますね。

＜略＞
・
・
・

<ul id="tasks"> <?php foreach($tasks as $task) : ?> <li id="task_<?php echo h($task['id']); ?>"data-id="<?php echo h($task['id']); ?>"> //表示する内容〜〜〜 <span class="deleteTask">[削除]</span>** ←削除ボタンです** </li> <?php endforeach; ?> </ul>

このようにループでMySQLのデータ分だけリスト表示し、削除を設置します。
そして

〜〜〜〜ajax_delete_task.php〜〜〜〜

<?php require_once('config.php'); require_once('functions.php'); $dbh = connectDb(); $dbh->query('SET NAMES utf8'); $sql = "update tasks set type = 'deleted',modified = now() where id = :id"; **//タスクのタイプをdeletedに変更して、変更時間をアップデートする。** $stmt = $dbh->prepare($sql); $stmt->execute(array(":id" => (int)$_POST['id'])); 〜〜〜〜end〜〜〜〜稚拙ですがこんな感じでうまく挙動しましたよ！遷移せずふわ〜っと削除した要素が消える仕組みになってます。回答遅れてすみません。。！お待たせしました。編集もだいたい削除とは変わらない書き方になります。削除ボタンの隣に「updateTask]というクラスを定義して、クリックした時にidとタイトルの情報を _ajax_update_task.phpにポストして処理させます。 ```php //更新ボタンを押したときの処理 $(document).on('click','.updateTask',function(){ var id = $(this).parent().data('id'); var title = $(this).prev().val(); $.post('_ajax_update_task.php',{ id: id, title: title },function(rs){ **//編集し終わった後に編集前と同じボタンやらをつけてあげないといけないのでここで付け足していくものを定義してあげる。** var e = $( '<input type="checkbox" class="checkTask">'+ '<span></span>'+ '<span class="editTask">[編集]</span>' + '<span class="deleteTask">[削除]</span>' + '<span class="drag">[drag]</span>' ); $('#task_'+id).empty().append(e).find('span:eq(0)').text(title); }); }); ``` ```php ーーーー_ajax_update_task.phpーーーー <?php //共通ファイルの読み込み require_once('config.php'); require_once('functions.php'); //データベースとの接続 $dbh = connectDb(); $dbh->query('SET NAMES utf8');//文字化け防止 $sql = "update tasks set title =:title,modified = now() where id = :id";//タスクのタイトルを打ち込まれたタイトルに変更して時間の変更時間をアップデートする。 $stmt = $dbh->prepare($sql); $stmt->execute(array( ":id" => (int)$_POST['id'], ":title" => $_POST['title'] )); ``` こんな感じでいかがでしょうか？

投稿2015/09/29 07:38

編集2015/10/05 01:40

ituki_ilkr

総合スコア21

ssk

2015/09/29 12:56

ituki_ilkrさんありがとうございます！！＞＜こちらで削除の方は動きました！今、修正を行っているのですが、うまくいかず。。。お時間ある時にそちらのコードもざっくりいただけますか？図々しく、すいません。

ituki_ilkr

2015/10/05 01:33

回答を更新したので確認よろしくおねがいします！

ssk

2015/10/06 01:33

ituki_ilkrさんありがとうございます！どうやって実装したら良いかわからなかったので、助かりました＞＜

行動規範の内容に同意します

簡易的ですが、参考になればと思います。

SQL
1#DB設計（仮設）
2
3CREATE DATABASE `hoge` DEFAULT CHARACTER SET utf8;
4USE hoge;
5
6DROP TABLE IF EXISTS `ajax_test`;
7CREATE TABLE `ajax_test` (
8  `id` int(10) unsigned NOT NULL,
9  `text` varchar(255) NOT NULL
10)DEFAULT CHARSET=utf8;
11
12INSERT INTO `ajax_test` VALUES
13(1 , 'text1'),
14(2 , 'text2');

フォルダ構造
index.php
/ajax-php
|
└ dml.php

HTMLで表示してますが拡張子はPHPです。

HTML
1index.php
2<!DOCTYPE>
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
4<head>
5<title>Ajax-PHP</title>
6<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
7<script type='text/javascript'>
8;$(function()
9{
10  var js_id   = '0';
11  var js_text = '';
12  var js_type = 'V';
13  var sendurl = './ajax-php/dml.php?id='+js_id+'&text='+js_text+'&type='+js_type;
14  var data_view = function()
15  {
16    sendurl = './ajax-php/dml.php?id=&text=&type=V';
17    $.ajax({
18      type    : "GET",
19      url     : sendurl,
20      cache   : false
21    }).done(function(data, status, xhr)
22    {
23      var obj = $.parseJSON(data);
24      var str = "";
25      str += "<table>";
26      str += "<tr><td>id</td><td>text</td></tr>"
27      for( i in obj)
28      {
29        str += "<tr><td>" + obj[i]['id'] + "</td><td>" + obj[i]['text'] + "</td></tr>"
30      }
31      str += "</table>";
32      $(".view-area").html(str);
33    }).fail(function(data)
34    {
35      alert('view-error!!!');
36    });
37  }
38  $("#up_btn").on("click",function()
39  {
40    js_id   = $("#sample_id").val();
41    js_text = $("#sample_text").val();
42    js_type = ( $("#radio_u").is(':checked') ) ? 'U' : 'D';
43    sendurl = './ajax-php/dml.php?id='+js_id+'&text='+js_text+'&type='+js_type;
44    $.ajax({
45      type    : "GET",
46      url     : sendurl,
47      cache   : false
48    }).done(function(data, status, xhr)
49    {
50      data_view()
51    }).fail(function(data)
52    {
53      alert('update-or-delete-error!!!');
54    });
55  });
56  data_view();
57});
58</script>
59</head>
60<body>
61id:<input type="text" id="sample_id" />
62text:<input type="text" id="sample_text" />
63type:
64<label for="radio_u"><input type="radio" id="radio_u" name="types" checked />update</label>
65<label for="radio_d"><input type="radio" id="radio_d" name="types" />delete</label>
66<input type="button" id="up_btn" value="submit" />
67<br /><br />
68<div class="view-area"></div>
69</body>
70</html>

PHP
1dml.php
2<?php
3// 少しセキュリティ対策 =============
4// 使用時はコメントアウト
5// if( $_SERVER['HTTP_HOST'] !== 'mydomain' ) exit('No direct script access allowed');
6// ============================
7
8// DB接続
9// require_once('config.php');  //共通ファイルから読み込んだ方が良いが、面倒なのでここで接続
10try
11{
12  $db = new PDO('mysql:host=localhost;dbname=hoge', 'username', 'pass');
13}
14catch(PDOException $e)
15{
16  print "エラー!: " . $e->getMessage() . "<br/>";
17  die('error');
18}
19
20$sql_rel['id']   = ( isset($_GET['id']) )   ? $_GET['id']   : 0;
21$sql_rel['text'] = ( isset($_GET['text']) ) ? $_GET['text'] : '';
22$sql_rel['type'] = ( isset($_GET['type']) ) ? $_GET['type'] : 'V';
23$sql = "";
24
25if( $sql_rel['type'] === 'V' )
26{
27  $sql  = "SELECT * FROM ajax_test";
28  $stmt = $db->prepare($sql);
29  if( $stmt->execute() )
30  {
31    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
32  }
33  echo json_encode($result);
34}
35elseif( $sql_rel['type'] === 'U' )
36{
37  $sql  = "UPDATE ajax_test SET text=:text WHERE id=:id";
38  $stmt = $db->prepare($sql);
39  $stmt->bindValue(':id'  , $sql_rel['id']  , PDO::PARAM_INT);
40  $stmt->bindParam(':text', $sql_rel['text'], PDO::PARAM_STR);
41  $stmt->execute();
42}
43elseif( $sql_rel['type'] === 'D' )
44{
45  $sql  = "DELETE FROM ajax_test WHERE id=:id";
46  $stmt = $db->prepare($sql);
47  $stmt->bindValue(':id'  , $sql_rel['id']  , PDO::PARAM_INT);
48  $stmt->execute();
49}
50$sql = "";
51$db = null;