jqueryでインライン編集をする際に、カラムと紐づくIDの内容を取得、受け渡しをしたい

Question

jqueryを利用してテーブル内をインライン編集（php側に渡してmysqlに保存）しようとしています。

特定の値（下記のshop_name）のインライン編集と値の取得はできるようになったのですが、値に紐づくIDを同時にPHP側に渡したいのですがうまく取得できません。

jqueryでの取得につきましてサンプルコードをご教示いただけなないでしょうか。
jqueryコードの注釈の１と２の取得と受け渡しが解決できれば、PHP側での処理は可能となります。

どうぞよろしくお願いいたします。

	<table class="table" id="edit-table">
		<thead>
			<th>id</th>
			<th>shop_name</th>
		</thead>
		<tbody>
	     @foreach($shops as $shop)
		     <tr>
		     	<td>{{ $shop->id }}</td>
		     	<td id="edit-table2">{{ $shop->shop_name }}</td>
		     </tr>
	     @endforeach
	 </tbody>
	</table>

	(function(documet){

		$(document).ready(function(){
			$("#edit-table > tbody > tr > td.edit-table2").click(edit_toggle());

		});



		function edit_toggle(){
			var edit_flag=false;
			return function(){
				if(edit_flag) return;
				var $input = $("<input>").attr("type","text").val($(this).text());
				console.log($input.val());


//１．ここで、shop-idを取得して、saveファンクションにidと、shop_name を渡したい

				$(this).html($input);

				$("input", this).focus().blur(function(){
					save(this);
					$(this).after($(this).val()).unbind().remove();
					edit_flag = false;
				});
				edit_flag = true;
			}
		}

		function save(elm){
			alert("「"+$(elm).val()+"」を保存しました"); //保存する処理をここに書く

			$.ajax(
					{
						type: "POST", //POSTで渡す
						url: "http://hack.dev/admin/jquerypost", //POST先
						data:
						{
							"id": , //2.IDを格納したい
							"shop_name":$(elm).val(), //shop_name
							"_token":"xxxxxxxxxxxxxxxxxxxxx"
						},

						success: function(hoge) //通信成功、dataaddcon.phpからの返り値を受け取る
						{
							if(hoge==0) //返り値が0→成功
							{
								alert('正常終了しました');
							}
							else if(hoge==1) //返り値が1→失敗
							{
								alert('失敗しました');
							}
						},
						error: function(XMLHttpRequest,textStatus,errorThrown) //通信失敗
						{
							alert('処理できませんでした');
						}
					});


		}
	})(document);

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

Answer 1

idを独自データ属性として埋め込んでおく方法もあります。

ビューは例えばこんな感じ。

<td class="edit-table2" data-id="{{ $shop->id }}">{{ $shop->shop_name }}</td>

データ属性はjQueryのdataメソッドで扱えるので、

// data-idを取得
var id = $(this).data('id');

// data-idを設定
$(this).data('id', newValue);

• edit_toggle()で、td.data-idを取得し新しく作るinput要素にdata-idをセット
• save()の引数として渡ってくるelm（input）にはdata-idをセット済みなのでそれを読み取る

という流れで取得可能だと思います。

参考

独自データ属性 - グローバル属性 - HTML5 タグリファレンス - HTML5.JP
http://www.html5.jp/tag/attributes/data.html

カスタムデータ属性を使う時はIEに気をつけろ | 銀ねこアトリエ
http://ginneko-atelier.com/blogs/tips/384/

Comments

[ocms]

nnssnさま
ご助言ありがとうございました！
アドバイス頂きました方法でも無事に再現を行うことができました。

data-id　こちらを今まで知らなかったため、以降存分に利用させていただこうと思います！
どうもありがとうございます。

Answer 2

HTMLの変更

<td id="edit-table2">{{ $shop->shop_name }}</td>

HTMLに於けるidは、同じHTML文書内でユニークになるべきものなので、
同じ要素がforeachで複製されるような時はclassを使うようにしましょう。
…と思ったのですが、jQueryのセレクターはclass前提ですね。修正済みだったのでしょうか？

