編集履歴

質問編集履歴

解を追記

2017/12/20 01:12

投稿

nexco

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -271,3 +271,139 @@
 </html>
 ```
+##成果物
+[karamarimo](https://teratail.com/users/karamarimo)様の回答がベースとなっています。
+```
+<head>
+  <title></title>
+</head>
+<body>
+  <table id="outside">
+    <tr>
+      <td>
+        <form class="simple-form" id="t1">one</form>
+      </td>
+    </tr>
+    <tr>
+      <td id="t2">two</td>
+    </tr>
+  </table> <button onclick="replaceElement()">要素を置き換え</button>
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script type="text/javascript">
+       function replaceElement() {
+         //テキストボックスに変更
+         var element = document.getElementById("t1");
+         var newElement = document.createElement("input");
+         newElement.setAttribute("type", "text");
+         newElement.setAttribute("id", "ipt");
+         newElement.setAttribute("value", document.getElementById("t1").innerHTML);
+         var target = element.childNodes.item(0);
+         element.replaceChild(newElement, target);
+       }
+       $(function () {
+         $('.simple-form').on('submit', function () {
+         //変更後の値を送信
+           var $input = $(this).children('input[type=text]');
+           var text = $input.val();
+           var formdata = new FormData();
+           formdata.append('newtext', text);
+           $.ajax({
+             url: 'action_rename.php',
+             type: 'POST',
+             data: formdata,
+             cache: false,
+             contentType: false,
+             processData: false,
+             dataType: 'text'
+           }).done(function (j_data, textStatus, jqXHR) {
+             alert('成功');
+           }).fail(function (jqXHR, textStatus, errorThrown) {
+             alert('失敗');
+           });
+           //テキストボックスを削除
+           var node = document.getElementById("ipt");
+           if (node.parentNode) {
+             node.parentNode.removeChild(node);
+           }
+           //表示を変更後の値に変更
+           var info = document.getElementById('t1');
+           var textNode = document.createTextNode(text);
+           info.appendChild(textNode);
+           return false
+         })
+       })
+  </script>
+</body>
+</html>
+```

項目追加

2017/12/20 01:12

投稿

nexco

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -112,6 +112,8 @@
+##追記
 3.エンターで変更を確定までのソースコード（仮）
 ```

ソースコードのインデント調整

2017/12/19 03:29

投稿

nexco

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -124,165 +124,145 @@
 <head>
-<title></title>
+  <title></title>
 </head>
 <body>
