Empêcher un bouton de faire revenir la page en haut

Raekh Messages postés 56 Date d'inscription Statut Membre Dernière intervention -
Raekh Messages postés 56 Date d'inscription Statut Membre Dernière intervention - 11 mars 2015 à 11:40

Bonjour,
Je suis actuellement en train de créer une base de données PhpMyAdmin couplée avec une interface html/css qui me permet de me tenir à jour des animés que je regarde, le dernier épisode regardé, etc...

Au sein de ma page principale, j'ai un tableau qui contient tous ces animés.
Et pour chaque animé j'ai, entre autres, une case dédiée au dernier épisode vu, directement modifiable via deux boutons + et - sur la case d'à côté.

Seulement voilà, dès que je clique sur ces boutons, la page revient en haut.
C'est-à-dire que si je désire modifier un animé de 9 épisodes, et qu'il se trouve en bas de la page, cela m'embête de devoir scroll 9 fois pour cliquer sur le bouton.

Y'a-t-il moyen :
- D'enlever l'action par défaut du bouton de remettre en haut de page ?
ou bien
- De lui assigner une fonction qui permet de rescroll automatiquement ?

Je vous remercie par avance.
Hex4g0n.

Afficher la suite

A voir également:

Empêcher un bouton de faire revenir la page en haut
Impossible de supprimer une page word - Guide
Comment revenir en arrière sur page mac - Forum MacOS
Comment revenir en arriere sur page mac - Forum MacOS
Comment faire une capture d'écran sur un samsung sans bouton ? - Guide
Revenir à la ligne dans une cellule excel mac - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Je suis actuellement en train de créer une base de données PhpMyAdmin

PhpMyadmin n'est pas une base de données .. c'est un logiciel (fait en PHP) qui permet de "manipuler" votre base de données....

Votre BDD est en réalité : MYSQL.

couplée avec une interface html/css

Le Html et le CSS ne servent qu'à "présenter" les données à l'écran.
Pour "Manipuler" votre base de données... vous devez utiliser un langage serveur... comme le PHP par exemple.

dès que je clique sur ces boutons, la page revient en haut.

Vos bouton sont surement du type SUBMIT ...
pour éviter cela, il faudra sûrement modifier un peu votre code pour le gérer en AJAX par exemple (ce qui évitera le refresh de la page...et donc de vous retrouver en haut...)

Pour faire de l'ajax, je préconise d'utiliser la librairie javascript : JQUERY.
Des exemples de code et d'utilisation sont disponibles sur le net.

Si vous ne parvenez pas à le faire fonctionner, vous devrez nous poster sur le forum votre code (en prenant bien soin d'utiliser les balises de code => Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
)

Cordialement,
Jordane

Raekh Messages postés 56 Date d'inscription Statut Membre Dernière intervention 4

Mes boutons ne sont pas en mode submit, voici un exemple :
<button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white;display:".hidden($row[5])."'name='low' value='".$row[0]."'>-</button>

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

là.comme ça..... ton code ne fait rien du tout....
Tu as donc surement du javascript en plus quelque part non ??
surement un code qui pourrait provoquer un SUBMIT par exemple .....

donc :
1 - Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

2 - Montre nous le code complet de ta page + des scripts JS s'il y en a

Cordialement,
Jordane

Réponse 2 / 2

