11521 sujets

JavaScript, DOM et API Web HTML5

Utiliser le sélecteur remonte la page

Bonjour tous,

Comment éviter que chaque fois qu'on utilise un sélecteur, la page se remette en haut.
En fouillant il est dit qu'il faut un peu d'Ajax et le tour est joué.
Mais sans rien expliquer. Smiley ohwell
Bonjour.

Keuwaaa ?
Tu parles en quel langage ? En JS ? Il n'y a aucune raison pour laquelle une page remontterait quand on utilise un sélecteur...

Quelle est ta manip' exacte ?
Bonjour,

Pas reçu la notification ?

SolidSnake a écrit :

Quelle est ta manip' exacte ?

Je sélectionne au hazard et je me retrouve en haut de la page, comme quand on arrive ...

http://test.griggione.fr/pics/301.png 
<form id="form_combidecli" name="form_combidecli" method="post">
  <input type="hidden" name="action" value="combidecli" />
  <input type="hidden" name="ref" value="#REF" />
  <input type="hidden" name="id_rubrique" value="#RUBRIQUE" />
  <p> #TITRE
    <select name="declinaison#ID" style="float: none;" onchange="this.form.submit();">
      <option value="#ID">#TITRE</option>
    </select>
  </p>
</form>

Modifié par griggione (25 Jan 2015 - 07:38)
Ah effectivement,
ton formulaire est soumis au moment où tu sélectionnes une option dans ton <select>, donc ça recharge ta page (en cause le onchange).

Tout dépendra de ce que tu voudras faire après ta soumission de formulaire, mais effectivement, l'Ajax pourra t'aider (à ne pas recharger toute la page)
RE

Ce que j'avais lu en recherche, c'est pour ça que je suis venu sur ce sous-forum.
En espérant trouver la réponse Smiley cligne
RE

Beaucoup de réponses sur le site avec onchange, mais rien dans mon cas.
J'ai besoin de submit puisque le choix dans les deux sélecteurs m'affiche un total, mais comment empecher de remonter ?
En fait, je pense que tu devrais exposer ton problème en entier, parce que la solution pourrait être plus simple que prévu.

Par exemple, tu ne sembles pas appeler de page en PHP qui irait récupérer ou écrire une valeur dans une base de données, et donc que peut-être comme tu l'as écrit, tu fais juste un petit calcul.

Ce calcul (et l'affichage de son résultat) pourrait peut-être entièrement se faire en JS (et même pas besoin d'Ajax si c'est sur la même page).
Comment est fait ce calcul aujourd'hui ? Quel langage ?
Et que fait le bouton "Ajouter au panier" alors que ça ne raccroche pas directement sur une page ?
RE

En fait, c'est un plugin "combidecli" d'un cms, qui combine des déclinaisons, je met le code complet :
                  <!-- DEBUT combidecli -->
                  <script type="text/javascript">
          <!--
            function ajouter_combidecli()
            {
              var url = 'panier.php';
              try {
                var version_thelia = parseInt("#VARIABLE(version)".substring(0, 2));
                if (version_thelia > 14) url = '#VARIABLE(urlsite)/?fond=panier';
              } catch (ex) {
                // Rien
              }
                            var form = $('#form_combidecli');
                            form[0].setAttribute('action', url);
                            form.children('input[name="action"]').val('ajouter_combidecli');
                            form.submit();
            }
          // -->
                  </script>
                  <THELIA_combidecli_prix type="COMBIDECLI" boucle="stock" produit="#ID" stockmini="1">
                    <span class="prixProduit">#PROMO[#PRIX2 &euro; au lieu de #PRIX &euro;][- #PRIX &euro; -]</span>
                  </THELIA_combidecli_prix>
                  <div class="combidecli">
                    <form id="form_combidecli" name="form_combidecli" method="post">
                      <input type="hidden" name="action" value="combidecli" />
                      <input type="hidden" name="ref" value="#REF" />
                      <input type="hidden" name="id_rubrique" value="#RUBRIQUE" />
                       <THELIA_combidecli type="COMBIDECLI" boucle="combinaison" produit="#ID" stockmini="1">
                        <p> #TITRE:
                          <select name="declinaison#ID" onchange="this.form.submit();">
                            <THELIA_combideclidisp type="COMBIDECLI" boucle="declidisp" produit="#PRODUIT" declinaison="#ID" stockmini="1">
                              <option value="#ID" #FILTRE_egalite(#SELECTED||1||selected="selected")>#TITRE</option>
                            </THELIA_combideclidisp>
                          </select>
                        </p>
                      </THELIA_combidecli>
                      <T_combidecli_stock>
                        <br />
                        <p>
                          <select name="quantite" style="float: none;visibility:hidden;margin-top:-20px;">
                            <THELIA_combidecli_stock type="COMBIDECLI" boucle="quantite" max="15" produit="#ID">
                              <option value="#NUM">#NUM</option>
                            </THELIA_combidecli_stock>
                          </select>
                        </p> 
                        <p>
                          <a class="acheter" href="#" onclick="ajouter_combidecli(); return false;">
                            <span class="bouton">Ajouter au panier</span>
                          </a>
                        </p>
                      </T_combidecli_stock>
                        <p>Ce produit est actuellement en rupture de stock</p>
                      <//T_combidecli_stock>
                    </form>
                  </div>
                  <!-- FIN COMBIDECLI -->
bonjour
plusieurs notions
1-un selecteur a un nom comme selector1 dans le code <body id="selector1">
2-le body de <body...> est appelé element html ou tag de type body et il se trouve à un emplacement précis dans une page html .
page.html <html><head></head><body id="selector1> et le reste de la page </body> </html>
3- le selecteur selector1 est comme le cailloux du petit poucet pour retrouver son chemin.
Dans un page html on le le mettre en haut ( <body> ) ou dans tout autre éléments . Comme le but est de remonter la page depuis un autre endroit de la page . A partir de l autre endroit on va définir un lien qui va "afficher" ( faire apparaitre ) notre cailloux ( selector1) . En fait ,le navigateur va faire apparaitre l'endroit de la position du selector1 mais sans le montré car il est caché dans body et pas visible . Pour y arrivé il va faire faire bouger page . La page ne bougera pas que si la partie vsible de la page ne contient pas le selector1 . Dans le cas inverse la page va bouger pour se mettre a niveau du selector1 sans le dévoiler .
4- en plus du code dans le body en haut on va mettre tout en bas d une page juste avant le </body> le code suivant """ <a href="#selector1">le lien vers selector1</a>""" juste avant </body> ( et pas <body> ) . La page doit avoir beaucoups de contenu ( lignes ) pour faire apparaitre le scrollbar vertical du navigateur pour que cela fonctionne .
5-sauvegardez la page , et ouvrez la dans le navigateur et descendez tout en bas vers le lien " le lien vers selector1" . Cliquez dessus et la page descend brutalement vers le bas , devoilant la partie haute qui contient notre selector1 ( cailloux )
6- ce qui est fait manuellement statiquement avec du code déclaratif ( < name="" > < href=""> peu être fait avec du code javascript .
"Facile" dépend pour qui !!
7- votre question le code et les images n' ont aucun rapport.Posez votre problème sans donner votre solution interprétation ! et n'utlisez pas des mots qui non pas de sens pour vous !! (je suppose qu'ils ont pour nom sélecteurs et ajax )

@griggione
Vous êtes inscrit sur le site en 2006 donc depuis 9 ans .....vous vous informez sur css html javascript . Ma réponse ne doit pas être la bonne tellement elle est simpliste et évidente. si elle n est pas la bonne .... excusez moi .


Cordialement

<html>
<head>
</head>
<body id="selector1">
beaucoups de ligne a écrire ou un navigateur étroit
<a href="#selector1">tetster </a>
</body>
</html>
Modifié par 75lionel (01 Feb 2015 - 19:15)
Bonjour 75lionel

Merci d'avoir répondu.

Le code proposé est celui des ancres, hors mon problème est autre, je ne cherche pas à me positionner sur telle ou telle partie de la page mais au contraire ne pas bouger quand j'utilise un sélecteur. Smiley cligne
OK
quand vous écrivez sélecteur c'est http://www.w3schools.com/tags/tag_select.asp
soit le code <select> <option value="a">a</option> </select> ( votre capture ) .
Donc vous cliquez sur un sélecteur ( une "liste" cachée) pour l 'ouvrir et choisir un item ; et la page descend ( vous vous retrouver en haut de la page) et donc le pointeur de souris ne peut plus sélectionner un item !! .Cela signifie qu il existe un script attaché a cette liste ( il faut trouver le sélecteur utilisé par le script ici selecteur dans le sens jquery("selecteur")) . Le code de ce script ( Event registration) n'est pas obligatoire inline ( visible / présent au niveau du <select> ou du code de la page html ) comme les styles inline mais peut être dans <script> </script> ou fichier externe <script src="**.js "> . il existe des outils( spy) pour connaitre quel évènement est entrain de s exécuter et à partir de quel endroit ( n'est pas obligatoirement au niveau de la liste. un évênement déclenché au niveau de la liste peut être géré par les items se trouvant entre le context parent le plus haut window et l'élément qui a recu le click ) .

plusieurs voies de recherche ; faire un test après avoir
0)installer bookmarklet http://www.sprymedia.co.uk/article/Visual+Event
1) désactiver 1 a 1 chaque script
2)Changez les nom des id utlisé dans le formulaire (<form> pas seulement la liste <select> )
le formulaire ne fonctionnera pas ( mais semble déja le cas ) mais vous aurez une idée si le script ( "scroll") se sert de la valeur des id pour fonctionner .

ajax est un protocole en arrière plan qui permet au client de demander des données au serveur ( json html xml) pour les afficher dans une partie de la page sans recharger la page entiere ( repaint) . Le formulaire utilise t il ajax ? le formulaire reste visible identique mais une partie de la page ou se trouve se formulaire change suite à votre selection ?


cordialement
Modifié par 75lionel (02 Feb 2015 - 13:34)
Sujet clos
Aller à