Bonjour,

J'ai fait une suppression par ajax et je rencontre un probleme. Le code marche tres bien mais je ne peux pas effectuer deux suppression sans recharger la page

Ce que je fais

Code HTML

<form style="display: inline" action="/customers/delete/{{ customer.id }}" method="post">
           {{ csrf_input() }}
         <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Supprimer</button>
 </form>

Code JS

(function ($) {
    $('.table').one('click', '.btn-danger', function (e) {
        e.preventDefault()
        let csrf = $("input[name='_csrf']").val()
        let $btn = $(this)
        let url = $btn.parents('form').attr('action')
        $.ajax(url, {
            type: 'POST',
            data: {'_csrf' : csrf }})
            .done(function (data, text, jqxhr) {
               $btn.parents('tr').fadeOut()
            })
            .fail(function (jqxhr) {
                alert(jqxhr.responseText)
            })
            .always(function () {
                $btn.text('Chargement')
            })
    })

})(jQuery)

2 réponses


Pierrot01
Réponse acceptée

La doc pour l'event .one :
"Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type."
traduction : Le gestionnaire est exécuté au plus une fois par élément et par type d'événement.

.one c'est pas .two :D :D

a++

TheTakylo
Réponse acceptée

Si tu veut capturer plusieurs fois le même event tu as juste a faire comme ça

$('.table .btn-danger').on('click', function (e) {
        e.preventDefault()
        // ....
    })