Raekh Messages postés 56 Date d'inscription Statut Membre Dernière intervention 4

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js></script>
  <![endif]-->
  <title>Anime Database</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 </head>
 
 <body>
 <script type="text/javascript">
 $(window).scroll(function($element){
  posScroll = $($element).position();
  scrollTo(posScroll);
 });
 $('button').Click(scroll(this));

 </script>
  <div id="bandeau">
            <div id="titre_principal">
                <h1>Anime Database</h1>
            </div>
                
   <div id="nav_principal">
    <nav>
     <ul>
      <li><span class="selected">Animes en cours</span></li>
      <li><a href="add.php">Ajouter un anime</a></li>
      <li><a href="rm.php">Supprimer un anime</a></li>
      <li><form method="POST" action="recherche.php"><input type="text" name="recherche" placeholder="Rechercher un anime"/></form></li>
     </ul>
    </nav>
   </div>
  </div>
  <div id="corps">
   <div id="section">
   <h1>Animes dans la base de données :</h1>

   <?php
   //Fonctions pour la couleur
   function ifTrue($nombre)
   { 
    $var = "<span style='color:red'>??????????????</span>";
    ($nombre==1) ? $var="<span style='color:green'>??????????????</span>" : "";
    return $var;
   }

   function couleur($chaine,$id)
   {
    ($id==1) ? $chaine="<span style='color:green'>".$chaine."</span>" : $chaine="<span style='color:white;font-weight:bold;' >".$chaine."</span>";
    return $chaine;
   }

   function couleur2($chaine,$id,$fini)
   {
    if ($id==0)
     {
      $chaine="<span style='color:red;font-weight:bold'>".$chaine."</span>";
     }
    else if($fini==0)
     {
      $chaine="<span style='color:white;' >".$chaine."</span>";
     }
     else
     {
      $chaine="<span style='color:green;'>".$chaine."</span>";
     }
    return $chaine;
   }


   function hidden($var)
   {
    if ($var==0)
     {
      return 'inline';
     }
     else
     {
      return 'none';
     }
   }

   function jour($var,$fini)
   {
    if ($var!=NULL && $fini==0)
    {
     $var = "(".$var.")";
     return $var;
    }
    else
    {
     return "";
    }
     
   }
   
   require 'bdd.php';
   //Compteurs pour episode
   if (isset($_POST['low']))
   {
       $low = $_POST['low'];
       $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode-1 WHERE id=$low AND fini='0'");
       $req->execute();
       header('Location:index.php');
   }
   if (isset($_POST['high']))
   {
       $high = $_POST['high'];
       $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode+1 WHERE id=$high AND fini='0'");
       $req->execute();
       header('Location:index.php');
   }


   //Compteurs pour finition
   if (isset($_POST['fini']))
   {
    $fini = $_POST['fini'];
    $req=$bdd->prepare('UPDATE anime SET fini=1 WHERE id="'.$fini.'"');
    $req->execute();
    header('Location:index.php');
   }

   if (isset($_POST['pasfini']))
   {
    $pasfini = $_POST['pasfini'];
    $req=$bdd->prepare('UPDATE anime SET fini=0 WHERE id="'.$pasfini.'"');
    $req->execute();
    header('Location:index.php');
   }


   $req=$bdd->prepare("SELECT * FROM anime GROUP BY nom ORDER BY fini,nom");
   $req->execute();
   $donnee = $req->fetchAll();
   echo '<table>';
   echo '<tr><th>Nom</th><th>Année</th><th colspan=2>Dernier Episode vu</th><th colspan=2>Fini</th></tr>';


   foreach($donnee as $row)
   {

    // echo "<tr><td>".$row[1]."</td><td>".$row[2]."</td><td>".$row[3]."</td><td>".ifTrue($row[5])."</td>
    // <td><a href='index.php?decrementation=".$row[0]."'>-</a></td></tr>";
    echo "<tr>
    <td>".couleur($row[1],$row[5])."</td>
    <td>".$row[2]."</td>
    <td>".couleur2($row[3],$row[3],$row[5])." ".jour($row[4],$row[5])."</td>
    <td><form method='POST' action=''><center><button onclick()='window.scrollTo(this.position())' style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#808080;display:".hidden($row[5])."'name='high' value='".$row[0]."'>+</button></center></form>
     <form method='POST' action=''><center><button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white;display:".hidden($row[5])."'name='low' value='".$row[0]."'>-</button></form></td>
    <td>".ifTrue($row[5])."</td>
    <td>
     <form method='POST' action=''><center><button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#808080' name='fini' value='".$row[0]."'>Oui</button></center></form>
     <form method='POST' action=''><center><button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white' name='pasfini' value='".$row[0]."'>Non</button></center></form>
    </td>
    </tr>";
   }
   echo '</table>';

   // if (!empty($high) OR !empty($low))
   // {
   //  header('Location:index.php');
   // }
   ?>

  </div>
  </div>
 </body>
</html>

Voilà le code de la page principale index.php
J'ai tenté d'inclure du jquery, mais je n'y suis pas arrivé. Et c'est possible qu'il y ait des erreurs dans mon code, j'ai commencé le Php il y a 3 jours.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tu as essayé de faire comme le bouton d'au dessus en ajoutant :

