11486 sujets

JavaScript, DOM et API Web HTML5

Bonjour à vous,

en fait, j'essaie d'utiliser la méthode sortable de la librairie jquery-ui mais je reçois une erreur :

VM20930:2 Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'refresh'
at Function.error (<anonymous>:2:2589)
at HTMLDivElement.<anonymous> (<anonymous>:6:5615)
at Function.each (<anonymous>:2:2976)
at S.fn.init.each (<anonymous>:2:1454)
at S.fn.init.t.fn.<computed> [as sortable] (<anonymous>:6:5357)
at Object.success (add.js:42)
at c (jquery-3.5.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.5.1.min.js:2)
at l (jquery-3.5.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2)

Je ne comprends pas pourquoi je reçois maintenant cette erreur car ça fonctionnait auparavant. Maintenant, j'ai même utilisé la version jquery-3.5.1.min.js à la place de la version jquery-3.5.1.min.js.

Par contre, je reçois également un avertissement par jQuery :

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Est-ce à cause du fait que je n'utilise pas la nouvelle nomenclature quand je code une requête ajax ?


$(document).ready(function() {
    // Adding item
    $('.list').on('click', '.add-item', function(e) {
        var item = this;

        // item_label
        var item_label = $(this).data('item-label');

        // AJAX Request
        $.ajax({
            url: 'add_item.php',
            type: 'POST',
            data: {
                'item_label' : item_label
            },
            success: function(response) {
    
                if (response == -1) {
                    alert("Impossible de créer un élément !!!");
                }
                else {
                    // Replace <div> with old situation by <div> with new situation
                    $('div#container').replaceWith($(response)).fadeOut(5000).fadeIn(5000);
                    // Scroll to the end of the screen with animation
                    $('html, body').animate({ 
                        scrollTop: $( 
                          'html, body').get(0).scrollHeight 
                    }, 500); 
                    // Refresh the sortable items when adding a new item (new item is adding to the sortable items)
                    $('div#form_items').sortable("refresh");
                }
            }
        });
    });
});


Merci d'avance.

Bonne journée,
Thierry