Discussion :

[vbakyi]

Salut,

J'essaie d'afficher le message d'erreur avec ajax dans le framework laravel mais je n'y arrive toujours pas et cela depuis trois jours durant.
Voici mon controller, ma vue et mon code ajax
merci de bien m'aider à resoudre ce casse tête

Mon controlleur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
public function create(Request $request)
 
    {
 
       $rules = [
 
          'nom' => 'required',
 
          'prenom' => 'required',
 
        ];
 
 
 
        $validator = Validator::make($request->all(), $rules);
 
        if ($validator->fails()) {
 
        return response()->json([
 
                  'fail' =>true,
 
                  'errors' => $validator->errors()
 
            ]);
 
        }
 
        else{
 
            $post = new Post();
 
            $post->nom = $request->nom;
 
            $post->prenom = $request->prenom;
 
            $post->save();
 
        }
 
        return response()->json($post);
 
    }

------------------Ma VUE-----------------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
    <div class="modal-dialog">
 
        <div class="modal-content">
 
            <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="myModalLabel">Enregistrement</h4>
 
            </div>
 
            <div class="modal-body">
 
 
 
                <form id="formRegister" class="form-horizontal" role="form" method="POST" action="{{ url('create') }}">
 
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
 
 
 
                    <div class="form-group">
 
                        <label class="col-md-4 control-label">Nom</label>
 
                        <div class="col-md-6">
 
                            <input type="text" class="form-control" name="nom" id="nom">
 
                            <small class="help-block"></small>
 
                        </div>
 
                    </div>
 
 
 
                    <div class="form-group">
 
                        <label class="col-md-4 control-label">Prenom</label>
 
                        <div class="col-md-6">
 
                            <input type="text" class="form-control" name="prenom" id="prenom">
 
                            <small class="help-block"></small>
 
                        </div>
 
                    </div>
 
 
 
                    <div class="form-group">
 
                        <div class="col-md-6 col-md-offset-4">
 
                            <button type="submit" class="btn btn-primary" id="register">
 
                                Register
 
                            </button>
 
                        </div>
 
                    </div>
 
                </form>
 
 
 
            </div>
 
        </div>
 
    </div>
 
</div>

------------- Code Ajax ---------------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
$(document).ready(function(){
 
 
 
$('#register').click(function() {
 
            $('#myModal').modal();
 
        });
 
 
 
        $(document).on('submit', '#formRegister', function(e) {
 
            e.preventDefault();
 
 
 
            $('input+small').text('');
 
            $('input').parent().removeClass('has-error');
 
 
 
            $.ajax({
 
                method: $(this).attr('method'),
 
                url: $(this).attr('action'),
 
                data: $(this).serialize(),
 
                dataType: "json"
 
            })
 
            .done(function(data) {
 
                $('.alert-success').removeClass('hidden');
 
                $('#myModal').modal('hide');
 
                $('#nom').val('');
 
                $('#prenom').val('');
 
                addRow(data);
 
            })
 
            .fail(function(data) {
 
                $.each(data.responseJSON, function (key, value) {
 
                    var input = '#formRegister input[name=' + key + ']';
 
                    $(input + '+small').text(value);
 
                    $(input).parent().addClass('has-error');
 
                });
 
            });
 
 
 
            function addRow(data){
 
        var row = '<tr>'+
 
              '<td>'+ data.id + '</td>'+
 
              '<td>'+ data.nom + '</td>'+
 
              '<td>'+ data.prenom + '</td>'+
 
              '<td class="text-center"><a href="#" class="btn btn-success" data-toggle="modal" data-target="#modalEdit" type="submit"><span class="fa fa-eye">Editer</a></td>'+
 
              '<td class="text-center"><a href="#" class="btn btn-danger" data-toggle="modal" data-target="#modalEdit" type="submit"><span class="fa fa-eye">Supprimer</a></td>'+
 
              '</tr>';
 
              $('tbody').append(row);
 
             }
 
 
 
        });
 
     })

Je tiens également précisé que je voudrais le faire avec une fenêtre modale

[vbakyi]

Salut,

Finalement j'ai pu trouver la solution à mon problème, comme on le dis qui cherche trouve

Voici le code en espérant que cela servira à quelqu'un :

$(function(){
$('#edit-modal').click(function() {
$('#myModal').modal();
});
$(document).on('submit', '#formRegister', function(e) {
e.preventDefault();
$('input+small').text('');
$('input').parent().removeClass('has-error');
$.ajax({
method: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: "json"
})
.done(function(data) {
if(data.fail){
$.each(data , function (){
$.each(this, function(key, value){
var input = '#formRegister input[name=' + key + ']';
var select = '#formRegister select[name=' + key +']';
$(input + '+small').text(value);
$(input).parent().addClass('has-error');
$(select + '+small').text(value);
$(select).parent().addClass('has-error');
});
});
}else {
$('#nom').val('');
$('#prenom').val('');
$('#matricule').val('');
$('#telephone').val('');
$('#sexe').val('');
addRow(data);
}
})
.fail(function (xhr, textStatus, errorThrown) {
alert("Error: " + errorThrown);
});
});

function addRow(data){
var row = '<tr>'+
'<td>'+ data.matricule + '</td>'+
'<td>'+ data.nom + '</td>'+
'<td>'+ data.prenom + '</td>'+
'<td>'+ data.telephone + '</td>'+
'<td>'+ data.sexe + '</td>'+
'<td><button class="btn bg-cyan btn-block waves-effect btn-edit" id="edit-modal" type="button" data-id={{ $eleve->id }} data-matricule= "{{$eleve->matricule}}" data-nom="{{$eleve->nom}}" data-prenom="{{$eleve->prenom}}" data-telephone=" {{$eleve->telephone}}" data-sexe="{{$eleve->sexe}}">'+
'<span class="glyphicon glyphicon-edit"></span><a href="#ancre" style="color:white">Editer</a></button></td>'+
'<td><button class="btn bg-red btn-block waves-effect"><span class="glyphicon glyphicon-trash"></span>Supprimer</button></td>'+
'</tr>';
$('tbody').append(row);
}
})

Merci et à bientôt