質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • PHP

    20842questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • MySQL

    6016questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 4,341

ssk

score 270

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

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

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

よろしくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

こんにちは。
私は新米プログラマなので正しく無い文法があるかもしれない点は
ご容赦いただきたいのですが、
下記のような書き方で
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のデータ分だけリスト表示し、削除を設置します。
そして

 <script>
   $(function() {
      //デリートボタンを押したときの処理
             $(document).on('click', '.deleteTask', function() {
                if (confirm('本当に削除しますか?')) { ←削除をボタンを押すと確認が表示されます。
                    var id = $(this).parent().data('id');
                    ↑deleteTaskの親要素である<li>のデータidを変数に入れちゃいます。

                    $.post('_ajax_delete_task.php', {  ←削除する処理が書いてあるファイルにidをPOSTします。
                                  id: id
                     }, function(rs) {
                   $('#task_'+id).fadeOut(800); //処理が終わった後の挙動:フェードアウト0.8秒させます
                      });
        }
             });

 });
</script>


〜〜〜〜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にポストして処理させます。



        //更新ボタンを押したときの処理
        $(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);
          });
        });


ーーーー_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 21:56

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

    キャンセル

  • 2015/10/05 10:33

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

    キャンセル

  • 2015/10/06 10:33

    ituki_ilkrさん
    ありがとうございます!

    どうやって実装したら良いかわからなかったので、助かりました><

    キャンセル

0

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


#DB設計(仮設)

CREATE DATABASE `hoge` DEFAULT CHARACTER SET utf8;
USE hoge;

DROP TABLE IF EXISTS `ajax_test`;
CREATE TABLE `ajax_test` (
  `id` int(10) unsigned NOT NULL,
  `text` varchar(255) NOT NULL
)DEFAULT CHARSET=utf8;

INSERT INTO `ajax_test` VALUES
(1 , 'text1'),
(2 , 'text2');

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

HTMLで表示してますが拡張子はPHPです。
index.php
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Ajax-PHP</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
;$(function()
{
  var js_id   = '0';
  var js_text = '';
  var js_type = 'V';
  var sendurl = './ajax-php/dml.php?id='+js_id+'&text='+js_text+'&type='+js_type;
  var data_view = function()
  {
    sendurl = './ajax-php/dml.php?id=&text=&type=V';
    $.ajax({
      type    : "GET",
      url     : sendurl,
      cache   : false
    }).done(function(data, status, xhr)
    {
      var obj = $.parseJSON(data);
      var str = "";
      str += "<table>";
      str += "<tr><td>id</td><td>text</td></tr>"
      for( i in obj)
      {
        str += "<tr><td>" + obj[i]['id'] + "</td><td>" + obj[i]['text'] + "</td></tr>"
      }
      str += "</table>";
      $(".view-area").html(str);
    }).fail(function(data)
    {
      alert('view-error!!!');
    });
  }
  $("#up_btn").on("click",function()
  {
    js_id   = $("#sample_id").val();
    js_text = $("#sample_text").val();
    js_type = ( $("#radio_u").is(':checked') ) ? 'U' : 'D';
    sendurl = './ajax-php/dml.php?id='+js_id+'&text='+js_text+'&type='+js_type;
    $.ajax({
      type    : "GET",
      url     : sendurl,
      cache   : false
    }).done(function(data, status, xhr)
    {
      data_view()
    }).fail(function(data)
    {
      alert('update-or-delete-error!!!');
    });
  });
  data_view();
});
</script>
</head>
<body>
id:<input type="text" id="sample_id" />
text:<input type="text" id="sample_text" />
type:
<label for="radio_u"><input type="radio" id="radio_u" name="types" checked />update</label>
<label for="radio_d"><input type="radio" id="radio_d" name="types" />delete</label>
<input type="button" id="up_btn" value="submit" />
<br /><br />
<div class="view-area"></div>
</body>
</html>

dml.php
<?php
// 少しセキュリティ対策 =============
// 使用時はコメントアウト
// if( $_SERVER['HTTP_HOST'] !== 'mydomain' ) exit('No direct script access allowed');
// ============================

// DB接続
// require_once('config.php');  //共通ファイルから読み込んだ方が良いが、面倒なのでここで接続
try
{
  $db = new PDO('mysql:host=localhost;dbname=hoge', 'username', 'pass');
}
catch(PDOException $e)
{
  print "エラー!: " . $e->getMessage() . "<br/>";
  die('error');
}

$sql_rel['id']   = ( isset($_GET['id']) )   ? $_GET['id']   : 0;
$sql_rel['text'] = ( isset($_GET['text']) ) ? $_GET['text'] : '';
$sql_rel['type'] = ( isset($_GET['type']) ) ? $_GET['type'] : 'V';
$sql = "";

if( $sql_rel['type'] === 'V' )
{
  $sql  = "SELECT * FROM ajax_test";
  $stmt = $db->prepare($sql);
  if( $stmt->execute() )
  {
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
  }
  echo json_encode($result);
}
elseif( $sql_rel['type'] === 'U' )
{
  $sql  = "UPDATE ajax_test SET text=:text WHERE id=:id";
  $stmt = $db->prepare($sql);
  $stmt->bindValue(':id'  , $sql_rel['id']  , PDO::PARAM_INT);
  $stmt->bindParam(':text', $sql_rel['text'], PDO::PARAM_STR);
  $stmt->execute();
}
elseif( $sql_rel['type'] === 'D' )
{
  $sql  = "DELETE FROM ajax_test WHERE id=:id";
  $stmt = $db->prepare($sql);
  $stmt->bindValue(':id'  , $sql_rel['id']  , PDO::PARAM_INT);
  $stmt->execute();
}
$sql = "";
$db = null;

セキュリティ的に問題はありますが実現できると思います。
テストしてないのでテーブルデータが0件の時にエラーが出ると思いますが、
0件の時の制御を加えるだけだでいいと思います。
DB設計はどう使用しているか不明だったので、
IDにオートインクリメントを使用せず整数値としてます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/06 10:37

    NIAさん
    ありがとうございます!

    とても綺麗な書き方ですね。勉強になります。
    わかりやすく説明してくださり、ありがとうございます。理解が深まりました><

    キャンセル

関連した質問

同じタグがついた質問を見る

  • PHP

    20842questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • MySQL

    6016questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。