onclick()='window.scrollTo(this.position())'

Sachant que .... tu fais bien du SUBMIT ... tes BUTTON étant dans des FORM

 <td><form method='POST' action=''><center><button onclick()='window.scrollTo(this.position())' style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#808080;display:".hidden($row[5])."'name='high' value='".$row[0]."'>+</button></center></form>
     <form method='POST' action=''><center><button style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white;display:".hidden($row[5])."'name='low' value='".$row[0]."'>-</button></form></td>

et que ça fait donc appel à :

   if (isset($_POST['low']))
   {
       $low = $_POST['low'];
       $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode-1 WHERE id=$low AND fini='0'");
       $req->execute();
       header('Location:index.php');
   }
   if (isset($_POST['high']))
   {
       $high = $_POST['high'];
       $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode+1 WHERE id=$high AND fini='0'");
       $req->execute();
       header('Location:index.php');
   }

....

Mais bon...Perso.. plutôt que d'utiliser du SUBMIT ..(comme je te l'ai dit avant).. je passerai par de l'AJAX.

Donc : Tu créés une page PHP contenant les fonctions ( low /hight ...)

<?php
require 'bdd.php';
$action = isset($_POST['action'])?$_POST['action']:NULL;
$id = isset($_POST['id'])?$_POST['id']:NULL;
if($id){
switch($action){
 case "low":
   $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode-1
            WHERE id=$id  AND fini='0'");
       $result = $req->execute();
      break;
  case "hight":
    $req=$bdd->prepare("UPDATE anime SET dernier_episode=dernier_episode+1
              WHERE id=$high AND fini='0'");
      $result = $req->execute();
      break;
 default:
 $result = "Erreur : Action inconnue";
 break;
}
}else{
 $result = " No ID !";
}
echo $result;
?>

Tu assignes à tes boutons un ONCLICK qui fera appel à un script JS

<button onclick="PlusMoins(\"'.$row[0].'\","low")" style='border:medium none;width:125px;box-shadow:0px 2px 5px black;background-color:#202020;color:white;display:".hidden($row[5])."'name='low' value='".$row[0]."'>-</button>

et le code JS sera un truc du genre :

var urlAjx = "ton_fichier_php_contenant_les_fonctions";
function PlusMoins(id,type){
  $.ajax({ 
       type: "POST",
           url:urlAjx,
           data: {action:type ,id:id},           
           async: false,
           dataType: "html",
           success: function(reponse){
             //ici tu peux mettre du code en cas de succes...
             },
           error:function(errMsg){
            alert('erro ! \n'+errMsg);
            }
          }); 
    }

Raekh Messages postés 56 Date d'inscription Statut Membre Dernière intervention 4 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Il n'y a donc aucun moyen d'effectuer ces actions autrement que par ce biais?
Et l'autre option envisagée, celle de supprimer l'action par défaut du bouton, n'est-elle pas possible ?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Le submit lance un refresh de la page... donc... non

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Et puis.... qu'est-ce qui te gêne dans le code que je t'ai donné ?
C'est plus "pro" que de faire du submit à chaque fois que tu cliques sur un bouton....
Bien sûr.. je n'ai coder que l'insert/update ......
pour actualiser le nombre de la case correspondante il te faudra le coder dans le "success" de l'ajax.... mais ça.. je te laisse chercher un peu.

Raekh Messages postés 56 Date d'inscription Statut Membre Dernière intervention 4 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

Ce n'était pas le "pro" que je recherchais mais une solution simple et efficace. De plus je n'y connais rien en javascript, j'apprends ces notions (SQL,Html,CSS,Php) seul depuis 5 jours, mais le javascript me semble très compliqué.
Je vais cependant explorer cette voie, je mettrai mes futurs avancements dans ce topic.

Discussions similaires

Retour en arrière avec Pages sur Mac ?

Revenir à la page précédente avec le clavier

Où est la touche SHIFT sur mon clavier d'ordi ?

Message "Un bloqueur de publicité empêche la lecture..."

Retour arrière sur une application - Iphone

Votre réponse

Discussions similaires