Récuperer information GET via MODAL

Eléphant du PHP | 183 Messages

10 nov. 2013, 11:40

Bonjour,

Je suis entrain de refaire un peu la structure de mon site et je bloque sur un petit point.

Ma Modal apparait bien, cependant je ne sais pas comment envoyer un paramètre en GET afin de récupérer l'information et la traiter dans mon résultat Html.

Ici je voudrais récupérer les information de l'?id=65 mais je ne sais pas du tout comment faire.

J'appele un MODAL avec ce lien :

Code : Tout sélectionner

<div class="cell info1"><a href="?id=65" class="plus1">1</a></div>
Mon fichier JS :

Code : Tout sélectionner

jQuery(".info1").click(function(e){ e.preventDefault(); $('#modal_info').slideDown(); $('#mask').css('display', 'block'); $(window).scrollTop(0); });
L'affichage de la modal avec le contenu en fonction de l'ID:

Code : Tout sélectionner

<section class="container" id="modal_info"> Mon contenu </section>
Merci de votre aide !
_________
Fabien

ViPHP
xTG
ViPHP | 7331 Messages

10 nov. 2013, 13:01


Eléphant du PHP | 77 Messages

10 nov. 2013, 15:10

Une fenêtre modale, tu ne quittes pas ta page et tu ne recharges pas ta page. Donc pour moi le but n'est pas d'envoyer un paramètre en URL

Avec un peu de javascript, ça doit le faire. Si par contre, suivant l'ID tu dois faire une requête base, alors il faut le faire en AJAX.
[javascript]
<div class="cell info1"><a href="javascript:ouvreModale(65)" class="plus1">1</a></div>
[/javascript]

