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

Récupèrer l'action lors d'événement après rechargement de page [Ajax] - Javascript/Node.js - Programmation

Marsh Posté le 06-11-2017 à 14:18:13    

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,

Reply

Marsh Posté le 06-11-2017 à 14:18:13   

Reply

Marsh Posté le 06-11-2017 à 15:55:10    

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


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 07-11-2017 à 10:33:50    

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,

Reply

Marsh Posté le 07-11-2017 à 13:03:39    

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


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 07-11-2017 à 14:05:11    

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>
  8. <div class="template"></div>


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


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

Reply

Marsh Posté le 07-11-2017 à 19:12:06    

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');
  9.  $.ajax ({
  10.     type: "POST",
  11.     url:  "template.php",
  12.     data: { id: $this.attr ('id'), temple: $this.val () },
  14.     success: function (data)
  15.        {
  16.         if (data !== '')
  17.          {
  18.           $ (".template" ).html (data);
  19.          }
  20.        }
  21.    });
  22.  return false;
  23. });


 
PHP :

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


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 07-11-2017 à 19:16:17    

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


---------------
We deserve everything that's coming...
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed