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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Ajax] Récupèrer l'action lors d'événement après rechargement de page

mecano31

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,

Publicité

SICKofitALL

misanthrope

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...

mecano31

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,

SICKofitALL

misanthrope

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...

mecano31

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 :

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

Code :

$('.hoveride').on('change', function(){
var $this = $(this);
var mesData = "id="+$(this).attr("id" )+"&temple="+$(this).val();
$("ul li" ).removeClass('active');
$(this).parent().addClass('active');
$.ajax({
type: "GET",
url: "template.php",
data: mesData,
success: function(data){
if (data !== ''){
$(".template" ).html(data);
}
}
});
return false;
});

Code :

// template.php
require_once('idb.php');
$id = isset($_GET['id'])?$_GET['id']:'';
$temple = isset($_GET['temple '])?$_GET['temple ']:'';
if ($temple == 'news_1'){
$q = array('id' => $id, 'temple' => $temple);
$sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll();
} elseif ($temple == 'news_2'){
$q = array('id' => $id, 'temple' => $temple);
$sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll();
} elseif ($temple == 'news_3'){
$q = array('id' => $id, 'temple' => $temple);
$sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll();
} elseif ($temple == 'news_4'){
$q = array('id' => $id, 'temple' => $temple);
$sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll();
}
foreach($rows as $row) {
$html = "<div>".$row['template_content']."</div> ";
echo $html;
}

SICKofitALL

misanthrope

tu peux grandement simplifier ce code :
JS :

Code :

$ ('.hoveride').on (
'change',
function ()
{
var $this = $ (this);
$this.parents ('ul').children ().removeClass ('active');
$this.parent ().addClass ('active');
$.ajax ({
type: "POST",
url: "template.php",
data: { id: $this.attr ('id'), temple: $this.val () },
success: function (data)
{
if (data !== '')
{
$ (".template" ).html (data);
}
}
});
return false;
});

PHP :

Code :

$id = isset ($_POST['id']) ? $_POST['id'] : '';
$temple = isset ($_POST['temple ']) ? $_POST['temple'] : '';
$html = '';
$q = [ 'id' => $id, 'temple' => $temple ];
$sql = 'SELECT * FROM newsletter WHERE id = :id AND template = :temple';
$req = $db->prepare ($sql);
$req->execute ($q) or die(print_r ($req->errorInfo ()));
$rows = $req->fetchAll ();
foreach ($rows as $row)
{
$html = "<div>{$row['template_content']}</div> ";
}
echo $html;

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

SICKofitALL

misanthrope

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...

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 passe	Evenement touche python no gui
Récupérer des informations matériel (% cpu, ...) En temps reel	Récupérer les shares facebook après migration vers https
Créer une page sur Adobe Muse	Comment 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

Page générée en 0.068 secondes