[Résolu] Style css jquery mobile s'applique sur toutes les pages

Bonjour;
Comme indiqué dans le sujet, j'ai un problème avec mes feuilles de styles css utilisées par JQuery Mobile, qui sont réutilisés sur toutes mes pages sans que je les ai inclues.

En effet, j'ai un site web sur lequel j'ai un formulaire, et j'ai voulu utiliser JQuery Mobile pour le concevoir. Tout fonctionne, le problème commence quand je veux retourner sur les autres pages, notamment au niveau du background ou de ma barre de menu. Il conserve le style css imposé par JQuery Mobile alors que je n’inclus pas le fichier dans mon code source. Je ne peux donc plus choisir mon background ni le style de ma barre de menu sans modifier le fichier css jquery mobile...
De plus, comme internet explorer n'est pas vraiment compatible, je retrouve des problèmes sur toutes mes pages alors que je n'en avais que sur celle-ci.
Je voudrais donc savoir s'il est possible d'empêcher à mes autres pages d'utiliser cette feuille de style pour que mon problème sois résolu

Merci à vous !

Louk49

Normalement si t n'inclus pas le cas jquery mobile sur ta page alors il ne sera pas pris en compte. Tu utilise peut être un include php qui ajoute la CSS automatiquement sans que tu t'en rend compte. Sinon je ne connais pas bien jquery mobile mais la CSS est peut être inclus par le biais d'un script js auquel cas il faut aussi faire attention à ne pas mettre le je partout. Enfin, dans tout les cas, sauf problème de cache si tu dit ne pas avoir inclus la CSS sur ta page alors il ne va pas s'appliquer à celle si donc verifie bien elle doit être incluse qu'elle que part.

Salut thej8 et merci à toi pour ta réponse
J'ai effectivement un include php mais qui n'inclut que mon header, et je n'appelle pas dans ce fichier le fichier css...
J'ai aussi des fonctions javascript, mais qui n'appellent pas non plus ce fichier, à moins que ce ne soit les fichiers de jquery, mais qui sont en ligne et que je n'ai donc jamais modifiés ni même ouvert :

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 

Si je reste sur les pages qui ne contiennent pas de jquery mobile, je garde mon style css. Si je vais sur la page avec mon formulaire, écrit en jquery mobile, et qu'ensuite je retourne sur les autres pages, il garde certains éléments avec le style jquery... comme le background. Je m'en rend compte quand je fait "inspecter l'élément", pour voir pourquoi mon fond d'écran n'apparaît plus. Si je désactive tout ce qui concerne le background jquery et qui apparemment prend le dessus, je retrouve bien le fond d'écran que j'avais choisi.
Du coup pour le moment j'ai supprimé les parties qui correspondent au style du fond d'écran dans mon fichier css jquery, mais je préférerais que mes autres pages n'utilisent pas cette feuille de style, car tous mes boutons changent de forme sur les autres pages sans que je ne leur demande rien !

Utilise tu un système ajax ? ce qui pourrais expliquer la persistence de la css.
(au faite on dit la css ou le css, j'ai tendance à dire le mais vu que je lis surtout "la" je préfère l'utiliser sur les forums)
Sinon peut tu le mettre en ligne ?

C'est sur ces pages, le site est en construction, je travaille bénévolement avec un autre : www.cckmj.org/beta/.
Le problème commence après avoir visité la page réservation en ligne (cckmj.org/beta/location/reservation.php) avec le formulaire. Oui, j'envoie mes données au fichier d'envoi php à l'aide d'ajax, et je ne maîtrise pas totalement le sujet

Bonjour à tous,

thej8 a écrit :
Utilise tu un système ajax ? ce qui pourrais expliquer la persistence de la css...

... et en effet, jQuery Mobile fonctionne avec de l'ajax.

Tout votre problème réside dans le fait que la première page chargée de votre site contiendra tous les CSS et JS, et initialisera $.mobile. A partir de cette l'initialisation, seuls les contenus de <div data-role="page" /> des pages mobiles suivantes seront récupérés (donc sans le <header />) :

- soit en ajax : voir jQUery Mobile - Introduction - Ajax Navigation & Transitions
- soit directement dans la page en cours (vous pouvez mettre plusieurs pages mobiles différentes dans une seule page HTML. Voir : jQuery Mobile - Multi-page template structure).

Si vous souhaitez différentier l'aspect de vos pages, le plus simple techniquement serait d'attribuer un id ou une classe à votre contenu de page. Ex : <div data-role="page" class="ma-classe" />, ou <div data-role="page" id="mon-id" />.

Vous n'auriez plus qu'à définir le CSS de votre page ainsi :

.ui-mobile .ma-classe {
    /* votre CSS */
}

#mon-id {
    /* votre CSS */
}

Espérant que cette solution vous convienne.
Bonnes recherches et bon code...
Modifié par Guiwint (10 Mar 2014 - 14:09)

Je n'ai pas le problème que tu décris. (réinitialise ton cache). Pour ce qui st du form de réservation, au lieu de le mettre en "POPUP" intègre le directement dans la page, devoir cliquer sur un lien en plus est contre productifs, d'autant plus que tes liens ne sont pas détectables facilement comme tel, en effet vu qu'il sont noir, on ne les repère pas aussi facilement que si ils étaient bleu, j'ai eu du mal a comprendre que ce que je prenais pour un titre est en faite un lien.

Pour ton site, je ne vois pas vraiment l'apport de l'utilisation de l'ajax, c'est sympa pour le petit fondu au chargment mais je pense que ca apporte plus de difficultés que de bénéfices.

Rebonjour !

Mais si je comprends bien, vous n'avez utilisé jQuery Mobile que pour une seule page sur tout le site ?

Oui, pour le moment je fais des essais, j'ai voulu faire mon formulaire sous forme JQuery Mobile dans le but d'apprendre. Pour l'instant il n'y a donc que ce formulaire que j'ai fait de cette façon.
Il n'est pas possible de rafraîchir le <head> à chaque changement de page ?
Modifié par louk49 (10 Mar 2014 - 14:18)

thej8, le problème du background est résolu car j'ai supprimé la partie du code css jquery. Par contre, il continue de charger cette feuille de style css car si on va sur la page contact, le formulaire prend la forme des zones de texte jQuery Mobile.
Je n'ai pas du tout terminé cette partie et elle ne devrait pas être en ligne, c'est pour l'instant des essais que je fait et je ne sais pas si je vais garder le fait qu'elle s'ouvre en Popup, mais ce qui est sur c'est que la page réservation ne restera pas tel quel, des explications seront données et un bouton plus visible et plus compréhensible sera mis en place si nous décidons de garder la popup.
Merci en tout cas de donner vos avis, même si comme je le disais il est en construction et même les textes vont être modifiés. Je l'ai mis en ligne afin que vous puissiez mieux comprendre mon problème

A tu testé la méthode de Guiwint qui me parait être la bonne ?

Et oui ce n'était que des petits conseils je me doute bien que lorsque l'on est encore dans la création du site tout n'est pas encore parfait .

La, vous êtes face à un conflit technique et fonctionnel !

jQuery Mobile n'a pas vocation à fournir le type de résultat que vous visez. C'est :
1 - soit je clique, et j'ai de l'ajax et une belle transition CSS3,
2 - soit je clique et je recharge une page entière seule (<head /> & <body /> propres), mais sans transition CSS3.

Pour le point 2, il suffit de configurer un lien dans jQuery Mobile tels quel :

<a href="#" data-ajax="false">Mon lien sans ajax</a>

Ensuite "tordre" jQuery Mobile reste possible, il faudrait vous orienter vers les événements liés au chargement de page (Page load events).

Bonne chance et bon code...
Modifié par Guiwint (10 Mar 2014 - 14:53)

En fait je ne veux pas forcément des effets de transitions provoqués par ajax, je l'utilise seulement pour envoyer les données de mon formulaire à mon fichier php. J'avais placé le code du formulaire dans le même fichier "Réservation en ligne" sous la forme

<div data-role="dialog" id="formulaire">

qui était ouverte par un lien

<a href="#formulaire" data-rel="dialog">

situé dans la partie

<div data-role="page" id="pageReservation">