-<table id="outside">
-<tr>
-<td id="t1">one</td>
-</tr>
-<tr>
-<td id="t2">two</td>
-</tr>
-</table>
-<pre id="rslt" class="">&nbsp;</pre>
-<button onclick="replaceElement()">要素を置き換え</button>
-<input type="button" id="btn" class="btn btn-default" value="確定" />
-<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-<script type="text/javascript">
-function replaceElement() {
-var element = document.getElementById("t1");
-var newElement = document.createElement("input");
-newElement.setAttribute("type", "text");
-newElement.setAttribute("id", "ipt");
-newElement.setAttribute("value", document.getElementById("t1").innerHTML);
-var target = element.childNodes.item(0);
-element.replaceChild(newElement, target);
-}
-(function () {
-var oncomplete = function (event) {
-$('#rslt').html($('#ipt').val() || '&nbsp;');
-};
-var document_onready = function (event) {
-$('#ipt').complete(oncomplete);
-$('#btn').on('click', oncomplete);
-};
-$(document).ready(document_onready);
-})();
-(function (window, document, $, undefined) {
-/**
-* テキスト入力が確定したとき指定されたイベントハンドラを呼び出します。
-* @param handler {function} イベントハンドラ。イベントハンドラは jQuery.Event を引数にとる。
-* @return {jQuery} jQueryオブジェクト
-*/
-$.fn.complete = function (handler) {
-var ENTER_KEY = 13;
-var keypressed = false;
-/**
-* keypressイベント発生時に呼び出されます。
-* @param event {jQuery.Event} イベントオブジェクト
-*/
-var onkeypress = function (event) {
-if (event.keyCode !== ENTER_KEY) {
-return;
-}
-keypressed = true;
-};
-/**
-* keyupイベント発生時に呼び出されます。
-* @param event {jQuery.Event} イベントオブジェクト
-*/
-var onkeyup = function (event) {
-if (event.keyCode === ENTER_KEY && keypressed) {
-// 入力確定のイベントを発生させます。
-handler.call(this, event);
-}
-keypressed = false;
-};
-// 各要素に対してイベントを付与します。
-return this.each(function (index) {
-$(this).on('keypress', onkeypress).on('keyup', onkeyup);
-});
-};
-})(window, document, jQuery);
-</script>
+  <table id="outside">
+    <tr>
+      <td id="t1">one</td>
+    </tr>
+    <tr>
+      <td id="t2">two</td>
+    </tr>
+  </table>
+  <pre id="rslt" class="">&nbsp;</pre> <button onclick="replaceElement()">要素を置き換え</button> <input type="button" id="btn" class="btn btn-default" value="確定" />
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+  <script type="text/javascript">
+    function replaceElement() {
+      var element = document.getElementById("t1");
+      var newElement = document.createElement("input");
+      newElement.setAttribute("type", "text");
+      newElement.setAttribute("id", "ipt");
+      newElement.setAttribute("value", document.getElementById("t1").innerHTML);
+      var target = element.childNodes.item(0);
+      element.replaceChild(newElement, target);
+    }
+    (function () {
+      var oncomplete = function (event) {
+        $('#rslt').html($('#ipt').val() || '&nbsp;');
+      };
+      var document_onready = function (event) {
+        $('#ipt').complete(oncomplete);
+        $('#btn').on('click', oncomplete);
+      };
+      $(document).ready(document_onready);
+    })();
+    (function (window, document, $, undefined) {
+      /**
+       * テキスト入力が確定したとき指定されたイベントハンドラを呼び出します。
+       * @param handler {function} イベントハンドラ。イベントハンドラは jQuery.Event を引数にとる。
+       * @return {jQuery} jQueryオブジェクト
+       */
+      $.fn.complete = function (handler) {
+        var ENTER_KEY = 13;
+        var keypressed = false;
+        /**
+         * keypressイベント発生時に呼び出されます。
+         * @param event {jQuery.Event} イベントオブジェクト
+         */
+        var onkeypress = function (event) {
+          if (event.keyCode !== ENTER_KEY) {
+            return;
+          }
+          keypressed = true;
+        };
+        /**
+         * keyupイベント発生時に呼び出されます。
+         * @param event {jQuery.Event} イベントオブジェクト
+         */
+        var onkeyup = function (event) {
+          if (event.keyCode === ENTER_KEY && keypressed) {
+            // 入力確定のイベントを発生させます。
+            handler.call(this, event);
+          }
+          keypressed = false;
+        };
+        // 各要素に対してイベントを付与します。
+        return this.each(function (index) {
+          $(this).on('keypress', onkeypress).on('keyup', onkeyup);
+        });
+      };
+    })(window, document, jQuery);
+  </script>
 </body>

3.までのソースを追記

2017/12/19 03:27

投稿

