[AJAX] Simplement rafraichir une page avec un post

Version imprimable

Voir 40 message(s) de cette discussion en une page

25/03/2015, 11h11
Invité

La par contre je ne sait pas ! a priori actuellement c'est le cas !
De toute façon rien ne fonctionne correctement des que j'apporte les modifs qu'on me demande.
Je suis en train de désespéré ... mais c'est pas grave je préfère laisser tomber et reprendre les tutos depuis le début ....
Les explications ne sont pas assez claires pour moi donc surement beaucoup de lacunes à corriger !
Merci

MODIF : J'ai compris le pourquoi ! En fait mon code fonctionne très bien lorsque je fait les modifications seulement vu que j'utilise un Framework php il faut impérativement que j'utilise json ou alors un simple fichier texte (je pense dans ce cas là utiliser un fichier texte qui sera plus simple a mettre en place !

Merci a vous ....
27/03/2015, 00h57
ABCIWEB

Citation:

Envoyé par Bovino

Code:

setcookie ('CookieVote'.$pageId, 'voted', time()+$expire , '/');

Heu... tu ne comptes quand même pas affecter un cookie en PHP à partir d'une requête AJAX ?

Je comprend pas bien ta remarque, que veux tu dire ?
Une fois dans php que ce soit directement ou comme destination d'un script ajax on peut bien utiliser toutes les fonctions php que l'on veut y compris envoyer des cookies. D'ailleurs mon script d'upload ajax fonctionne sur ce principe pour récupérer des fichiers partiellement téléchargés : c'est php qui envoie un cookie avec la quantité de bytes réellement sauvegardés lors de l'upload et javascript qui lit le cookie pour savoir où faire la reprise :)

@scorpion11_22

Tu devrais faire deux fichiers simples (sans tout ton code) pour comprendre.

Le premier "page.php" envoie une requête ajax vers un deuxième nommé "destination_page.php". Ce second fichier peux contenir un simple <?php echo 'toto' ?> (donc pas difficile à faire).
Reste plus que "page.php" à écrire et fait en sorte avec ta requête ajax que l'appel à ta page "destination_page.php" retourne bien "toto" dans un div ou autre bloc de ta page "page.php".

Ton avant dernier post était en net progrès donc ce ne devrait plus être qu'une histoire de détail. Et s'il faut que tu utilise json c'est pas un problème.
"destination_page.php"

Code:

<?php echo json_encode(array('retour'=>'toto')); ?>

"page.php"
Code:

1 2 3 4 5 6 7 8 9 //... success: function(dataBack){ //quand la requête a été validée on exécute cette fonction, dataBack contient la réponse de la page. if(dataBack.retour != undefined) { $('#votePlus').html(dataBack.retour); //... } //...

re'

Donc dans un premier temp j'ai fait dans mon traitement :

Code:

echo json_encode ( array ( $row => $positive ) );

et ensuite dans ma fonction et là je suis pas sur car plus rien ne fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
function vote(pageId) { 
	var dataFields = {'article_id': pageId};
	$.ajax({ //appel asynchrone d'une page internet
		type: "POST", //utilisation de la méthode http POST (passage des variables dans le corps de la requête)
		url: "index.php?page=Article_vote", //adresse à appeler
		data: dataFields, //données à fournir
		timeout: 3000, //après 3 secondes on abandonne la requête
		success: function(dataBack){ //quand la requête a été validée on exécute cette fonction, dataBack contient la réponse de la page.
			if(dataBack.retour != undefined)
			{
				$('#votePlus').html(dataBack); // dataBack (la réponse à la requette dans le code html qui a pour idantifiant votePlus.
				$('#voteUp').attr('class', 'vote_up_done oneLine'); // modification de la classe d'un élément
				$('#positive').attr('class', 'numberVoted oneLine'); // modification de la classe d'un autre élément
				$('#message').html('<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>'); // affiche d'un message à l'utilisateur
				$('#alertFadeOut').fadeOut(5000, function () { // Et on le fait s'effacer avec classe
					$('#alertFadeOut').text('');
				});
			}
			},
		error: function() {
			$('#message').text('Problème ....');
			 console.log(dataBack); 
		}
 
	});
}

"json" j'ai jamais bossé avec !