ということで、HTML(PHP)を以下に変更したと仮定して回答します。

@foreach($shops as $shop)
  <tr class="shop">
    <td class="id">{{ $shop->id }}</td>
    <td class="show_name">{{ $shop->shop_name }}</td>
  </tr>
@endforeach

$shop->shop_nameと変数名からshopが重複しているようにも思えますが、
$shop->name（店長名等？）が別にありそうだったので上記のようにしてみました。

イベントの発火

$("#edit-table > tbody > tr > td.edit-table2").click(edit_toggle());

今も同じ仕様かどうかはわかりませんが、
jQueryのセレクターは右から探索していく仕様なので、
一度セレクターを切ってしまいfind等を用いて改めて探索するようにすると速度面で有利になります。

$("#edit-table").find(".shop .shop_name").click(edit_toggle());

親の要素を見に行く

ようやく本題です。
jQueryにはparentやparents等の上部階層に遡るメソッドが用意されています。

上記でHTMLの修正要請をしたのは、以下のような分かりやすいコードでスパっと拾得する目的からです。

//１．ここで、shop-idを取得して、saveファンクションにidと、shop_name を渡したい
$(this).parents(".shop").find(".id").text();
$(this).parent().find(".id").text();

ちなみに質問文そのままのHTMLで拾得する場合、以下の指定になるかと思います。
idの場所に名前が振られていないので、全てのtdを拾得してからeqで最初のtdを抜き出しています。
こういうやり方はhtmlへの修正がコードの修正に繋がりやすくなります。

//１．ここで、shop-idを取得して、saveファンクションにidと、shop_name を渡したい
$(this).parent().children("td").eq(0).text();

Comments

[ocms]

ご助言ありがとうございます！
現在取り組んでおりまして、引き続き進めてまいりますが、
現状コードを修正しましたが、うまく取得ができかねております。

コンソールに出力しているのですが、結果が１となってしまいました。

２つ目のご助言とともにもう少し取り組んでいきます。
途中経過までとなります。

$shop = $(this).parents(".shop").find(".id").text();
$shop_id = $(this).parent().find(".id").text();
↓
console.log('$shop出力 : ',$shop); 結果：1
console.log('$shop_id出力 : ',$shop_id); 結果：1

```html(php)
<table class="table table-hover " id="edit-table">
<thead>
<th>id</th>
<th>shop_name</th>

</thead>
<tbody>
@foreach($shops as $shop)
<tr class="shop">
<td class="id">{{ $shop->id }}</td>
<td class="shop_name">{{ $shop->name }}</td>
</tr>
@endforeach
</tbody>
</table>
```

```javascript
<script>
(function(documet){

$(document).ready(function(){
// $("#edit-table > tbody > tr > td.edit-table2").click(edit_toggle());
// $("#edit-table").click(edit_toggle());
$("#edit-table").find(".shop .shop_name").click(edit_toggle());
});

function edit_toggle(){
var edit_flag=false;
return function(){
if(edit_flag) return;
//デフォルトのパターン
console.log('this1 : ',this);

var $input = $("<input>").attr("type","text").val($(this).text());
console.log('$input出力 : ',$input.val());

//teratailのパターン
$shop = $(this).parents(".shop").find(".id").text();
$shop_id = $(this).parent().find(".id").text();
console.log('$shop出力 : ',$shop);
console.log('$shop_id出力 : ',$shop_id);

//HTML　http://js.studio-kingdom.com/jquery/manipulation/html
//.html()をセットに使用した場合、対象のコンテンツは新しいコンテンツに完全に入れ替わります。
$(this).html($input);
console.log('this2 : ',this);
console.log('$(this).html($input) : ',$(this).html($input));

$("input", this).focus().blur(function(){
save(this);
$(this).after($(this).val()).unbind().remove();
edit_flag = false;
});
edit_flag = true;
}
}

function save(elm){
// alert("「"+$(elm).val()+"」を保存しました"); //保存する処理をここに書く

$.ajax(
{
type: "POST", //POSTで渡す
url: "http://hack.dev/admin/jquerypost", //POST先
data:
{
"newLat":"test", //名前
// "password":$('#password').val(), //パスワード
// "_token": $('meta[name=csrf-token]').attr('content')
"_token":"L9v1wei4EMRG8dXQfyIUEwqXdy54wLHjylcUZhZB"
},
// async: false,
success: function(hoge) //通信成功、dataaddcon.phpからの返り値を受け取る
{
if(hoge==0) //返り値が0→成功
{
// alert('正常終了しました');
console.log('正常終了しました');
}
else if(hoge==1) //返り値が1→失敗
{
// alert('失敗しました');
console.log('失敗しました');
}
},
error: function(XMLHttpRequest,textStatus,errorThrown) //通信失敗
{
// alert('処理できませんでした');
console.log('処理できませんでした');
}
});

}
})(document);
</script>

```

[ocms]

スミマセン。そもそもid=1のデータで検証していました。
再度確認しまして、結果をご報告します。
また、２番めの方法で無事再現できました！ありがとうございます。

[ocms]

@miyabi-sunさま

ありがとうございました！無事確認をすることができました。
いずれでも動作確認ができまして、今回は前者のほうを利用する形で作成いたしました。
ありがとうございます。

他の方へのご参考用に、その他の箇所も掲載いたします。

```php view
<table class="table table-hover " id="edit-table">
<thead>
<th>id</th>
<th>shop_name</th>
</thead>
<tbody>
@foreach($shops as $shop)
<tr class="shop">
<td class="id">{{ $shop->id }}</td>
<td class="shop_name">{{ $shop->shop_name}}</td>
</tr>
@endforeach
</tbody>
</table>
```

```javascript

(function(documet){

$(document).ready(function(){
//デフォルトのパターン
// $("#edit-table > tbody > tr > td.edit-table2").click(edit_toggle());
//teratailのパターン
$("#edit-table").find(".shop .shop_name").click(edit_toggle());
});

function edit_toggle(){
var edit_flag=false;
return function(){
if(edit_flag) return;
//デフォルトのパターン
console.log('this : ',this);

var $input = $("<input>").attr("type","text").val($(this).text());

$shop_name= $input.val();
console.log('$input出力 : ',$shop_name);

$shop_id = $(this).parent().find(".id").text();
console.log('$shop_id出力 : ',$shop_id);

//CSRF取得
$csrf = $('meta[name=csrf-token]').attr('content');
console.log('$csrf : ',$csrf);

$(this).html($input);

$("input", this).focus().blur(function(){

save(this);
$(this).after($(this).val()).unbind().remove();
edit_flag = false;
});
edit_flag = true;

}
}

function save(elm){
$shop_name= $(elm).val();
console.log('saveメソッド : ',$shop_id,$shop_name,$csrf);

$.ajax(
{
type: "POST", //POSTで渡す
url: "http://hack.dev/admin/jquerypost", //POST先
data:
{
"shop_id":$shop_id, //id
"shop_name":$shop_name, //
"_token":$csrf
},
// async: false,
success: function(hoge) //通信成功 {
if(hoge==0) //返り値が0→成功
{
console.log('正常終了しました');
}
else if(hoge==1) //返り値が1→失敗
{
console.log('失敗しました');
}
},
error: function(XMLHttpRequest,textStatus,errorThrown) //通信失敗
{
console.log('処理できませんでした');
}
});

}
})(document);

```

```php contorller
public function postDB(Request $request) {

$id = $request->input('shop_id');
$shop_name= $request->input('shop_name');

DB::table('shops')
->where('id', $id)
->update(['shop_name' => $shop_name]);

return Response::make('0');

}
```

```php route
// jquery
Route::any('admin/jquerypost', 'AdminFunctionController@postDB');
```