nexco

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -109,3 +109,183 @@
 </td>
 ```
+3.エンターで変更を確定までのソースコード（仮）
+```
+<!--
+テーブルのt1部分を入力とするコード
+-->
+<head>
+<title></title>
+</head>
+<body>
+<table id="outside">
+<tr>
+<td id="t1">one</td>
+</tr>
+<tr>
+<td id="t2">two</td>
+</tr>
+</table>
+<pre id="rslt" class="">&nbsp;</pre>
+<button onclick="replaceElement()">要素を置き換え</button>
+<input type="button" id="btn" class="btn btn-default" value="確定" />
+<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<script type="text/javascript">
+function replaceElement() {
+var element = document.getElementById("t1");
+var newElement = document.createElement("input");
+newElement.setAttribute("type", "text");
+newElement.setAttribute("id", "ipt");
+newElement.setAttribute("value", document.getElementById("t1").innerHTML);
+var target = element.childNodes.item(0);
+element.replaceChild(newElement, target);
+}
+(function () {
+var oncomplete = function (event) {
+$('#rslt').html($('#ipt').val() || '&nbsp;');
+};
+var document_onready = function (event) {
+$('#ipt').complete(oncomplete);
+$('#btn').on('click', oncomplete);
+};
+$(document).ready(document_onready);
+})();
+(function (window, document, $, undefined) {
+/**
+* テキスト入力が確定したとき指定されたイベントハンドラを呼び出します。
+* @param handler {function} イベントハンドラ。イベントハンドラは jQuery.Event を引数にとる。
+* @return {jQuery} jQueryオブジェクト
+*/
+$.fn.complete = function (handler) {
+var ENTER_KEY = 13;
+var keypressed = false;
+/**
+* keypressイベント発生時に呼び出されます。
+* @param event {jQuery.Event} イベントオブジェクト
+*/
+var onkeypress = function (event) {
+if (event.keyCode !== ENTER_KEY) {
+return;
+}
+keypressed = true;
+};
+/**
+* keyupイベント発生時に呼び出されます。
+* @param event {jQuery.Event} イベントオブジェクト
+*/
+var onkeyup = function (event) {
+if (event.keyCode === ENTER_KEY && keypressed) {
+// 入力確定のイベントを発生させます。
+handler.call(this, event);
+}
+keypressed = false;
+};
+// 各要素に対してイベントを付与します。
+return this.each(function (index) {
+$(this).on('keypress', onkeypress).on('keyup', onkeyup);
+});
+};
+})(window, document, jQuery);
+</script>
+</body>
+</html>
+```

画像の説明を追加

2017/12/19 03:21

投稿

nexco

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -21,6 +21,8 @@
 0. 【作成済み】受け取った値からDB内のファイル名を変更
+GIFファイル。クリックで再生します。
 ![イメージ説明](85785ad4e188f7d53d7d10728141e9e7.gif)

全体を書き直しました

2017/12/18 05:27

投稿

nexco

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,44 +1,42 @@
 簡単なオンラインストレージを作成しています。
-そこで、ファイル名の変更を作りたいと思っているのですが
+その中でファイル名の変更UI（？）を作りたいと思っているのですが、
-どのようにしたらいいかわかりません。
+JavaScriptの知識がなく、どのようにすれば分かりません。
-理想としては、Dropboxのような「名前を変更」を選択 ⇒ ファイル名部分が編集画面（？）になるようなものを作りたいと思っています。
+（DBの変更など実際の処理は作成済みです。）
-![参考例](0642f9fe217d8923a0cc5c48452543dc.png)
+完成形としては画像のような
-JQueryでできそうですが、よくわかりません。
-よろしくお願いいたします。
-##追記
-バックエンド（PHP & SQL）部分は作成済みなのですが、そこにPOSTをするまでのフロントエンドサイド（？）の作り方がよくわかりません。
-一応流れとしては次のような感じを予定しています。
-0. 下記の”ファイル名変更”リンクをクリック
+0. ”ファイル名変更”をクリック
 0. ファイル名部分（”新しいファイル”）がテキストボックスになり編集可能状態に
-0. エンター or ボックス外クリックで変更を確定
+0. エンターで変更を確定
 0. 変更内容をpostで送信
 0. 【作成済み】受け取った値からDB内のファイル名を変更
+![イメージ説明](85785ad4e188f7d53d7d10728141e9e7.gif)
+3.の部分は次のプラグインを使うことでできそうなのですが、
+https://garafu.blogspot.jp/2015/09/jquery-complete.html
-※postの値などは特に決めていません。
+2.の部分が検討もつきません。
+ヒント等でも結構ですので、お力添えをいただけると幸いです。
+よろしくお願いいたします。
@@ -65,8 +63,6 @@
 </thead>
 <tbody>
-<tr>
 <tr>

ソースを含めた詳細を追記

2017/12/18 05:24

投稿

nexco

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -15,3 +15,99 @@
 JQueryでできそうですが、よくわかりません。
 よろしくお願いいたします。
+##追記
+バックエンド（PHP & SQL）部分は作成済みなのですが、そこにPOSTをするまでのフロントエンドサイド（？）の作り方がよくわかりません。
+一応流れとしては次のような感じを予定しています。
+0. 下記の”ファイル名変更”リンクをクリック
+0. ファイル名部分（”新しいファイル”）がテキストボックスになり編集可能状態に
+0. エンター or ボックス外クリックで変更を確定
+0. 変更内容をpostで送信
+0. 【作成済み】受け取った値からDB内のファイル名を変更
+※postの値などは特に決めていません。
+```
+<table class="table table-striped table-hover">
+<thead>
+  <tr>
+  <th class="col-md-8 col-xs-8">File Name</th>
+  <th class="col-md-4 col-xs-4">Date</th>
+  <th class="table_setting">
+    <i class="glyphicon glyphicon-cog"></i>
+  </th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+<tr>
+<th>新しいファイル</th>
+<th>2019-06-08</th>
+<td class="table_setting">
+  <div class="btn-group">
+    <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+      <i class="glyphicon glyphicon-option-horizontal"></i>
+    </button>
+    <ul class="dropdown-menu dropdown-menu-right">
+      <li>
+        <a href="action_attribute.php?file_id=XX&action=favorite&token=">お気に入り</a>
+      </li>
+      <li>
+        <a href="">ファイル名の変更</a>
+      </li>
+      <li>
+        <a href="action_attribute.php?file_id=XX&action=delete&token=">ファイル削除</a>
+      </li>
+    </ul>
+  </div>
+</td>
+```