Modale jQuery avec php Laravel
Bonjour à tous,
Je suis en stage de 2 mois suite à une formation que j'ai fait avec l'ENI pour devenir Développeur Web. Je pars de presque zéro puisque en reconversion professionnelle.
Je travail sur PHP Laravel, avec jQuery, et SQLite dans le cadre d'un WebPortal où je rajoute une fonctionnalité.
Pour ce faire, j'ai 3 boutons :
- ADD(modale 1)
- UPDATE (modale 1)
- DELETE (modale 2)
Les modales s'ouvrent mais "UPDATE" et "DELETE" ne fonctionnent pas dès que je submit : --> j'obtiens une erreur 500.
Lorsque que je rentre dans la partie jQuery, l'id de l'élément sélectionné n'est pas sauvegardé et donc l'édition ne fonctionne pas même si je parcours bien toute les lignes du jQuery.
Idem pour la suppression, l'id n'est pas retenu et je ne peux donc pas supprimer les données dans ma table.
La partie ajouter fonctionne très bien quand à elle.
Malgré mes recherches sur les forums, la documentation et autres, je ne trouve pas mon erreur et je bloque totalement. D'autant plus que dans la structure où je suis, mon tuteur ne connait pas forcément Laravel et que je ne sais plus où chercher.
Si besoin d'information complémentaires, ne pas hésiter à me demander.
Merci à tous.
--> ROUTE codées sous php Laravel :
Code:
1
2
3
4
| Route::resource('/admin/footer_logo/', 'FooterLogoController');
Route::post('/admin/footer_logo/', 'FooterLogoController@storeFooter');
Route::put('/admin/footer_logo/{footer_logo}', 'FooterLogoController@update');
Route::delete('/admin/footer_logo/{footer_logo}', 'FooterLogoController@destroy'); |
--> Code html pour créer les modales :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
| <!-- Footer Option-->
<div class="panel panel-default">
<div class="row panel-heading" style="margin:0px;">
<label>Footer Options</label>
<button style='margin-right:20px;' type="button" class="btn btn-primary pull-right btn-footer_logo-add" id="btn-modal-add"
data-toggle="modal" data-target="#dlg-modal-add" title="Add New Partner" data-id="" data-title=""><i class="fa fa-plus">Add Partner</i></button>
</div>
<div class="col-sm-8 col-sm-offset-2">
@if(session()->get('success'))
<div class="alert alert-success" style="margin-top:5px; text-align:center; font-weight:bold; font-size:large;">
{{ session()->get('success') }}
</div>
@endif
</div>
<div class="panel-body">
<div class='row'>
<div class='row'>
<div class='col-xs-12'>
<div class="box-header">
@include ('partials.errors')
</div>
<!-- /.box-header -->
<div class="box-body">
<table class="table table-bordered table-hover dataTable">
<thead>
<tr>
<th class='col-sm-2 col-xs-5' style="text-align:center; vertical-align:middle; ">Partner Name</th>
<th class='col-sm-4' style="text-align:center; vertical-align:middle;">URL Link</th>
<th class='col-sm-4' style="text-align:center; vertical-align:middle;">Thumbnail Link</th>
<th class='col-sm-1 col-xs-5' style="text-align:center; vertical-align:middle;">Icon</th>
<th class='col-sm-1'> </th>
</tr>
</thead>
<tbody>
@foreach ($footer_logos as $footer_logo)
<tr>
<td class='col-sm-2 col-xs-5' style="vertical-align:middle;"> {{ $footer_logo->footer_logo_name }}</td>
<td class='col-sm-4' style="vertical-align:middle;"> <a href='{{ $footer_logo->footer_logo_URL }}' target="_blank" >{{ $footer_logo->footer_logo_URL }} </td>
<td class='col-sm-4' style="vertical-align:middle;"> {{ $footer_logo->footer_logo_thumb }}</td>
<td class='col-sm-1 col-xs-5' style="text-align:center; vertical-align:middle; background-color:#333333;"><img style=" max-height:50px; max-width:50px;" src="{{ $footer_logo->footer_logo_thumb }}" title="{{ $footer_logo->footer_logo_name }}" alt="{{ $footer_logo->footer_logo_name }}"></td>
<td class='col-sm-1'>
<div class='row' style="text-align:center;">
@csrf
<!-- EDIT AND DELETE BUTTONS -->
<button type="button" class="btn btn-default btn-footer_logo-edit" title="Edit {{ $footer_logo->footer_logo_name }}" data-toggle="modal" data-target="#dlg-modal-edit" data-id="{{ $footer_logo->c_pk_footer_logo_id }}" data-title="{{ $footer_logo->footer_logo_name }}" ><i class="fa fa-edit"></i></button>
<button type="button" class="btn btn-default btn-footer_logo-delete" title="Delete {{ $footer_logo->footer_logo_name }}" data-toggle="modal" data-target="#dlg-modal-delete" data-id="{{ $footer_logo->c_pk_footer_logo_id }}" ><i class="fa fa-trash" style="min-width:14px; min-height:14px;"></i></button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- Modal : ADD PARTNER -->
<div class="modal fade" id="dlg-modal-add">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST" id="form-modal-add" action="" >
@csrf
<input type="hidden" id="modal-add-method" name="_method" value="post"/>
<input type="hidden" id="modal-add-id" name="c_pk_footer_logo_id" value="" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal-add-title">Modify Icon Link</h4>
</div>
<div class="modal-body" id="modal-add-body">
<div class="form-group">
<label for="title">Partner Name</label>
<input type="text" class="form-control" id="modal-footer_logo_name" name="footer_logo_name" value="" placeholder="Name of new partner" required>
</div>
<div class="form-group">
<label for="title">Partner URL</label>
<input type="Link" class="form-control" id="modal-footer_logo_URL" name="footer_logo_URL" placeholder="URL of new partner" value="">
</div>
<div class="form-group">
@php ($key = 'footer_logo_thumb')
<label for="title">Partner Thumbnail Icon</label>
<div class="input-group">
<span class="input-group-btn">
<a id="{{ $key }}" data-input="thumbnail-{{ $key }}" data-preview="holder-{{ $key }}" class="btn btn-primary" >
<i class="fa fa-picture-o"></i>
</a>
</span>
<input type="link" class="form-control" id="thumbnail-{{ $key }}" name="{{ $key }}" value="" placeholder="Link of new partner's thumnbail" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button id="btn-modal-add" type="submit" class="btn btn-primary pull-right">Save</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal : UPDATE PARTNER -->
<div class="modal fade" id="dlg-modal-edit">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST" id="form-modal-edit" action="" >
@csrf
<input type="hidden" id="modal-edit-method" name="_method" value="put"/>
<input type="hidden" id="modal-edit-id" name="c_pk_footer_logo_id" value="" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal-edit-title">Modify Icon Link</h4>
</div>
<div class="modal-body" id="modal-edit-body">
<div class="form-group">
<label for="title">Partner Name</label>
<input type="text" class="form-control" id="modal-footer_logo_name" name="footer_logo_name" value="{{ $footer_logo->footer_logo_name }}" required>
</div>
<div class="form-group">
<label for="title">Partner URL</label>
<input type="Link" class="form-control" id="modal-footer_logo_URL" name="footer_logo_URL" value="{{ $footer_logo->footer_logo_URL }}">
</div>
<div class="form-group">
@php ($key = 'footer_logo_thumb')
<label for="title">Partner Thumbnail Icon</label>
<div class="input-group">
<span class="input-group-btn">
<a id="{{ $key }}" data-input="thumbnail-{{ $key }}" data-preview="holder-{{ $key }}" class="btn btn-primary" >
<i class="fa fa-picture-o"></i>
</a>
</span>
<input type="link" class="form-control" id="thumbnail-{{ $key }}" name="{{ $key }}" value="{{ $footer_logo->footer_logo_thumb}}" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button id="btn-modal-edit" type="submit" class="btn btn-primary pull-right">Save</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal : DELETE PARTNER -->
<div class="modal fade" id="dlg-modal-delete">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST" id="form-modal-delete" action="" >
@csrf
<input type="hidden" name="_method" value="delete" />
<input type="hidden" id="modal-delete-id" name="c_pk_footer_logo_id" value="" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal-delete-title">Delete Partner</h4>
</div>
<div class="modal-body" id="modal-delete-body">
<p>Are you sure you want to delete : {{ $footer_logo->footer_logo_name }} link ? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button id="btn-modal-delete" type="submit" class="btn btn-primary pull-right">Delete</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<!-- /.row -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel panel-default --> |
--> Gestion dynamique des modales avec jQuery :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| <script>
$(function () {
$('.dataTable').DataTable({
'paging' : false,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
});
$('#btn-modal-add').submit(function (e) {
//stop submitting the form to see the disabled button effect
e.preventDefault();
// Count line number of table created in Footer Option
var numberPartner = $('tbody > tr').length;
if ($numberPartner => $maxNumberPartner){
// Enable the add partner button
$('#btn-modal-add').attr("disabled", true);
} else {
// Disable the add partner button
$('#btn-modal-add').attr("disabled", false);
}
return true;
});
$('#btn-modal-add').on('click', function(){
// ADD
$('#form-modal-add').attr("action","/admin/footer_logo");
$('#modal-add-method').val('POST');
$('#modal-add-id').val("");
$('#modal-add-title').text('Add Partner');
$('#modal-footer_logo_name').val("");
$('#modal-footer_logo_URL').val("");
$('#modal-footer_logo_thumb').val("");
$('#dlg-modal-action').modal();
});
$('#btn-modal-edit').on('click', function(){
// UPDATE
$('#form-modal-edit').attr("action","/admin/footer_logo/"+$(this).data('id'));
$('#modal-edit-method').val('PUT');
$('#modal-edit-id').val( $(this).data('id') );
$('#modal-edit-title').text('Edit Partner');
$('#modal-footer_log_name').val($(this).data('title'));
$('#modal-footer_log_URL').val($(this).data('title'));
$('#modal-footer_log_thumb').val($(this).data('title'));
$('#dlg-modal-action').modal();
});
// Delete
$('#btn-modal-delete').on('click', function(){
$('#form-modal-delete').attr("action","/admin/footer_logo/"+$(this).data('id'));
// $('#modal-action-method').val( $(this).data('id') );
$('#modal-delete-id').val( $(this).data('id') );
$('#dlg-modal-action').modal();
});
})
</script> |
--> FooterController.php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| <?php
namespace App\Http\Controllers;
use App\FooterLogo;
use App\Http\Requests\FooterLogoRequest;
use Illuminate\Http\Request;
class FooterLogoController extends Controller
{
public function __construct()
{
$this->middleware('auth');
$this->authorizeResource(FooterLogo::class);
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
}
/**
* Store options in storage.
*
* @param \App\FooterLogo $footer_logo
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function storeFooter(Request $request)
{
$footer_logo = new FooterLogo([
'footer_logo_name' => $request->get('footer_logo_name'),
'footer_logo_URL' => $request->get('footer_logo_URL'),
'footer_logo_thumb' => $request->get('footer_logo_thumb')
]);
$footer_logo->save();
return redirect('/admin/options')->with('success', 'New partner saved !');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('admin.options');
}
/**
* Display the specified resource.
*
* @param \App\FooterLogo $footer_logo
* @return \Illuminate\Http\Response
*/
public function show(FooterLogo $footer_logo)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\FooterLogo $footer_logo
* @return \Illuminate\Http\Response
*/
public function edit($footer_logo)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Http\Requests\FooterLogoRequest $request
* @param \App\FooterLogo $footer_logo
* @return \Illuminate\Http\Response
*/
public function update(FooterLogoRequest $request, $c_pk_footer_logo_id)
{
$footer_logo = FooterLogo::find($request->c_pk_footer_logo_id);
$footer_logo->c_pk_footer_logo_id = $request->get('c_pk_footer_logo_id');
$footer_logo->footer_logo_name = $request->get('footer_logo_name');
$footer_logo->footer_logo_URL = $request->get('footer_logo_URL');
$footer_logo->footer_logo_thumb = $request->get('footer_logo_thumb');
$footer_logo->save();
return redirect('/admin/options')->with('success', 'Partner updated !');
}
/**
* Remove the specified resource from storage.
*
* @param \Request $request
* @param \App\FooterLogo $footer_logo
* @return \Illuminate\Http\Response
*/
public function destroy(Request $request, $c_pk_footer_logo_id)
{
$footer_logo = FooterLogo::find($request->$c_pk_footer_logo_id);
$footer_logo->delete();
return redirect('/admin/options')->with('success','Partner deleted !');
}
} |
