Comptabilité jQuery

Par Maxime Rodriguez, il y a 9 ans

Javascript

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

SLK, il y a 9 ans

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>
Maxime Rodriguez, il y a 9 ans

Du coup ni l'un ni l'autre ne fonctionnent :D

SLK, il y a 9 ans

Mince... xD

Du coup désolé, je ne vois pas...

Maxime Rodriguez, il y a 9 ans

Ne t'excuse pas lol merci pour ton message c'est toujours appréciable d'avoir du monde qui t'aide ^^

Semeen, il y a 9 ans

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.

Maxime Rodriguez, il y a 9 ans

Peux-tu me dire comment faire stp ? :) Je n'y connais rien malheureusement...

Maxime Rodriguez, il y a 9 ans

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>
Semeen, il y a 9 ans

Charge le jquery migrate avant les autres. Tu as une page que l'on peut consulter pour voir les erreurs console?

Maxime Rodriguez, il y a 9 ans

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

Semeen, il y a 9 ans

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 ^^

Maxime Rodriguez, il y a 9 ans

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>
Maxime Rodriguez, il y a 9 ans

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.

Semeen, il y a 9 ans

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

Semeen, il y a 9 ans

Au temps pour moi ! le toogle est déprécié "version deprecated: 1.8, removed: 1.9"

Maxime Rodriguez, il y a 9 ans

Je suis perdu lool
Je test en laissant les <script> au même en droit mais avec ton modèle et les fichiers dedans ?

Semeen, il y a 9 ans

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>
Maxime Rodriguez, il y a 9 ans

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

Semeen, il y a 9 ans

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

Maxime Rodriguez, il y a 9 ans

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>
Semeen, il y a 9 ans

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

AlexJM, il y a 9 ans

Tu saurais faire un jsfiddle ou un codepen pour qu'on puisse voir ça ?

Maxime Rodriguez, il y a 9 ans

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')

Semeen, il y a 9 ans

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 );
Onouriis, il y a 9 ans

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) ??

Maxime Rodriguez, il y a 9 ans

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.

Onouriis, il y a 9 ans
<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); } }); });
Maxime Rodriguez, il y a 9 ans

Du coup la recherche avancée fonctionne mais plus l'autocomplete. Tu comprends mieux le problème lol

Onouriis, il y a 9 ans

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); } } }); });
Maxime Rodriguez, il y a 9 ans

Avec ce que tu m'as donné non aucun message d'erreur dans la console c'est encore plus perturbant

Onouriis, il y a 9 ans

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/

Maxime Rodriguez, il y a 9 ans

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 ?

Onouriis, il y a 9 ans

Et si tu inverses les deux fonctions, l'autocomplete fonctionne ?

Maxime Rodriguez, il y a 9 ans

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.

Lartak, il y a 9 ans

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 ?

Semeen, il y a 9 ans

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.

AlexJM, il y a 9 ans

Il suffit de faire un jsfiddle pour ça pas besoin de tout un hébergement je pense