type - llamar funcion php desde javascript ajax
Mi javascript devuelve este error: $.ajax no es una función (2)
No estoy seguro de qué sucede, pero recibo este error de mi consola 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 este 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
});
});
No estoy seguro de si es un problema con la forma en que estoy iniciando .ajax o si mi jquery no está implementado correctamente. Creo que es. ¿Alguna idea?
editar: aquí está el html que acompaña al script anterior
<!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>
Estás utilizando una versión delgada de jQuery. No admite llamadas ajax. Utilizar
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
en lugar de eso
Complexión delgada
A veces no necesita ajax, o prefiere usar una de las muchas bibliotecas independientes que se centran en las solicitudes de ajax. Y a menudo es más simple usar una combinación de CSS y manipulación de clases para todas sus animaciones web. Junto con la versión regular de jQuery que incluye los módulos ajax y de efectos, hemos lanzado una versión "delgada" que excluye estos módulos. En general, excluye ajax, los efectos y el código actualmente en desuso. El tamaño de jQuery rara vez es una preocupación de rendimiento de carga en estos días, pero la construcción delgada es aproximadamente 6k bytes comprimidos más pequeños que la versión normal: 23.6k frente a 30k. Estos archivos también están disponibles en el paquete npm y en el CDN:
https://code.jquery.com/jquery-3.1.1.slim.js
https://code.jquery.com/jquery-3.1.1.slim.min.js
Referido del blog jQuery
La versión delgada de jQuery 3 no es compatible con ajax.
Según los documentos de lanzamiento ,
Junto con la versión regular de jQuery que incluye los módulos ajax y de efectos, estamos lanzando una versión "delgada" que excluye estos módulos. En general, excluye ajax , los efectos y el código actualmente en desuso.
Para usar el método
.ajax
, simplemente use la versión completa uno.
Pruebe este (jquery-3.2.1.min.js) en lugar de slim (jquery-3.2.1.slim.min.js)
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>