Récuperer information GET via MODAL

Eléphant du PHP | 77 Messages

17 nov. 2013, 17:14

Prends ce fichier HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<title>Insert title here</title>
</head>

<script>
function ouvreModale(pId){  
	jQuery.ajax({
	            type: "GET",
	            url: "test.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){
	            	$(function(){
		            	$('#dialog').dialog({
		            		bgiframe: true,
		            		resizable: true,
		            		width: 350,
		            		title: 'Ma fenêtre'
		                });
		            	//Je remplis ma DIV avec les infos
		            	$('#dialog').html(data);
		            	 return false;
	            	});
	        },
	            error: function (xhr, ajaxOptions, thrownError){
	                jAlert("Erreur de traitement Ajax");
	        }
	   });
}
	 
</script>

<body>

<div class="cell info1"><a href="#" onclick="ouvreModale(1)" class="plus1" id="monclic">Cliquez pour Modale</a></div>

<div id="dialog"></div>

</body>

</html>
Ce fichier PHP QUI S'APPELLE TEST.PHP:
<?php
/* Connexion à la base de données */
$serveur = "localhost";
$user = "root";
$password = "";
$base = "test";
$connexion=mysql_connect($serveur, $user, $password); //connexion au serveur
$connect=mysql_select_db($base, $connexion); //connexion à la base
if ($connect == false)
{
	echo "Pas de connexion à la base!";
}

function RetourneUser1(){
	$lId = $_GET['ID'];
	$lSql = "SELECT * FROM ACCESS WHERE ID = $lId";
	$lRequete = mysql_query($lSql);
	$lFetch = mysql_fetch_array($lRequete);
	return $lFetch['nom'];
}

echo RetourneUser1();

?>
Il fait EXACTEMENT ce que tu veux. Suivant l'ID que tu rentres dans ta fonction javascript(1,2,3...) il me renvoie le nom associé (nom1, nom2, nom3...)

Et côté HTML, quand tu cliques sur le lien, il te mets dans une modale le résultat de la requête envoyé dans le echo

Là, je ne peux pas t'aider plus. Si tu n'y arrives, y a rien à faire.

PS: n'oublies pas d'inclure les 3 fichiers du haut dans le HTML, les deux script et le link rel
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

18 nov. 2013, 12:47

Bonjour !

Merci ça fonctionne parfaitement j’ai intégrer sur mon site avec ma base de donnée tout fonctionne nickel, vraiment grand merci !

Cependant j’ai un petit problème, quand la MODAL s’ouvre j’ai donc les données qui s’affichent en fonction de mon ID …mais j’ai un formulaire pour valider les informations. Quand je clique sur le submit cela me renvoi sur la page de traitement du formulaire (donc ferme la modal), est t’il possible que quand je clic sur le formulaire que ça reste dans la MODAL ?

Mon formulaire qui s’affiche dans la modal :
<form method="post" name="formulaire" 
<p class="double">
					<p align="center"><label for="spam_field" title="Anti Spam" class="oblig">Recopiez le texte dans la case : <b><? echo strtoupper($theCode); ?></b></label>
<input name="spam_field" type="text" size="20" maxlength="5" /></p><br>

<input type="hidden" name="spam_field_protect" value="<? echo strtoupper($theCode); ?>">
	<p align="center"><input type="submit" name="InfoUniversite" value="Cliquez ici pour valider les informations" /></p>
		
		</form>
Autre demande, au lieu d’avoir
<div class="cell info1"><a href="#" onclick="ouvreModale(44)" class="plus1" id="monclic">Cliquez pour Modale</a></div>
Est t’il possible d’avoir cette commande pour envoyer la variable en GET avec data-id ?
<div class="cell info1" data-id="44"> Cliquez pour Modale</div>

Merci
_________
Fabien

Eléphant du PHP | 77 Messages

18 nov. 2013, 12:56

Bonjour,

Content que ça marche !

Pour ta première question, non je ne pense pas. Quand tu ouvres une modale, tu ne relances pas ta page, tu es toujours dans le même script.

Par contre, quand tu fais un submit d'un formulaire, tu vas recharger ta page en totalité. Donc forcément ta modale va se fermer.

Deux solutions:
1. Dans ton formulaire de la modale, tu ajoutes un champs input hidden du type:
<input type="hidden" name="modale" value="1" />
De cette façon, quand tu recharges ta page dans ton request tu sais que si tu viens de la modale le $_POST['modale'] == 1 et sinon il vaut ''.
Donc en retour de ton submit, tu ajoutes un test là dessus et si t'es sur 1, tu forces la MODALE à s'ouvrir avec les infos que tu veux.

2. Sur ton formulaire, tu ne fais pas un SUBMIT MAIS...... une requête AJAX à nouveau ! Tu prends les valeurs de ton formulaire et tu les envoies dans un fichier PHP qui traitera et en retour tu ré-affiche dans ta modale les infos.

A mon sens, la deuxième possibilité est plus esthétique car l'utilisateur n'a pas l'impression de quitter la page.
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

19 nov. 2013, 23:44

Hello

J'ai réussi a passé via un formulaire c'est super !

Par contre j'ai un autre petit probleme !

Le graphiste ma fait le design avec ce type d'appel de MODAL
					<div class="cell info1" data-id="65"><a href="#" class="plus1">1</a></div>
Son appel de la MODAL:
jQuery(document).ready(function(){
  jQuery(".info1").click(function(e){
    e.preventDefault();
    $('#modal_info').slideDown();
    $('#mask').css('display', 'block'); 
    $(window).scrollTop(0);
	var param = $(this).data('id');

    });
Hors je voudrais mettre ce code ci-dessous (Car il fonctionne) mais la Modal n'apparait pas :s
   jQuery.ajax({
                    type: "GET",
                    url: "test.php?w=1&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){
                        $(function(){
                                $('#dialog').dialog({
                                        bgiframe: true,
                                        resizable: true,
                                        width: 350,
                                        title: 'test'
                                });
                                //Je remplis ma DIV avec les infos
                                $('#dialog').html(data);
                                 return false;
                        });
                },
                    error: function (xhr, ajaxOptions, thrownError){
                        jAlert("Erreur de traitement Ajax");
                }
           });
Mercide votre aide
_________
Fabien

Eléphant du PHP | 183 Messages

25 nov. 2013, 09:16

Hello

Je me premet de relancer :)
_________
Fabien