web-dev-qa-db-fra.com

Mon javascript renvoie cette erreur: $ .ajax n'est pas une fonction

Je ne sais pas ce qui ne va pas, mais je reçois cette erreur de ma console chrome:

jquery-3.2.1.slim.min.js:1244 jQuery.Deferred exception: $.ajax is not a function TypeError: $.ajax is not a function
    at HTMLDocument.<anonymous> (file:///C:/Users/Adam/Desktop/UseTime/js/example.js:3:7)
    at j (file:///C:/Users/Adam/Desktop/UseTime/js/jquery-3.2.1.slim.min.js:1193:55)
    at k (file:///C:/Users/Adam/Desktop/UseTime/js/jquery-3.2.1.slim.min.js:1199:45) undefined
r.Deferred.exceptionHook @ jquery-3.2.1.slim.min.js:1244
jquery-3.2.1.slim.min.js:1247 Uncaught TypeError: $.ajax is not a function
    at HTMLDocument.<anonymous> (example.js:3)
    at j (jquery-3.2.1.slim.min.js:1193)
    at k (jquery-3.2.1.slim.min.js:1199)

De ce JavaScript:

$(function() { //when the DOM is ready
    var times; //declare global variable
    $.ajax({ //set up request
        beforeSend: function (xhr) { //before requesting data
            if (xhr.overrideMimeType) { //if supported
                xhr.overrideMimeType("application/json"); // set MIME to prevent errors
            }
        }
    });
    //funciton that collect data from the json file
    function loadTimetable() { //decalre function
        $.getJSON('data/example.json') //try to collect json data
            .done(function (data) { //if succesful
                times = data; //store in variable
            }).fail(function () { //if a problem: show message
                $('#event').html('Sorry! we couldnt load your time table at the moment');
            });
    }
    loadTimetable(); //call the function

    //CLICK ON TEH EVENT TO LOAD A TIME TABLE
    $('#content').on('click', '#event a', function (e) { //user clicks on place
        e.preventDefault(); //prevent loading page
        var loc = this.id.toUpperCase(); //get value of id attr
        var newContent = "";
        for (var i = 0; i < times[loc].length; i++) { // loop through sessions
            newContent += '<li><span class = "time">' + times[loc][i].time + '</span>';
            newContent += '<a href = "descriptions.html#';
            newContent += times[loc][i].title.replace(/ /g, '-') + '">';
            newContent += times[loc][i].title + '</a></li>';
        }
        $('#sessions').html('<ul>' + newContent + '</ul>'); // Display Time
        $('#event a.current').removeClass('current'); // update selected link
        $(this).addClass('current');
        $('#details').text('');
    });

    //CLICK ON A SESSION TO LEAD THE DESCRIPTION
    $('#content').on('click', '#sessions li a', function (e) { //click on session
        e.preventDefault(); // prevent loading
        var fragment = this.href; //title is in href
        fragment = fragment.replace('#', ' #'); //Add Space before #
        $('#details').load(fragment); //to load info
        $('#sessions a.current').removeClass('current'); //update selected
    });

    //CLICK ON PRIMARY NAVIGATION
    $('nav a').on('click', function (e) { //click on nav
        e.preventDefault(); //prevent loading
        var url = this.href; //get UR: to load
        $('nav a.current').removeClass('current');
        $(this).addClass('current');
        $('#container').remove(); //remove old
        $('#content').load(url + ' #container').hide().fadeIn('slow'); // add new
    });
});

Je ne sais pas si c'est un problème avec la façon dont j'ai lancé .ajax ou si mon jquery n'est pas correctement implémenté. Je pense que c'est. Des pensées?

edit: voici le code HTML associé au script ci-dessus

<!DOCTYPE html>

<body>
    <header>
        <h1>UseTime</h1>
        <nav>
            <a href="jq-load.html">HOME</a>
            <a href="jq-load.html2">PROFILE</a>
            <a href="jq-load.html4">MANAGE TASKS</a>
            <a href="usetime.html">TIME TABLE</a>
        </nav>
    </header>
    <section id="content">
        <div id="container">
            <div class="third">
                <div id="event">
                    <a id="class1" href="class1.html"><img src="" alt="class1" /> Class 1 </a>
                    <a id="class2" href="class2.html"><img src="" alt="class2" /> Class 2 </a>
                    <a id="class3" href="class3.html"><img src="" alt="class3" /> Class 3 </a>
                </div>
            </div>
            <div class="third">
                <div id="sessions"> Select a Class from the left </div>
            </div>
            <div class="third">
                <div id="details"> Details </div>
            </div>
        </div>
        <!-- container -->
    </section>
    <!-- content -->

    <script src="js/jquery-3.2.1.slim.min.js"></script>
    <script src="js/example.js"></script>
</body>
javascriptjqueryajaxtypeerror
34
Adamwuh

Vous utilisez la version slim de jQuery. Il ne supporte pas l'appel ajax. Utilisation

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

au lieu de cela.

Slim build

Parfois, vous n'avez pas besoin d'ajax, ou vous préférez utiliser l'une des nombreuses bibliothèques autonomes qui se concentrent sur les requêtes ajax. Et souvent, il est plus simple d’utiliser une combinaison de CSS et de manipulation de classe pour toutes vos animations Web. Outre la version standard de jQuery, qui inclut les modules ajax et effets, nous avons publié une version "mince" qui exclut ces modules. Globalement, cela exclut ajax, les effets et le code actuellement obsolète. La taille de jQuery est très rarement une préoccupation de performances de chargement de nos jours, mais la construction mince est environ 6k octets compressés plus petit que la version normale - 23.6k vs 30k. Ces fichiers sont également disponibles dans les packages npm et CDN:

https://code.jquery.com/jquery-3.1.1.slim.js
https://code.jquery.com/jquery-3.1.1.slim.min.js

Référé de jQuery Blog

107
AdhershMNair

la version slim de jQuery 3 ne prend pas en charge l'ajax.

Selon le release docs ,

Outre la version standard de jQuery, qui inclut les modules ajax et effets, nous publions une version "mince" qui exclut ces modules. Au total, il exclut ajax , les effets et le code actuellement obsolète.

Pour utiliser la méthode .ajax, utilisez simplement la version complète.

Essayez celui-ci (jquery-3.2.1.min.js) au lieu de slim (jquery-3.2.1.slim.min.js)

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
10
Arun