Je me suis rendu compte qu'en plaçant mon formulaire dans un autre fichier html, je n'avais plus ce problème de style css s'appliquant sur les autres pages. Cela résout donc en théorie mon problème, mais je remarque que mon formulaire ne s'ouvre plus sous la forme "ui-state=dialog", comme à cette adresse : "http://cckmj.org/beta/location/reservation.php#&ui-state=dialog", mais sous la forme "http://cckmj.org/beta/location/formulaire-reservation.php/formulaire" avec dans mon fichier formulaire-reservation.php la partie

<div data-role="dialog" id="formulaire">

Le problème, c'est qu'il n'a plus du tout la même mise en forme ! Tout mes éléments avaient changés de place, plus rien d'ordonné.
Je commence à être perdu et à ne plus comprendre tout ce qui se passe

Bonjour louk49,

Si je cerne bien, ce qui vous intéressez, c'était uniquement la mise en forme des formulaires de jQuery Mobile ?

Le soucis, c'est que vous abordez jQuery Mobile comme une bibliothèque complémentaire à un projet, alors que fondamentalement, jQM est la pierre angulaire d'une webapp à laquelle se rattachent des librairies complémentaires.

Si vous souhaitez enrichir votre site et votre interface, jQuery UI http://jqueryui.com/ est plus à même à répondre à ce type de besoin. Vous retrouverez :
- des boîtes de dialogues pour formulaire - http://jqueryui.com/dialog/#modal-form
- des champs de saisie de date - http://jqueryui.com/datepicker/
- des boutons checkbox - http://jqueryui.com/button/#checkbox
- des boutons radios - http://jqueryui.com/button/#radio
- des sliders - http://jqueryui.com/slider/#steps

Et là vous n'aurez plus qu'à rajouter vos librairies JS et CSS http://jqueryui.com/download/all/ dans le <head /> de vos pages. Vous arriverez avec jQuery UI à avoir un rendu et des fonctionnalités similaires à jQuery Mobile, mais sans les contraintes que vous rencontrez.

Petite cerise sur le gâteau : vous pouvez personnaliser le thème jQuery UI en ligne
( http://jqueryui.com/themeroller/ )

Si vous continuez avec jQuery Mobile, vous vous baladerez sur un sentier non prévu pour les sorties familiales

En l'attente de votre feedback, bon code...
Modifié par Guiwint (11 Mar 2014 - 11:01)

Merci pour ces informations
Je n'avais pas bien compris comment utiliser jQuery Mobile, c'était ça mon problème ! Maintenant que je sais qu'il faut que j'utilise jQuery, j'ai essayé de réécrire mon formulaire. Il n'est pas possible d'avoir les mêmes style que ceux utilisés par jQuery Mobile, par exemple pour les sliders ou les calendriers ?
Merci en tout cas, mon problème est résolu, il faut juste que je comprenne comment fonction jQuery maintenant

Bonjour louk49,

Je comprend votre frustration, vous vous étiez habitué à la charte de jQuery Mobile

Guiwint a écrit :
Vous arriverez avec jQuery UI à avoir un rendu et des fonctionnalités similaires à jQM, mais sans les contraintes que vous rencontrez.

Je me suis mal exprimé : jQM et jQ UI sont des librairies bien séparées. Elles ont quelques fonctionnalités proches (sliders, boutons checkbox & radios, etc) mais vous n'avez pas par défaut les mêmes rendus.

Je n'ai pas trouvé, durant ma première vague de recherches, de thème jQM pour jQ UI.

Avoir un rendu exact n'est pas impossible, mais là vous êtes dans le domaine du sur-mesure et ... de la bidouille : il faudra récupérer dans jQM les portions de CSS qui vous intéressent pour les injecter dans jQ UI. Ce ne sera pas un exercice évidant à faire.

Le plus simple dans votre cas serait d'utiliser le système de personnalisation de thème de jQ UI, d'exploiter les rendus et fonctionnalités par défaut... et voir un peu plus tard la personnalisation CSS quand vous serez plus à l'aise.

Bonne continuation et bon code...
Modifié par Guiwint (12 Mar 2014 - 09:36)