J'essai quand même de comprendre le json donc voilà ce que je fais :
Dans traitement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
if ( $_POST ) {
 
	$pageId = $_POST['article_id'];
 
	$positive = $row['positive'] + 1;
 
	$sql = "UPDATE " . $database->pref . "article_article
			SET positive = positive+1 WHERE article_id= '" . $pageId . "';";
 
	$database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
 
	$sql = "SELECT positive 
			FROM " . $database->pref . "article_article
			WHERE article_id = '" . $pageId . "';";
 
	$req = $database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
 
	while ( $row = $database->ResultArray ( $req ) ) {
 
	$positive = $row['positive'];
	$json = array ( 'positive' => $positive );
 
	}
	$expire = 24 * 3600 ; // 1 jour
	setcookie ('CookieVote'.$pageId, 'voted', time()+$expire , '/');
 
	//echo $row[$positive];
 
	header("Content-Type: application/json",true);
	echo json_encode ( $json );
}

donc je fait bien un array ?
ensuite je fait un var dump dans la page article qui me retourne string(4) "null"
Par contre des que je clique ma fonction js me retourne "Problème ...." et pourtant je n'est pas toucher la fonction voir ci-dessus.
A force de persévérance j'y arriverai avec vos conseils bien-sur ;)

28/03/2015, 00h23
ABCIWEB

Salut,

J'ai donné un exemple complet avec deux fichiers ici.
Testes-les.

(j'ai utilisé la méthode courte - $.post (..) -pour faire la requête ajax mais le principe est le même pour afficher les retours)

re'

J'ai regarder le post que tu m'a donné et donc j'ai essayé de comprendre et adapter.

Effectivement je pense qu'il y a du mieux.
Seulement la valeur ne s'incrémente pas en bdd donc je pense que quelque chose m'échappe.

dans fonnction js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
$(function(){
 
	var formulaire = $('#like');
	var reponse = formulaire.find('.post');
 
	// intercepte le comportement onsubmit (donc à la soumission du formulaire avec un bouton submit)
	formulaire.on('submit',function(event)
	{
		// Empêche la soumission du formulaire puisqu'on le fait en ajax vers "test.php"
		event.preventDefault();
 
		//On réinitialise les blocs en les vidant
		reponse.empty();
 
		// requête ajax avec serialize qui récupère tous les champs
		$.post("index.php?page=Article_vote", formulaire.serialize())
		// retour d'information (j'ai utilisé 'result' pour récupérer le tableau "$tab" de php mais j'aurai pu choisir 'toto')
		.done(function(result)
		{
			// 'post' est l'index du tableau "$tab" de php
			// post est un tableau
			var p = result.post != undefined ?  result.post : null;
 
			// on liste le tableau "post" qui contient le résultat du formulaire
			$.each(p, function(i,v)
			{
				// on écrit une ligne avec index = valeur
				var ligne = $('<p style="background:#EBFEEE">'+i+" = "+v+'</p>');
				// on ajoute cette ligne dans le div
				reponse.append(ligne);
			})
 
		})
		.fail(function(){reponse.text('Echec de la requête ....')})
	});
});

Comme tu peux voir j'ai repris ton code et essayer d'adapté a mes besoins.

voilà la page article :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
$pageId = $_GET['id'];
/*---------*/
	$expire = 24 * 3600 ; // 1 jour -- 
	setcookie ('CookieVote'.$pageId, 'voted', time()+$expire , '/');
	$NomCookie = 'CookieVote'.$pageId;
/*---------*/ 
$sql = "SELECT * 
		FROM " . $database->pref . "article_article 
		WHERE article_id = '$pageId'";
 
$req = $database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
 
$row = $database->ResultArray ( $req );
 
if ( isset ( $_COOKIE[$NomCookie] ) ) {
$page_texte .= '<i class="icon-thumbs-up"></i> <strong>' . $row['article_like'] . '</strong> ';
} 
else { 
$page_texte .= '<form id="like" action="#" method="post"><input type="hidden" name="like" value="like" /></form><a href="#" onclick="like.submit()"><i class="icon-thumbs-up"></i></a> <strong>' . $row['article_like'] . '</strong> ';
}
if ( $row['article_like'] > 1 ) {
        $page_texte .= 'Likes';
}
else {
        $page_texte .= 'Like';
}
$page_texte .= '</small></blockquote>';

et le traitement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
//header('Content-Type: application/json');
 
$sql = "UPDATE " . $database->pref . "article_article
	   SET article_like = article_like + 1
	   WHERE article_id = '" . $_GET['id'] . "';";
 
$database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
 
$sql = "SELECT article_like 
		FROM " . $database->pref . "article_article
		WHERE article_id = '" . $pageId . "';";
 
$req = $database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
 
$row = $database->ResultArray ( $req );
 
// je construis un tableau contenant une variable "post" contenant le tableau $_POST
$row = array('post' => $_POST);
 
// on passe le tableau à javascript avec json_encode
echo json_encode($row);

Ah oui le

Code:

header('Content-Type: application/json');

est commenté sinon IE me demande si je veux ouvrir ou enregistrer index.json ????????

Donc voilà le soucis est résolu grâce a un gars qui m'a beaucoup aidé et appris ! (du moins il a eu la patience de m'apprendre)
Donc pour ceux que ça intéresse :