[javascript]
//Fonction pour générer le texte suivant l'ID
function ouvreModale(pId){
e.preventDefault();
$('#modal_info').slideDown();
$('#mask').css('display', 'block');
$(window).scrollTop(0);
//Ici le contenu affiché en fonction de l'ID entré en paramètre
if(pId == 65){
$('#modal_info').html('mon texte pour l'ID 65');
}
[/javascript]

Bien sûr, ce n'est qu'une réflexion de base à toi de voir comment mettre en pratique. Si le texte affiché dépend d'une ligne que tu récupères de ta base alors le mieux est de faire une requête AJAX dans la fonction ouvreModule() tu récupères l'ID tu fais ta reqûete AJAX et en cas de success tu renvoies ton contenu dans la modale.
Développeur PHP/Javascript/HTML

Mes sites perso :
construire une piscine => http://www.construire-sa-piscine.com
Le cadre végétal => http://www.cadre-vegetal.org

Eléphant du PHP | 183 Messages

11 nov. 2013, 11:38

Bonjour,

Merci pour vos réponse, apaprement il faudrait utiliser cette petite ligne dans le JS

Code : Tout sélectionner

var param = $(this).data('id');
Cependant je ne sais pas comment récupérer la variable pour la mettre dans ma requête SQL ?
$form= mysql_query("SELECT * FROM universite WHERE id = XXXXXXX ORDER by id DESC");
_________
Fabien

Eléphant du PHP | 77 Messages

11 nov. 2013, 12:26

C'est pourquoi je pense qu'il faudrait mieux y faire en AJAX.

Tu récupères ton ID, tu l'envoies dans une page PHP qui contient ta requête via AJAX et tu récupères le résultat pour l'afficher.

Après je ne sais pas si tu es familier avec AJAX
Développeur PHP/Javascript/HTML

Mes sites perso :
construire une piscine => http://www.construire-sa-piscine.com
Le cadre végétal => http://www.cadre-vegetal.org

ViPHP
xTG
ViPHP | 7331 Messages

11 nov. 2013, 12:45

Bon après relecture... Pourquoi s'embêter avec de l'ajax alors que sa modale se contente de faire apparaître un élément html caché ?
Cependant je ne sais pas comment récupérer la variable pour la mettre dans ma requête SQL ?
De la même façon que si tu ne travaillais pas avec une fenêtre modale.
PHP s'exécute côté serveur, lorsque la page s'affiche il a déjà tout exécuté.
Ta fenêtre modale est remplie côté serveur mais est cachée de base, puis affichée grâce à un script JS.

Ce n'est depuis le début pas un problème de Javascript mais de PHP. ;)

Récupérer une variable d'url avec PHP :
$id = $_GET['id']; // index.php?id=5
echo $id; // 5

Eléphant du PHP | 77 Messages

11 nov. 2013, 13:17

Oui mais moi ce que je comprends c'est que l'utilisateur va cliquer sur un lien qui va ouvrir une fenêtre modale mais que ce lien peut avoir en paramètre différents ID (peut être suivant un cheminement spécifique).

Dans ce cas, soit il charge le tableau entier des lignes de sa requête au départ et suivant l'ID du lien il affiche dans la modale la ligne du tableau correspondant à l'ID soit au moment du clic il lance une requête AJAX qui ira chercher le résultat de cette ligne uniquement et l'affichera dans la DIV.
Développeur PHP/Javascript/HTML

Mes sites perso :
construire une piscine => http://www.construire-sa-piscine.com
Le cadre végétal => http://www.cadre-vegetal.org

ViPHP
xTG
ViPHP | 7331 Messages

11 nov. 2013, 15:46

Mea culpa... C'est écrit je ne sais combien de fois je n'ai aucune idée de comment j'ai pu le manquer même en lisant en diagonale... :evil:

Eléphant du PHP | 183 Messages

11 nov. 2013, 22:54

Après je ne sais pas si tu es familier avec AJAX

Merci pour ta réponse, en faite non je ne mi connais pas mais ça m'intéresserai de savoir comment faire
_________
Fabien

Eléphant du PHP | 77 Messages

12 nov. 2013, 09:26

Je te donne des pistes et un exemple simple, à toi ensuite de faire ta sauce...

Déjà, utilises jQuery pour l'AJAX, la syntaxe est beaucoup moins barbare.
Si on reprend ton exemple, le gars appuie sur un bouton qui l'envoie vers une fonction javascript, de cette façon:
<div class="cell info1"><a href="javascript&#058;ouvreModale(65)" class="plus1">1</a></div>

Où 65 est l'ID sont tu veux afficher les informations dans ta modale. Avant d'ouvrir cette modale, on va faire une requête AJAX pour récupérer. AJAX permet de faire des appels au serveur sans avoir de besoin de rafraîchir toute la page ce qui est très pratique.
Ta fonction ouvreModale devient :
function ouvreModale(pId){
   jQuery.ajax({
	    type: "GET",
	    url: "mapage_traitement.php?ID="+pId,
	    dataType: 'text', 
	     contentType: "application/x-www-form-urlencoded;charset=UTF-8",
	    beforeSend: function(xhr) {
	    xhr.overrideMimeType('text/html; charset=UTF-8');
	},
	    success: function(data,textStatus){
		alert(data);	
	},
	    error: function (xhr, ajaxOptions, thrownError){
		jAlert("Erreur de traitement Ajax");
	}
	});
Comme tu peux le voir, la fonction appelle une méthode jQuery Ajax qui contient un tas de paramètre (je te laisse voir sur Internet le détail de tout ça...).
Le paramètre important est url: ici tu mets l'URl où le script va aller chercher l'information. Dans cette page (mapage_traitement.php) tu vas mettre un script qui va aller chercher ce que tu as besoin dans ta base (<?php ...mysql_query('select * from... where id=...')).
Ce qui est bien c'est que tu envoies en même temps dans cette URl ton ID. donc dans ta page de traitment PHP un simple $_GET['ID'] te permet d'avoir l'ID et donc de faire une requête sur cette ligne uniquement.

En retour, tu vas récupérer les infos qui seront stockées dans data dans la partie success. C'est peut être encore là le plus compliqué car tu peux récupérer tes données sous plusieurs format (JSON, XML notamment).

Il faut donc côté PHP organiser tes données sous format XML par exemple. Cas particulier : si ton retour est un simple string, number... c'est à dire une simple chaîne tu peux l'envoyer depuis PHP en faisant simplement un echo de ton résultat. et côté AJAX, comme dans mon exemple tu récupères la valeur dans data et tu peux faire un simple alert(data) pour l'afficher (tu peux bien sûr en faire ce que tu veux et l'afficher dans ta modale...).

A toi de creuser notamment le traitement des données en retour. Si tu as un souci , n'hésites pas à questionner de façon précise.
Développeur PHP/Javascript/HTML

Mes sites perso :
construire une piscine => http://www.construire-sa-piscine.com
Le cadre végétal => http://www.cadre-vegetal.org

Eléphant du PHP | 183 Messages

15 nov. 2013, 14:22

Bonjour Franck

Désolé de ne pas avoir répondu plus vite j’étais sans connexion depuis quelques jours... les joies de la formation !

Sinon J'ai lu ton message et te remercie car c'est un langage que je connais moins que le php mais qui est très intéressant !

Cependant après des recherche il y a quelques point que je ne comprend pas :

Je n’arrive pas a ouvrir la fenêtre modal elle même (Déjà ça commence fort !)

J'ai fini par testé ceci qui ne fonctionne pas et j'ai pas l'impression que ça soit le plus propre... :
   jQuery.ajax({
            type: "GET",
			var option = 'width=500,height=150,resizable=no,scrollbars=no,menubar=no,location=no,toolbar=no,status=no',  
Merci de votre aide
_________
Fabien

Eléphant du PHP | 77 Messages

15 nov. 2013, 18:34

Mais c'est quoi cette variable option ??????????????
Développeur PHP/Javascript/HTML

Mes sites perso :
construire une piscine => http://www.construire-sa-piscine.com
Le cadre végétal => http://www.cadre-vegetal.org

Eléphant du PHP | 183 Messages

15 nov. 2013, 20:06

Bonjour

J'ai vu ca dans un exemple mais je me demande si j'ai pas confondu avec du javascript :?
_________
Fabien

ViPHP
xTG
ViPHP | 7331 Messages

16 nov. 2013, 09:22

Tu as en effet confondu avec les arguments d'une popup. ;)

Eléphant du PHP | 183 Messages

17 nov. 2013, 17:11

Bonjour

Je comprend pas du tout comment ouvrir une MODAL et pouvoir lui envoyer une valeur en GET via cette commande
<div class="cell info1"><a href="javascript:ouvreModale(65)" class="plus1">1</a></div>

J'ai le fichier PHP contenant la requete SQL qui fonctionne viens et qui me renvoi le résultat attendu, mais je n'arrive pas avec la MODAL, pouvez vous m'aidez ? Merci
_________
Fabien