Page 1 sur 2

Récuperer information GET via MODAL

Posté : 10 nov. 2013, 11:40
par fabien_14
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 !

Re: Récuperer information GET via MODAL

Posté : 10 nov. 2013, 13:01
par xTG

Re: Récuperer information GET via MODAL

Posté : 10 nov. 2013, 15:10
par franckm
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.

Re: Récuperer information GET via MODAL

Posté : 11 nov. 2013, 11:38
par fabien_14
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");

Re: Récuperer information GET via MODAL

Posté : 11 nov. 2013, 12:26
par franckm
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

Re: Récuperer information GET via MODAL

Posté : 11 nov. 2013, 12:45
par xTG
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

Re: Récuperer information GET via MODAL

Posté : 11 nov. 2013, 13:17
par franckm
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.

Re: Récuperer information GET via MODAL

Posté : 11 nov. 2013, 15:46
par xTG
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:

Re: Récuperer information GET via MODAL

Posté : 11 nov. 2013, 22:54
par fabien_14
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

Re: Récuperer information GET via MODAL

Posté : 12 nov. 2013, 09:26
par franckm
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.

Re: Récuperer information GET via MODAL

Posté : 15 nov. 2013, 14:22
par fabien_14
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

Re: Récuperer information GET via MODAL

Posté : 15 nov. 2013, 18:34
par franckm
Mais c'est quoi cette variable option ??????????????

Re: Récuperer information GET via MODAL

Posté : 15 nov. 2013, 20:06
par fabien_14
Bonjour

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

Re: Récuperer information GET via MODAL

Posté : 16 nov. 2013, 09:22
par xTG
Tu as en effet confondu avec les arguments d'une popup. ;)

Re: Récuperer information GET via MODAL

Posté : 17 nov. 2013, 17:11
par fabien_14
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