Modal popup avec contenu requete ajax et PHP !

Version imprimable

Hello tout le monde...
Je suis empêtré depuis quelques jours pour essayer d'avoir une fenetre popup en Ajax dans ma page avec de données en provenance d'une bdd !

Si quelqu'un peut m'aider ça serait super mega gentil !

Voici mon code (le tout dans la même page) :

Code:

1
2
3
4
5
6
7
8
<?php
echo '<div id="popup_edit" class="popup_block">';
echo '<p>';
echo ($action == 'modifier' ? 'Modification ' : 'Création ');
echo '</p>';
echo '<div class="news">contenu en provenance de la bdd</div>';
echo '</div>';
?>

Le link est :

Code:

<a class="poplight" data-rel="popup_edit" data-width="750" href="?pg='.$pglink.'&action=modifier&id='.$data['id'].'"><strong> MODIFIER </strong></a>

Et le code ajax :

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
jQuery(function($){
//Lorsque vous cliquez sur un lien de la classe poplight
$('a.poplight').on('click', function() {
var popID = $(this).data('rel'); //Trouver la pop-up correspondante
var popWidth = $(this).data('width'); //Trouver la largeur
 
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><div class="btn_close" title="Close Window" alt="Fermer"></div></a>');
 
//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
 
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
return false;
});
 
// Close Popups and Fade Layer
$('body').on('click', 'a.close, #fade', function() { // Au clic sur le body...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //...ils disparaissent ensemble
 
return false;
});
});

Et là ça ne marche pas !

Le popup s'ouvre bel et bien mais sans aucune donnée en provenance de la bdd !

J'ai mis un alert et l'url passe les info mais le popup ne les prends pas... GRRRR !

Merci de toute aide !!!

R

14/11/2013, 14h06
SpaceFrog

je dois peut être changer de lunettes, mais je ne vois mas un seul ajax dans ton code ...
14/11/2013, 14h12
legall

Peut-être que je me sois trompé d'intitulé puisque j'associe Jquery et l'AJAX... Désolé.
Mais ceci étant cela ne marche pas comme je le pensais...
14/11/2013, 14h19
SpaceFrog

où, dasn ton code, penses tu aller chercher les informations à afficher avec ajax
14/11/2013, 14h32
legall

Après une requete dans une bdd je récupere les variables que je transmet via le lien :

Code:

<a class="poplight" data-rel="popup_edit" data-width="750" href="?pg='.$pglink.'&action=modifier&id='.$data['id'].'">

au MODAL popup

Code:

<div id="popup_edit" class="popup_block">

via le code :

Code:

$('a.poplight').on('click', function() {

Mais lorsque le popup s'ouvre non seulement la variable $action n'a pas été prise en compte car il affiche toujours "Création" :

Code:

($action == 'modifier' ? 'Modification ' : 'Création ');

Comme le contenu est vide !
14/11/2013, 15h11
SpaceFrog

Code:

$('a.poplight').on('click', function() {

=> rechargement de page ?

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
$('a.poplight').on('click', function(e) {
				var popID = $(this).data('rel'); //Trouver la pop-up correspondante
				var popWidth = $(this).data('width'); //Trouver la largeur
				var pg = $(this).data('pg');
				var action = $(this).data('action');
 
				//Faire apparaitre la pop-up et ajouter le bouton de fermeture
				$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><div class="btn_close" title="Close Window" alt="Fermer"></div></a>');
 
				//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
				var popMargTop = ($('#' + popID).height() + 80) / 2;
				var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
				//Apply Margin to Popup
				$('#' + popID).css({ 
					'margin-top' : -popMargTop,
					'margin-left' : -popMargLeft
				});
 
				//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
				$('body').append('<div id="fade"></div>');
				$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
				return false;
			});
 
 
			//Close Popups and Fade Layer
			$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
				$('#fade , .popup_block').fadeOut(function() {
					$('#fade, a.close').remove();  
			}); //...ils disparaissent ensemble
 
				return false;
			});

14/11/2013, 15h24
SpaceFrog

Code:

return false;

:nono:
regarde ta console c'est déprécié !

regarde du coté de preventDefault()par contre le rmeplissage de la "popup" m'echappe complètement, je ne vois pas ou tu recupères le contenu en ajax comme tu le prétends, ni ou tu renseignes ton modal avec ce contenu

Moi non plus !

J'ai fait :
Code:

1 2 3 4 5 6 7 8 //Lorsque vous cliquez sur un lien de la classe poplight $('a.poplight').on('click', function(e) { var popID = $(this).data('rel'); //Trouver la pop-up correspondante var popWidth = $(this).data('width'); //Trouver la largeur var pg = $(this).data('pg'); var action = $(this).data('action'); e.preventDefault(); ...
Mais je ne vois rien !

Morsque je mets un alert il m'affiche bien "modifier" mais le popup ne le prends pas en charge !

14/11/2013, 15h44
SpaceFrog

un lien != ajax ...

pour mettre du contenu dans un element de ta page
tu dois au moins aller cherche les infos sur le serveru avec un $.ajax, $.post ou $.get ou un .load()a moins que tu n'utilise un plugin de MODAL ??? ... auquel cas il faut l'initialiser
et regarder dans ses methodes comment lui mettre du contenu en provenance du serveur ...

A vrai dire je suis novice et je ne connais pas bcp de l'ajax... Je ne saurai pas dire si j'ai un modal mais je vais regarder !

La seule chose que je suis certain est qu'il marche sur une autre link dans une boucle while...

Voici le popup qui erçoit les infos et qui lui il marche !
Code:

1 2 3 4 5 6 7 8 echo '<div id="popup_data'" class="popup_block">'; echo '<div class="popup_inside">'; echo '<div class="news_view">'; echo '<h2>'.$data['titre'].'</h2>'; echo '<p>'.$data['contenu'].'</p>'; echo '</div>'; echo '</div>'; echo '</div>';

14/11/2013, 15h53
SpaceFrog

au vu de la coloration syntaxique cela m'étonnerait fort que cela fonctionne ...

tu es sur que tu n'utilises pas de plugin de MODAL ?
14/11/2013, 15h59
seriux55

Je crois qu'il y a le ( ' ) de trop dans la ligne 1 après le popup_data ;-)

Code:

echo '<div id="popup_data'" class="popup_block">';

devient,

Code:

echo '<div id="popup_data" class="popup_block">';

J'utilise :
Code:

1 2 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
L'autre DIV est :
Code:

1 2 3 4 5 6 7 8 echo '<div id="popup_data-'.$data['id'].'" class="popup_block">'; echo '<div class="popup_inside">'; echo '<div class="news_view">'; echo '<h2>'.$data['titre'].'</h2>'; echo '<p>'.$data['contenu'].'</p>'; echo '</div>'; echo '</div>'; echo '</div>';
Qui est appelée par :

Code:

<a class="poplight" data-rel="popup_data-'.$data['id'].'" data-width="750" href="#" title="voir"><i class="img-circle icon-eye-open"></i></a>

14/11/2013, 16h12
SpaceFrog

si tu n'as que ça et pas de plugin il n'y a en effet aucune raison que cela fonctionne ...
Tu n'as aucune instruction de load() ... qui permettrait d'aller recupérer le code html sur le serveur