簡単なオンラインストレージを作成しています。
その中でファイル名の変更UI(?)を作りたいと思っているのですが、
JavaScriptの知識がなく、どのようにすれば分かりません。
(DBの変更など実際の処理は作成済みです。)
完成形としては画像のような
0. ”ファイル名変更”をクリック
0. ファイル名部分(”新しいファイル”)がテキストボックスになり編集可能状態に
0. エンターで変更を確定
0. 変更内容をpostで送信
0. 【作成済み】受け取った値からDB内のファイル名を変更
3.の部分は次のプラグインを使うことでできそうなのですが、
https://garafu.blogspot.jp/2015/09/jquery-complete.html
2.の部分が検討もつきません。
ヒント等でも結構ですので、お力添えをいただけると幸いです。
よろしくお願いいたします。
<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> <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>
##追記
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=""> </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() || ' '); }; 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>
##成果物
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>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/19 03:22 編集
2017/12/19 03:18 編集
2017/12/19 03:29
2017/12/19 03:51
2017/12/20 01:15 編集