Discussion :

[legall]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

je dois peut être changer de lunettes, mais je ne vois mas un seul ajax dans ton code ...

[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...

[SpaceFrog]

où, dasn ton code, penses tu aller chercher les informations à afficher avec ajax

[legall]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

au MODAL popup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

via le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Comme le contenu est vide !

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

=> rechargement de page ?

[legall]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
			});

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return false;

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

[legall]

Moi non plus !

J'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[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 ...

[legall]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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>';

[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 ?

[seriux55]

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

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devient,

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[legall]

J'utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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