Menu
Not sure what's wrong but I'm getting this error from my chrome console:
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) From this 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 }); }); I'm not sure if it's an issue with the way I'm initiating .ajax or if my jquery isn't correctly implemented. I think it is. Any Thoughts?
edit: here's the html that goes with the script above
<!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> 
737
AJAX is not a programming language. It requires a built-in browser with the XMLHttpRequest object that requests data from the server, and it uses JavaScript and HTML DOM to display data.
Ajax is a programming concept. Below are some ways to make Ajax call in JavaScript. Approach 1: In this approach, we will use the XMLHttpRequest object to make Ajax call. The XMLHttpRequest() method which create XMLHttpRequest object which is used to make request with server.
Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the . ajaxError() method are executed at this time. Note: This handler is not called for cross-domain script and cross-domain JSONP requests.
The best way to bubble that error from the server side (using php) to the client side is to send a header through the Ajax request somewhere in the 400's (which is always associated with errors). Once the Ajax request receives this it will trigger your error function.
You are using slim version of jQuery. It Doesn't support ajax Calling. Use
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> instead of it.
Slim build
Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version – 23.6k vs 30k. These files are also available in the npm package and on the CDN:
https://code.jquery.com/jquery-3.1.1.slim.js https://code.jquery.com/jquery-3.1.1.slim.min.js Referred from jQuery Blog
81
jQuery 3 slim version doesn't support ajax.
According to the release docs,
Along with the regular version of jQuery that includes the ajax and effects modules, we’re releasing a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code.
To use .ajax method, simply use the full version one.
Try this one (jquery-3.2.1.min.js) instead of slim (jquery-3.2.1.slim.min.js)
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
