Sujet Précédent Sujet Suivant

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

Fermé
Raekh Messages postés 56 Date d'inscription mercredi 30 janvier 2013 Statut Membre Dernière intervention 11 mars 2015 - Modifié par Hex4g0n le 10/03/2015 à 18:40
Raekh Messages postés 56 Date d'inscription mercredi 30 janvier 2013 Statut Membre Dernière intervention 11 mars 2015 - 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.
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié par jordane45 le 10/03/2015 à 18:47
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
0
Raekh Messages postés 56 Date d'inscription mercredi 30 janvier 2013 Statut Membre Dernière intervention 11 mars 2015 4
10 mars 2015 à 18:58
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>
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 mars 2015 à 19:00
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
0
Réponse 2 / 2
Raekh Messages postés 56 Date d'inscription mercredi 30 janvier 2013 Statut Membre Dernière intervention 11 mars 2015 4
Modifié par Hex4g0n le 10/03/2015 à 19:06 
<!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.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié par jordane45 le 10/03/2015 à 19:27
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);
            }
          }); 
    }
0
Raekh Messages postés 56 Date d'inscription mercredi 30 janvier 2013 Statut Membre Dernière intervention 11 mars 2015 4 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
Modifié par Hex4g0n le 10/03/2015 à 20:17
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 ?
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 mars 2015 à 20:18
Le submit lance un refresh de la page... donc... non
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
10 mars 2015 à 22:46
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.
-1
Raekh Messages postés 56 Date d'inscription mercredi 30 janvier 2013 Statut Membre Dernière intervention 11 mars 2015 4 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
11 mars 2015 à 11:40
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.
0

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Retour en arrière avec Pages sur Mac ?
alex 2510 -
emma.plv -

13 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses