質問編集履歴
4
問題を修正しました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Laravel：
|
|
1
|
+
Laravel：jQueryからModalに値を渡せているのに編集ができない
|
body
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
##問題
|
|
2
|
-
編集機能部分をModalで実装しましたが、なぜか
|
|
2
|
+
編集機能部分をModalで実装しましたが、なぜかjQueryから渡したい値はModalに渡せているのに編集ができません。
|
|
3
|
+
編集ができないというのはfolder1からfolder2に変更できないという事です。
|
|
3
4
|
値が渡せていることは検証上で確認しました。
|
|
4
5
|
更新ボタンを押してもリロードされる動作はありますが、編集はされずControllerでddメソッドを使って確認しましたが表示されなかった為Controllerに行き届いていません。
|
|
5
|
-
何が原因かを知りたいです。
|
|
6
6
|
|
|
7
|
+
私が思うのは現時点でinputタグのvalue属性にjQueryで値を渡す際、valメソッドを使うのが原因なのかなと考えています。
|
|
8
|
+
他にどんなメソッドや書き方をするべきか、もしくはその他の原因があればご教示頂ければと思います。
|
|
9
|
+
|
|
7
10
|
以下Modal部分の写真です。
|
|
8
11
|
|
|
9
12
|
|
|
10
|
-
##Route部分
|
|
11
|
-
```
|
|
12
|
-
Route::post('/home/folder/update', 'HomeController@UpdateFolder')->name('update.folder');
|
|
13
|
-
```
|
|
14
13
|
|
|
15
14
|
##編集ボタン部分
|
|
16
15
|
編集ボタンを押したらModalが出ます。
|
|
17
|
-
data-titleとdata-urlが
|
|
16
|
+
data-titleとdata-urlがjQueryに渡したい値で追加しています。
|
|
18
17
|
```blade.php
|
|
19
18
|
<a class="btn btn-outline-light mr-1 btn-sm" data-toggle="modal" data-target="#EditFolderModal" data-title="{{ $folder->title }}" data-url="{{ route('update.folder',['id' => $folder->id, 'user_id' => $user]) }}" >編集</a>
|
|
20
19
|
```
|
|
@@ -56,7 +55,7 @@
|
|
|
56
55
|
</div>
|
|
57
56
|
```
|
|
58
57
|
|
|
59
|
-
##
|
|
58
|
+
##jQuery部分
|
|
60
59
|
```
|
|
61
60
|
<script type="application/javascript">
|
|
62
61
|
window.addEventListener('load', function() {
|
|
@@ -67,14 +66,19 @@
|
|
|
67
66
|
var modal = $(this);//モーダルを取得
|
|
68
67
|
|
|
69
68
|
//Ajaxの処理はここに
|
|
69
|
+
modal.find('input').val(title);//valを使う事にに問題があると思いますがどうすればいいのか分かっていません
|
|
70
|
-
modal.find('
|
|
70
|
+
modal.find('form').attr('action',url);
|
|
71
|
-
modal.find('form').attr('action',url);//ここのurlの値の渡し方に問題があるのでしょうか？
|
|
72
71
|
});
|
|
73
72
|
});
|
|
74
73
|
</script>
|
|
75
74
|
```
|
|
76
75
|
|
|
77
76
|
##やってみたこと
|
|
78
|
-
|
|
77
|
+
・ これの他にもModalとjQueryを同じファイル上で使っているため、上記以外コメントアウトしてみましたが更新ボタン押しても編集されませんでした。
|
|
79
78
|
|
|
80
|
-
|
|
79
|
+
・ 編集ボタン部分の```data-url```とjQueryの```modal.find('form').attr('action',url);```を消して、```action = {{ route('update.folder',['id' => $folder->id, 'user_id' => $user]) }} ```と入れてみましたが更新されませんでした。
|
|
80
|
+
|
|
81
|
+
・ ```modal.find('input').val(title);```を```modal.find('input').attr('defaultValue',title);```に変えてやってみましたが、input内に値表示がされなくなってしまいます。
|
|
82
|
+
|
|
83
|
+
・ jQueryで渡すのをやめてinputタグのvalueに直で記載して編集はできたのですが、値表示がうまくいきませんでした。
|
|
84
|
+
上手くいかなかったというのは、id=1にもid=2のデータに対しても全てfolder1が表示されてしまいます。
|
3
やってみたことの追記とJS部分修正しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
|
|
59
59
|
##JS部分
|
|
60
60
|
```
|
|
61
|
-
<script>
|
|
61
|
+
<script type="application/javascript">
|
|
62
62
|
window.addEventListener('load', function() {
|
|
63
63
|
$('#EditFolderModal').on('shown.bs.modal', function (event) {
|
|
64
64
|
var button = $(event.relatedTarget);//モーダルを呼び出すときに使われたボタンを取得
|
|
@@ -75,4 +75,6 @@
|
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
##やってみたこと
|
|
78
|
-
これの他にもModalとJSを同じファイル上で使っているため、上記以外コメントアウトしてみましたが更新ボタン押しても編集されませんでした。
|
|
78
|
+
- これの他にもModalとJSを同じファイル上で使っているため、上記以外コメントアウトしてみましたが更新ボタン押しても編集されませんでした。
|
|
79
|
+
|
|
80
|
+
- 編集ボタン部分の「data-url」とJSの「modal.find('form').attr('action',url);」を消して、「action = {{ route('update.folder',['id' => $folder->id, 'user_id' => $user]) }} 」と入れてみましたが更新されませんでした。
|
2
route部分を追加しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,6 +7,11 @@
|
|
|
7
7
|
以下Modal部分の写真です。
|
|
8
8
|
|
|
9
9
|
|
|
10
|
+
##Route部分
|
|
11
|
+
```
|
|
12
|
+
Route::post('/home/folder/update', 'HomeController@UpdateFolder')->name('update.folder');
|
|
13
|
+
```
|
|
14
|
+
|
|
10
15
|
##編集ボタン部分
|
|
11
16
|
編集ボタンを押したらModalが出ます。
|
|
12
17
|
data-titleとdata-urlがJSに渡したい値で追加しています。
|
1
問題点が少し変わった為、問題と題名を修正しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Laravel：JavaScriptからModal
|
|
1
|
+
Laravel：JavaScriptからModalに値を渡せているのに編集ができない
|
body
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
##問題
|
|
2
|
-
編集機能部分をModalで実装しましたが、なぜか
|
|
2
|
+
編集機能部分をModalで実装しましたが、なぜかJSから渡したい値はModalに渡せているのに編集ができません。
|
|
3
|
+
値が渡せていることは検証上で確認しました。
|
|
3
|
-
更新ボタンを押してもリロードされる動作はありますが、Controller
|
|
4
|
+
更新ボタンを押してもリロードされる動作はありますが、編集はされずControllerでddメソッドを使って確認しましたが表示されなかった為Controllerに行き届いていません。
|
|
4
|
-
|
|
5
|
+
何が原因かを知りたいです。
|
|
6
|
+
|
|
5
7
|
以下Modal部分の写真です。
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
##編集ボタン部分
|
|
9
11
|
編集ボタンを押したらModalが出ます。
|
|
10
|
-
data-titleとdata-url
|
|
12
|
+
data-titleとdata-urlがJSに渡したい値で追加しています。
|
|
11
13
|
```blade.php
|
|
12
14
|
<a class="btn btn-outline-light mr-1 btn-sm" data-toggle="modal" data-target="#EditFolderModal" data-title="{{ $folder->title }}" data-url="{{ route('update.folder',['id' => $folder->id, 'user_id' => $user]) }}" >編集</a>
|
|
13
15
|
```
|
|
@@ -16,7 +18,7 @@
|
|
|
16
18
|
```
|
|
17
19
|
<div class="modal fade" id="EditFolderModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
|
|
18
20
|
|
|
19
|
-
<form role="form" method="post" action=""> //ここのaction属性にdata-urlの値が渡せ
|
|
21
|
+
<form role="form" method="post" action=""> //ここのaction属性にdata-urlの値が渡せていることは検証上で確認しました。
|
|
20
22
|
@csrf
|
|
21
23
|
|
|
22
24
|
<div class="modal-dialog">
|
|
@@ -28,7 +30,7 @@
|
|
|
28
30
|
<div class="form-group row">
|
|
29
31
|
<label for="title" class="text-white">フォルダ名</label>
|
|
30
32
|
|
|
31
|
-
<input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value=""> //ここのvalue属性にはdata-titleの値が渡せている
|
|
33
|
+
<input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value=""> //ここのvalue属性にはdata-titleの値が渡せている事も検証上で確認しました。
|
|
32
34
|
|
|
33
35
|
@error('title')
|
|
34
36
|
<span class="invalid-feedback" role="alert">
|
|
@@ -40,7 +42,7 @@
|
|
|
40
42
|
<div class="modal-footer">
|
|
41
43
|
<a class="btn btn-outline-light" data-dismiss="modal">閉じる</a>
|
|
42
44
|
|
|
43
|
-
//ここの更新ボタンを押すとリロードする動作はあるが、Controllerには行ってない
|
|
45
|
+
//ここの更新ボタンを押すとリロードする動作はあるが、Controllerには行ってないです。
|
|
44
46
|
<button type="submit" class="btn btn-outline-light">更新</button>
|
|
45
47
|
</div>
|
|
46
48
|
</div>
|
|
@@ -61,7 +63,7 @@
|
|
|
61
63
|
|
|
62
64
|
//Ajaxの処理はここに
|
|
63
65
|
modal.find('input').attr('value',title);
|
|
64
|
-
modal.find('form').attr('action',url);//ここのurlの値
|
|
66
|
+
modal.find('form').attr('action',url);//ここのurlの値の渡し方に問題があるのでしょうか？
|
|
65
67
|
});
|
|
66
68
|
});
|
|
67
69
|
</script>
|