Comptabilité jQuery
Bonjour à tous :)
Mes connaissances en jQuery et JS étant pauvres, je sollicite votre aide pour un petit conseil de compatibilité...
J'ai un système de recherche qui nécessite entre les balises <head> le code suivant :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">Et un système de recherche intuitif qui nécessite le code suivant :
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>Que me conseillez-vous afin de pouvoir utiliser mes deux système sans soucis de compatibilité ?
Car je ne peux pas mettre les deux ensembles et chacun n'est pas compatible pour les deux...
Merci :)
37 réponses
Salut,
instinctivement j'aurai gardé le jQuery et jQuery UI MAX, et les 2 CSS.
Ça ne fonctionne pas ça ?
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>Ne t'excuse pas lol merci pour ton message c'est toujours appréciable d'avoir du monde qui t'aide ^^
Salut. Garde les versions les plus récentes, et ajoute le plugin jquery migrate. Peut etre que ça ne fonctionne pas car certaines fonctions composant le code ont été depréciées.
Peux-tu me dire comment faire stp ? :) Je n'y connais rien malheureusement...
Salut
http://code.jquery.com/jquery-migrate-1.2.1.js.
Tu copie ce code et le colle dans un fichier js "jquery-migrate.js" par exemple, que tu inclu dans ton head
Au final j'ai ça et seul l'autocomplete fonctionne (comme avant en fait) :
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="js/jquery-migrate.js"></script>
Charge le jquery migrate avant les autres. Tu as une page que l'on peut consulter pour voir les erreurs console?
Que je le charge avec les autres, c'est à dire ? le tout est entre les "head"
Alors, dans ma console j'ai cela (ça va peut-être t'aider :)) :
TypeError: undefined is not an object (evaluating 'jQuery.attrHooks.value') jquery-migrate.js:85
fonction anonyme
global code
Ce que je voulais dire c'est que tu charges, dans l'ordre : jQuery, jQuery-ui, jQuery-migrate, et apres, tes autres scripts js.
Je suppose que pour ton systeme de recherche, tu as crée un / des scripts particuliers puisque tu as des dépendances. Charges ces scripts apres avoir chargé les fichiers relatifs a jQuery, et ajoute un
$(document).on('ready',function(){tes fonctions ici });
Avec les évolutions, certaines fonctions jQuery sont dépréciées, d'où le fait que je te demande d'ajouter jQuery-migrate, qui permets de les appliquer malgré l'utilisation d'une version de jQuery dans laquelle elles ne sont plus reconnues.
Je suis désolé de ne pas pouvoir plus t'aider, mais sans exemple visuel, ni accès à la console, ni au code source etc.. dur dur d'imaginer ton code ^^
Donc pour l'ordre des fichiers j'ai réctifié la position du premier :)
Pour le script, le voici :
<script>
$(function() {
$('#nom').autocomplete({
source : function(request, response)
{
$.ajax({
url: "noms.php",
minLength : 2,
type: "GET",
dataType: "json",
data: {term: $("#nom").val()},
success: function(data) { response(data); }
});
}
});
});
</script>et pour l'autre code :
<script>
$(document).ready(function() {
$('#recherche_avancee span').click(function(){
$('#recherche_avancee p').toggle(function(){
$('#recherche_avancee span p').slideUp();
}, function(){
$('#recherche_avancee span p').slideDown();
});
});
});
En sachant que les deux fonctionnent mais pas en même temps, tout dépend des fichiers jQuery utilisés.
Ok donc tu charge bien jquery, jquery-ui, jquery-migrate dans le head? Avec les css de dépendance pour l'autocomplete également? Et tes balises script sont situées en bas de page?
Aucune fonction n'a l'air d'avoir été dépréciée, donc englobe tes script comme ça :
<script type="text/javascript">
$('document').on('ready',function()
{
//ton script de recherche avancée sans le $(document).ready du coup
//ton script autocomplete
});
</script>Essaies d'épurer ton script de recherche avancée il me parrait bizarre la
Je suis perdu lool
Je test en laissant les <script> au même en droit mais avec ton modèle et les fichiers dedans ?
Cas ou tes fonctions sont écrites dans ton code html :
<head>
//jquery
//jquery-ui
//jquery-migrate
//jquery-css
</head>
<body>
blablabla
<script type="text/javascript">
$('document').on('ready',function()
{
//ton script de recherche avancée sans le $(document).ready du coup
//ton script autocomplete
});
</script>
</body>Cas ou tes scripts sont dans des js externes :
<head>
//jquery.js
//jquery-ui.js
//jquery-migrate.js
//jquery-css
//ton script de recherche avancée.js
//ton script autocomplete.js
</head>
<body>
blablabla
</body>Le soucis c'est que l'autocomplete ne fait pas partie de la recherche avancée et que ça ne m'arrange pas du tout de le mettre dedans
What? mais ca ne va pas imbriquer tes script, le $(document).on('ready') signifie juste que les scripts attendent le chargement complet de la page
Oui pardon, j'avais la tête autre part :)
donc finalement mon code est le suivant et la situation reste inchangée :
<script>
(function() {
$('#recherche_avancee span').click(function(){
$('#recherche_avancee p').toggle(function(){
$('#recherche_avancee span p').slideUp();
}, function(){
$('#recherche_avancee span p').slideDown();
});
});
});
</script>
Toujours pas de document.ready ^^
On tourne en rond là.. trouves un serveur gratuit, mais tout ça en ligne que l'on puisse consulter la console etc
Malheureusement je n'ai pas de domaine pour le moment ...
J'ai peur de ne pas te comprendre donc je vais tout reprendre sur ce message et si après y a une modifcation à faire n'hesitez pas :)
J'ai dans mon header :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="../js/jquery-migrate.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
J'ai dans ma page pour l'autocomplete qui fonctionne :
<script type="text/javascript">
$(function() {
$('#nom').autocomplete({
source : function(request, response)
{
$.ajax({
url: "noms.php",
minLength : 2,
type: "GET",
dataType: "json",
data: {term: $("#nom").val()},
success: function(data) { response(data); }
});
}
});
});
</script>Mon code pour la recherche avancée (qui ne fonctionne pas avec ce que j'ai dans le header) :
<script type="text/javascript">
$(document).ready(function() {
$('#recherche_avancee span').click(function(){
$('#recherche_avancee p').toggle(function(){
$('#recherche_avancee span p').slideUp();
}, function(){
$('#recherche_avancee span p').slideDown();
});
});
});
</script>
Dans ma console je n'ai qu'un message d'erreur :
TypeError: undefined is not an object (evaluating 'jQuery.attrHooks.value') jquery-migrate.js:85
(fonction anonyme) jquery-migrate.js:85
global code jquery-migrate.js:521
Dans "Reseau" :
valueAttrGet = jQuery.attrHooks.value && jQuery.attrHooks.value.get || ! undefined is not an object (evaluating 'jQuery.attrHooks.value')
Bah il te suffit de prendre un serveur gratuit chez byethost ou autres.
"undefined is not an object"... vérifie tes id '#recherche_avancee p' etc.. si ils sont exacts . Pour vérifier, tu fais un
alert( $('#recherche_avancee p').length );Pourquoi utiliser ces versions de jquery et jquery-ui qui sont très anciennes alors qu'il semble que l'autocomplete et le toggle soient encore disponible dans la dernière version de jquery-ui (1.12.0) ??
C'est sur que le code de la recherche avancée fonctionne puisqu'avec d'autres jquery ça marche :)
Onouriis si tu as d'autres lignes à me transmettre pour mon header n'hesites pas car en jquery je suis à la ramasse.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>et tes fonctions
$(document).ready(function() {
$('#recherche_avancee span').click(function(){
$('#recherche_avancee p').toggle(function(){
$('#recherche_avancee span p').slideUp();
}, function(){
$('#recherche_avancee span p').slideDown();
});
});
});
$('#nom').autocomplete({
source : function(request, response)
{
$.ajax({
url: "noms.php",
minLength : 2,
type: "GET",
dataType: "json",
data: {term: $("#nom").val()},
success: function(data) { response(data);
}
});
});Du coup la recherche avancée fonctionne mais plus l'autocomplete. Tu comprends mieux le problème lol
Et tu n'as pas d'erreur dans la console ?
D'ailleurs j'ai oublié une accolade dans la fonction. C'est peut être ça le soucis.
$(document).ready(function() {
$('#recherche_avancee span').click(function(){
$('#recherche_avancee p').toggle(function(){
$('#recherche_avancee span p').slideUp();
}, function(){
$('#recherche_avancee span p').slideDown();
});
});
});
$('#nom').autocomplete({
source : function(request, response)
{
$.ajax({
url: "noms.php",
minLength : 2,
type: "GET",
dataType: "json",
data: {term: $("#nom").val()},
success: function(data) { response(data); }
}
});
});Avec ce que tu m'as donné non aucun message d'erreur dans la console c'est encore plus perturbant
J'ai fait un edit dans mon précédent post parce que j'avais oublié une accoclade.
Mets ton code de la page ici : https://codeshare.io/
Je passe par wordpress donc c'est plusieurs page pour n'en former qu'une seule (header, footer, main, etc..)
Il n'y a pas une version jquery compatible avec les deux ?
Le soucis reste le même. Il n'y a que le changement des jquery qui provque le fonctionnement de l'un ou de l'autre.
Bonjour.
Malheureusement je n'ai pas de domaine pour le moment ...
Personne ne t'a demandé d'héberger ton site en ligne, donc pourquoi dire ceci ?
Lartak, si si je lui ai demandé de chopper un serveur gratuit et d'y upload son code pour que l'on puisse étudier la console ect.. car comme il le dit, il n'a pas une très bonne connaissance de jQuery, nos conseils ne me semblent pas très bien compris.