Div class lightbox [Résolu]

[dharth]

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 ?

[firehist]

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>
<!-- blablabla -->
<div class="lightbox" style="display:none" rel="LE_NUMERO_UNIQUE">
  <!-- blablabla -->
</div>

Maintenant je ne sait pas avec quoi tu gère le clic, mais si c'est en jQuery tu fait:

Code javascript :

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'

[dharth]

le contenu de mon script est le suivant :

Code javascript :

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

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

[firehist]

Salut,

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

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

Code javascript :

$(".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'

[dharth]

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

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

[firehist]

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'

[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

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