Dans ma page article :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$pageId = $_GET['id']; 
$NomCookie = 'CookieVote'.$pageId;
 
$sql = "SELECT * 
		FROM " . $database->pref . "article_article 
		WHERE article_id = '$pageId'";
 
$req = $database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
 
$row = $database->ResultArray ( $req );	
 
$page_texte .= '<div id="lineBlock">';
$page_texte .= '<small>Si vous aimez cliquez (1 fois MAX par jour)</small> ';
if ( isset ( $_COOKIE[$NomCookie] ) ) {
$page_texte .= '<div class="vote_up_done oneLine" id="votePlus"></div><div class="numberVoted oneLine">' . $row['positive'] . '</div>';
} 
else { 
$page_texte .= "<div class=\"vote_up oneLine\" id=\"voteUp\" onclick=\"vote('".$pageId."');\"><a href=\"#\" onclick=\"vote('".$pageId."');\"></a></div><div class=\"number oneLine\" id=\"positive\">" . $row['positive'] . "</div>";
}
$page_texte .= '</div>';
$page_texte .= '<span id="message"></span>';

Dans ma page traitement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
if ( $_POST ) {
 
	$pageId = $_POST['article_id'];
 
	$positive = $row['positive'] + 1;
 
	$sql = "UPDATE " . $database->pref . "article_article
			SET positive = positive+1 WHERE article_id= '" . $pageId . "';";
 
	$database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
 
	$sql = "SELECT positive 
			FROM " . $database->pref . "article_article
			WHERE article_id = '" . $pageId . "';";
 
	$req = $database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );
 
	$row = $database->ResultArray ( $req );
 
	$positive = $row['positive'];
 
	$expire = 24 * 3600 ; // 1 jour
	setcookie ('CookieVote'.$pageId, 'voted', time()+$expire , '/');
 
	echo $row[$positive];
}

et enfin ma fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
function vote(pageId) { 
	var dataFields = {'article_id': pageId};
	$.ajax({ //appel asynchrone d'une page internet
	  type: "POST", //utilisation de la méthode http POST (passage des variables dans le corps de la requête)
	  url: "index.php?page=Article_vote", //adresse à appeler
	  data: dataFields, //données à fournir
	  timeout: 3000, //après 3 secondes on abandonne la requête
	  success: function(dataBack){ 
		  $compteur = $('.numberVoted').html();
		  $('.numberVoted').html(parseInt($compteur)+1).hide().fadeIn(); 
		  $('#voteUp').attr('class', 'vote_up_done oneLine'); // modification de la classe d'un élément
		  $('#positive').attr('class', 'numberVoted oneLine'); // modification de la classe d'un autre élément
		  $('#message').html('<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>'); // affiche d'un message à l'utilisateur
		  $('#alertFadeOut').fadeOut(2000, function () { // Et on le fait s'effacer avec classe
			  $('#alertFadeOut').html('');//$('#alertFadeOut').text('');
		  });
		  },
	  error: function() {
		  $('#message').text('Problème ....');
		   console.log(dataBack); 
	  }
  });
}

Merci encore à ceux qui ont essayer de m'aider !

Voir 40 message(s) de cette discussion en une page