jQuery-Tableditについて

Question

jQueryのTableditというプラグインを使っているのですがAjax通信の仕方がわからず作業が止まっています…

もしわかる方いらっしゃればご教授のほどよろしくお願いします。

$('#hoge_tb').Tabledit({
	deleteButton: false,
	 url: '/hoge/update',
	  editmethod: 'post',
	  debug: true,
​
	columns: {
	  identifier: [0, 'id'],
	  editable: [[0, 'hoge1'],[1, 'hoge2']]
	},
	  buttons: {
	      edit: {
	          class: 'btn btn-sm btn-success',
	          html: '<i class="fa fa-fw fa-edit mr-1"></i> 編集',
	          action: 'edit'
	      },
	      save: {
	          class: 'btn btn-sm btn-primary',
	          html: '<i class="fa fa-check mr-1"></i>保存',
	          action: 'save'
	      },
	      restore: {
	          class: 'btn btn-sm btn-warning',
	          html: 'Restore',
	          action: 'restore'
	      },
	      confirm: {
	          class: 'btn btn-sm btn-danger',
	          html: 'Confirm'
	      }
	  }
	});$('#hoge_tb').Tabledit({
	deleteButton: false,
	 url: '/hoge/update',
	  editmethod: 'post',
	  debug: true,
​
	columns: {
	  identifier: [0, 'id'],
	  editable: [[0, 'hoge1'],[1, 'hoge2']]
	},
	  buttons: {
	      edit: {
	          class: 'btn btn-sm btn-success',
	          html: '<i class="fa fa-fw fa-edit mr-1"></i> 編集',
	          action: 'edit'
	      },
	      save: {
	          class: 'btn btn-sm btn-primary',
	          html: '<i class="fa fa-check mr-1"></i>保存',
	          action: 'save'
	      },
	      restore: {
	          class: 'btn btn-sm btn-warning',
	          html: 'Restore',
	          action: 'restore'
	      },
	      confirm: {
	          class: 'btn btn-sm btn-danger',
	          html: 'Confirm'
	      }
	  }
	});

<div class="table-responsive">
​
									<table id="hoge_tb" class="table table-bordered table-hover"
										style="width: 100%">
										<thead>
​
											<tr class="table-secondary text-nowrap">
												<th colspan="2" class="text-center">名前</th>
												
											</tr>
​
											<tr class="text-nowrap">
​
											<th></th>
​
​
												<th>テスト姓</th>
												<th>テスト名</th>
												
​
​
​
​
											</tr>
​
										</thead>
										<tbody>
​
											<tr class="text-nowrap">
​
												<td>てすと</td>
												<td>てすと</td>
​
​
											</tr>
​
										</tbody>
									</table>
​
								</div>

Comments

[x_x]

ところどころにゼロ幅スペース(U+200B)が埋め込まれていますが意図的なものでしょうか？

[kinisinai]

すみません。こちらのソースはスマートフォンからのコピペなのでそういったスペースが埋め込まれたと思います。

Answer 1

.Tabledit()が二回書かれていますがコピペミスでしょうか？
columns オプションの指定が間違えているので確認してください。
https://markcell.github.io/jquery-tabledit/#documentation

    columns: {
      identifier: [0, 'id'],
      editable: [[1, 'hoge1'],[2, 'hoge2']]
    },

また、スクリプトを見ると id列、hoge1列、hoge2列が必要です。
HTML に不足しているので確認してみてください。

上記修正後、保存ボタンを押すと指定した url にPOSTされます。
id、hoge1、hoge2 で更新すればいいでしょう。

Comments

[kinisinai]

ありがとうございます。
自分でなんとか調べて値をPOSTすることはできたのですがもしこのテーブルが2行あった場合どのように1行目と2行目を区別したらいいのでしょうか？
もしわかり祖であればご教授のほどよろしくお願いします。

[x_x]

そのための id 列でしょう？
一意に区別できるだけの情報を持たせてください。

[kinisinai]

そういうことだったんですね。