Div class lightbox

Version imprimable

Div class lightbox

bonjour,

Je souhaite créer des boutons permettant d'ouvrir une lightbox pour éditer un commentaire, il peut y avoir plusieurs boutons. Cependant pour les afficher j'utilise une boucle, ils sont contenu dans une div. Le problème est que une fois la lightbox ouverte, je veux que le contenu du textarea soit le commentaire actuel et étant donner que la classe est la même c'est toujours le 1er commentaire qui est afficher pour TOUT les boutons.

chaque bouton est défini comme ca :
Code:

1 2 3 4 5 6 7 8 <span class="modifiercom"></span> <div class="lightbox" style="display:none"> <span class="texte"></span> <label class="corps_modifier"></label> <textarea class="corps_modifier"><?php echo $comm ?></textarea> <input type="submit" onClick="modifierCommentaire()"/> </div>
Quelqu'un a une solution ?

Bonsoir,

Si tu utilise une boucle pour générer tes boutons, rajoute une variable de type "entier" que tu incrémente à chaque passage.

Pour chaque bouton et textarea tu viendra rajouter cette valeur dans une balise. Par exemple :
Code:

1 2 3 4 5 6 <span class="modifiercom" rel="LE_NUMERO_UNIQUE"></span>  <div class="lightbox" style="display:none" rel="LE_NUMERO_UNIQUE">  </div>
Maintenant je ne sait pas avec quoi tu gère le clic, mais si c'est en jQuery tu fait:
Code:

1 2 3 4 5 6 7 8 $(".modifiercom").click(function() { var num = $(this).attr('rel'); // Cache toute les lightbox (on sait jamais :p) $('.lightbox').hide(); // Affiche celle correspondant au bouton $('.lightbox[rel="' + num + '"]').show(); });
Bon dév' :ccool:

le contenu de mon script est le suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var $jq = jQuery.noConflict();
 
$jq(document).ready(function() {
	$jq(".modifierconseil").click(function(){
		$jq("#overlayy").fadeIn();
		$jq(".lightboxvideo_conseil").fadeIn();
	});
	$jq("#overlayy").click(function(){
		$jq("#overlayy").fadeOut();
		$jq(".lightboxvideoplayer").fadeOut();
		$jq(".lightboxvideo_conseil").fadeOut();
	});
});

J'ai essayer en ajoutant le rel, cela ne marche pas, il noircit bien la page mais il n'y a pas d'affichage du textarea.
mon code est le suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var $jq = jQuery.noConflict();
 
$jq(document).ready(function() {
	$jq(".modifierconseil").click(function(){
		var num = $(this).attr('rel');
		$jq("#overlayy").fadeIn();
		$jq(".lightboxvideo_modifier[rel=\"' + num + '\"]").fadeIn();
 
	});
	$jq("#overlayy").click(function(){
		var num = $(this).attr('rel');
		$jq("#overlayy").fadeOut();
		$jq(".lightboxvideoplayer[rel=\"' + num + '\"]").fadeOut();
		$jq(".lightboxvideo_modifier[rel=\"' + num + '\"]").fadeOut();
	});
});

Merci de votre aide

03/10/2011, 09h52
firehist

Salut,

Tu as bien rajouter les rel="X" dans les balises HTML?

Sinon tu as une petite erreur de syntaxe JavaScript/jQuery:

Code:

$(".lightboxvideo_modifier[rel=\"" + num + "\"]")...

Si tu utilise le double quotes pour ton sélecteur, utilise également le double quote pour la concaténation "string" + variable.

Bon dév' :ccool:

oui en effet c’était bien la syntaxe. j'ai maintenant un autre problème, c'est pour récupérer le contenu de ce textarea après modification.
mon javascript est comme ca :

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
 
function modifierConseil(){
 
		var tab = {};
		var num = $(this).attr('rel');
 
		tab['url'] = $jq('.corps_modifier[rel="' + num + '"]').html();
		tab['user'] = $jq('.usermodifier[rel="' + num + '"]').html();
		tab['fiche'] = $jq("#fichemodifier").html();
		alert(tab['url']);
   		req = { 'tab[]' : tab , type : 'demo'};
		$jq.ajax({
                   		type: "POST",
                   		url: "http://www.url.com/ajax_video/add_modifier.php",
                   		data: req,
                   		success: function(x){
 
                   			var result = x.split("$");
 
                   			$jq("#"+result[0]).html(result[1]);
							window.location.reload(true);
                   		}
        	});
}

je remet le code html correspondant :

Code:

1
2
3
4
5
6
7
8
9
10
 
<span class="modifierconseil" rel="<?php echo $checkk; ?>">Modifier un conseil</span>
    <span class="usermodifier" style="display:none" rel="<?php echo $checkk; ?>"><?php echo $identr; ?></span>
	<div class="lightboxvideo_modifier" rel="<?php echo $checkk; ?>" style="display:none">
		<span class="texte" rel="<?php echo $checkk; ?>"></span> 
		<label class="corps_modifier" rel="<?php echo $checkk; ?>"></label>
		<textarea class="corps_modifier" rel="<?php echo $checkk; ?>"><?php echo utf8_decode(find_conseil($conseil, $identr)); ?></textarea>
		<input type="submit" onClick="modifierConseil()"/>
		<span class="erreurmsg_modifier"></span><span class="successmsg_modifier <?php echo $checkk; ?>"></span>
	</div>

le soucis est que je n'arrive a récupérer aucune variable.

merci

Le code de ta fonction n'est pas bon. Tu ne peux pas utiliser

Code:

var num = $(this).attr('rel');

car il ne connait pas le this.

Pour contrer cela, il te suffit de reporter ce "num" directement dans l'appel de la fonction:

Code:

<input type="submit" onClick="modifierConseil('<?php echo $checkk; ?>')"/>

Et ta fonction javascript devient:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function modifierConseil(num){
 
		var tab = {};
 
		tab['url'] = $jq('.corps_modifier[rel="' + num + '"]').html();
		tab['user'] = $jq('.usermodifier[rel="' + num + '"]').html();
		tab['fiche'] = $jq("#fichemodifier").html();
		var req = { 'tab[]' : tab , type : 'demo'};
		$jq.ajax({
                   		type: "POST",
                   		url: "http://www.url.com/ajax_video/add_modifier.php",
                   		data: req,
                   		success: function(x){
 
                   			var result = x.split("$");
 
                   			$jq("#"+result[0]).html(result[1]);
							window.location.reload(true);
                   		}
        	});
}

En espérant avoir été assez clair!

Bon dév' :ccool:

03/10/2011, 12h00
dharth

en effet cela fonctionne, cependant il récupère le textarea affiché précédemment, si je le modifie il ne le prend pas en compte pourquoi?

merci
03/10/2011, 13h42
firehist

Je ne vois pas de raison. Essaye d'utiliser .val() plutôt que .html().

Sinon c/c ton code complet pour que je debug.