Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
1920 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [Ajax] Récupèrer l'action lors d'événement après rechargement de page

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Ajax] Récupèrer l'action lors d'événement après rechargement de page

n°2307324
mecano31
Posté le 06-11-2017 à 14:18:13  profilanswer
 

Bonjour à tous,
 
J'aimerais savoir s'il est possible de récupérer les actions lors d'un événement jQuery après rechargement de page.  
Je m'explique, j'ai des champs radios, lorsqu'on coche une case je récupère la valeur de l'input via la requête ajax et je passe à l'étape suivante.
J'aimerais avoir la possibilité de revenir à l’étape précédente et récupérer la valeur du champ déjà coché. Dès que je recharche la page les infos disparaissent.  
 
Merci par avance !
 
Cdlt,

mood
Publicité
Posté le 06-11-2017 à 14:18:13  profilanswer
 

n°2307326
SICKofitAL​L
Razoreater
Posté le 06-11-2017 à 15:55:10  profilanswer
 

Tu peux modifier la query string de l'url, ou utiliser history.pushState, ou encore passer par LocalStorage ou SessionStorage :
https://developer.mozilla.org/en-US [...] e()_method
https://developer.mozilla.org/en-US [...] calStorage
https://developer.mozilla.org/en-US [...] ionStorage


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°2307355
mecano31
Posté le 07-11-2017 à 10:33:50  profilanswer
 

Bonjour @SICKofitALL,
 
Merci d'avoir pris le temps de me répondre.
Je vais regarder les liens que tu m'as envoyé et je reviendrai vers toi en cas de questions.
 
Cdlt,

n°2307364
SICKofitAL​L
Razoreater
Posté le 07-11-2017 à 13:03:39  profilanswer
 

Re
 
n'oublies pas que tu peux aussi tout simplement envoyer les infos au serveur via XHR (ajax) et les remonter à la demande :)
Par exemple en PHP en utilisant $_SESSION ou expressjs/session sous nodeJS


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°2307370
mecano31
Posté le 07-11-2017 à 14:05:11  profilanswer
 

J'envoie bien les infos au serveur via XHR (Ajax).
Je te montre un exemple de mon code ci-dessous (par contre je ne connais rien en nodeJS comme tu l'avais évoqué) :
 

Code :
  1. <ul>
  2.       <li><input type="radio" name="news" value="news_1" id="1" class="hoveride"></li>
  3.       <li><input type="radio" name="news" value="news_2" id="2" class="hoveride"></li>
  4.       <li><input type="radio" name="news" value="news_3" id="3" class="hoveride"></li>
  5.       <li><input type="radio" name="news" value="news_4" id="4" class="hoveride"></li>
  6. </ul>
  7. <div class="template"></div>


Code :
  1. $('.hoveride').on('change', function(){
  2.      var $this = $(this);
  3.      var mesData = "id="+$(this).attr("id" )+"&temple="+$(this).val();
  4.       $("ul li" ).removeClass('active');
  5.       $(this).parent().addClass('active');
  6.       $.ajax({
  7.           type: "GET",
  8.           url: "template.php",
  9.           data: mesData,
  10.           success: function(data){
  11.               if (data !== ''){
  12.                   $(".template" ).html(data);
  13.               }
  14.           }
  15.       });
  16.       return false;
  17. });


Code :
  1. // template.php
  2. require_once('idb.php');
  3. $id = isset($_GET['id'])?$_GET['id']:'';
  4. $temple = isset($_GET['temple '])?$_GET['temple ']:'';
  5. if ($temple == 'news_1'){
  6.         $q = array('id' => $id, 'temple' => $temple);
  7. $sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
  8. $req = $db->prepare($sql);
  9. $req->execute($q) or die(print_r($req->errorInfo()));
  10. $rows = $req->fetchAll();
  11. } elseif ($temple == 'news_2'){
  12.         $q = array('id' => $id, 'temple' => $temple);
  13. $sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
  14. $req = $db->prepare($sql);
  15. $req->execute($q) or die(print_r($req->errorInfo()));
  16. $rows = $req->fetchAll();
  17. } elseif ($temple == 'news_3'){
  18.         $q = array('id' => $id, 'temple' => $temple);
  19. $sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
  20. $req = $db->prepare($sql);
  21. $req->execute($q) or die(print_r($req->errorInfo()));
  22. $rows = $req->fetchAll();
  23. } elseif ($temple == 'news_4'){
  24.         $q = array('id' => $id, 'temple' => $temple);
  25. $sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
  26. $req = $db->prepare($sql);
  27. $req->execute($q) or die(print_r($req->errorInfo()));
  28. $rows = $req->fetchAll();
  29. }
  30. foreach($rows as $row) {
  31.     $html = "<div>".$row['template_content']."</div> ";
  32.     echo $html;
  33. }

n°2307391
SICKofitAL​L
Razoreater
Posté le 07-11-2017 à 19:12:06  profilanswer
 

tu peux grandement simplifier ce code :
JS :

Code :
  1. $ ('.hoveride').on (
  2. 'change',
  3. function ()
  4. {
  5.  var $this = $ (this);
  6.  $this.parents ('ul').children ().removeClass ('active');
  7.  $this.parent ().addClass ('active');
  8.  $.ajax ({
  9.     type: "POST",
  10.     url:  "template.php",
  11.     data: { id: $this.attr ('id'), temple: $this.val () },
  12.     success: function (data)
  13.        {
  14.         if (data !== '')
  15.          {
  16.           $ (".template" ).html (data);
  17.          }
  18.        }
  19.    });
  20.  return false;
  21. });


 
PHP :

Code :
  1. $id = isset ($_POST['id']) ? $_POST['id'] : '';
  2. $temple = isset ($_POST['temple ']) ? $_POST['temple'] : '';
  3. $html = '';
  4. $q = [ 'id' => $id, 'temple' => $temple ];
  5. $sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
  6. $req = $db->prepare ($sql);
  7. $req->execute ($q) or die(print_r ($req->errorInfo ()));
  8. $rows = $req->fetchAll ();
  9. foreach ($rows as $row)
  10. {
  11.  $html = "<div>{$row['template_content']}</div> ";
  12. }
  13. echo $html;


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"
n°2307392
SICKofitAL​L
Razoreater
Posté le 07-11-2017 à 19:16:17  profilanswer
 

Et donc, dans ta partie PHP, tu peux sauvergarder dans ta base de données le choix de l'user.
Ensuite lorsque la page se charge, tu rends le les btns radios du coté serveur avec les infos correspondantes avec le contenu du div.template


---------------
"And at the end it is only YOU, ME AND THE VIOLENCE !"

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [Ajax] Récupèrer l'action lors d'événement après rechargement de page

 

Sujets relatifs
Reset plusieurs textbox.text sur la même page.Pied de page HTML
Ouverture d'une page d'un multipage avec un mot de passeEvenement touche python no gui
Récupérer des informations matériel (% cpu, ...) En temps reelRécupérer les shares facebook après migration vers https
Créer une page sur Adobe MuseComment envoyer formulaire ajax en cochant checkbox?
Impression et mise en page automatique[Ajax] Checker le changement d'un paragraphe actualisé en ajax
Plus de sujets relatifs à : [Ajax] Récupèrer l'action lors d'événement après rechargement de page


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR