Discussion :

[Skunka]

Bonjour,

Je possède un tableau, avec scroll sur X et Y, construit via une fonction javascript. Dans chaque cellule de ce tableau, il y a un glyphicon permettant d'afficher une balise <input type='text'> ou de la cacher. Hors, cette dernière ne s'affiche que dans la cellule et est caché sous les cellules voisines, ce qui empêche l'utilisateur de voir une partie de ce qu'il écrit.

Ici, j'ai tapé 5 fois la lettre 'o', une seule est lisible.

Pour régler ce problème, j'ai envisagé deux solutions: jouer avec z-index et position ou utiliser un popover. Aucune des deux ne fonctionne

1ère solution:

Le code html / php:

Code php :

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

1
2
3
4
5
6
7
8
9
if (!is_null($p->getCommentaire())) {
	echo "<div class='commentaire'>";
		echo "<span class='glyphicon glyphicon-info-sign' onclick='show(this)'>";
			echo "<p class='commSaisie' style='display:none'>";
				echo "<input type='text' name='commentaires[]' class='inputCommentaire' onblur='hide(this)' value='".$p->getCommentaire()."'>";
			echo "</p>";
		echo "</span>";
	echo "</div>";
}

Le code css:

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
/* Span de commentaire */
.commentaire {
	position: relative;
	z-index: 120;
	width: 15px;
	float: right;
}
 
/* input des commentaires lors de la modification d'un planning*/
.inputCommentaire{
	position: relative;
	overflow: visible;
	z-index: 120;
}
 
/* Saisie / modif d'un commentaire */
p.commSaisie{
	margin-left: -145px;
	margin-top: -40px;
	z-index: 120;
}
 
/* icone des commentaires */
.glyphicon{
	z-index: 1;
}

Le code js:

Code javascript :

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
function show(span){
		//Affichage de la zone de saisie du commentaire
		span.lastChild.style.display = "flex";
		span.lastChild.style.position = "absolute";
		//span.lastChild.lastChild.style.position = "fixed";
		span.lastChild.lastChild.focus();
	}
 
	function hide(input){
		//On cache le commentaire et selon sa classe, on effectue une vérification
		input.parentNode.style.display = "none";
		input.parentNode.style.display = "relative";
		//input.style.position = "relative";
		if (input.value.length > 0){ //Si un commentaire à été saisis
			input.parentNode.parentNode.className = "glyphicon glyphicon-info-sign";
		}else{
			input.parentNode.parentNode.className = "glyphicon glyphicon-plus";
		}
	}

Le problème de cette solution est que l'input se retrouve à une position fixe sur l'écran et ne reste pas attaché au glyphicon, qu'il soit affiché ou caché. De plus, les inputs des cellules cachés de bases, ne sont donc même pas visible.
J'aimerais favoriser cette solution puisque l'application que je développe est un projet d'étude.


La seconde solution:
Code html / php:

Code php :

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

1
2
3
4
5
6
7
echo "<div class='commentaire'>";
	echo "<span class='glyphicon glyphicon-plus' data-toggle='popover' data-placement='top' data-trigger='focus' data-html='true'>";
		// echo "<p class='commSaisie' style='display:none'>";
			// 	echo "<input type='text' name='commentaires[]' onblur='hide(this)'>";
		// echo "</p>";
	echo "</span>";
echo "</div>";

Code js:

Code javascript :

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

1
2
3
4
$(document).ready(function(){
	$('[data-toggle="popover"]').popover(); 
	$('[data_toggle="popover"]').html("<input type='text' name='commentaires[]'>");
});

Le problème de cette solution est que le popover ne s'affiche pas, rien ne se passe quand je clique sur le glyphicon. A noter également qu'il peut y avoir du contenu déjà présent dans le commentaire et qu'il faut le renseigner comme valeur de base de l'input, commentaire qui est différent d'une cellule à l'autre. C'est pour cette raison que je favorise la première solution.

Voilà voilà, j'espère que c'est assez clair, n'hésitez pas à poser des questions.
Merci d'avance de votre aide.

Cordialement,
Skunka.

[NoSmoking]

Bonjour,
construction plus qu'hasardeuse

Code html :

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

1
2
3
4
5
6
7
<div>
  <span>
    <p>
      <input>
    </p>
  </span>
</div>

pourquoi pas simplement

Code html :

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

1
2
3
4
<div>
  <span></span>
  <input>
</div>

cela me semblerait plus facile à gérer avec un positionnement absolute sur l'<input> par rapport à la <div>.

[Invité]

Bonjour,

pour avoir vu à quoi ressemble ton tableau dans ton autre discussion, je pense que tu t'y prends de la pire façon :

• chaque case est remplie avec des <select> et <input>

C'est extrêmement LOURD (et certainement LONG à charger).


Je pense pour ma part qu'il faudrait que :

1-

• les cases soient VIDES (pas de <select> ni <input>),
• et qu'elles ne contienne QUE les données de cette cases (les infos enregistrées pour cette case),
• ET un bouton "+".

2- Au clic sur ce bouton "+" :

• ça ouvre une fenêtre modale (via Ajax),
• à laquelle on transmet d'identifiant de la case,
• et dans laquelle se trouverait le formulaire de modification

3- La mise à jour se ferait au retour Ajax.

Ce serait beaucoup plus LÉGER et ergonomique.

[Skunka]

Bonjour,
pour le positionnement absolute, je m'en servais pour placer le <p> par rapport au <span> mais cela fonctionne mieux une fois sur l'input effectivement. Cependant, il est encore 'caché' par les cellules adjacentes. J'ai l'impression que son 'z-index' n'est respecté que dans sa cellule et non les autres.

Pour ce qui est du formulaire dans la modal, la solution est intéressante car tu as raison, le chargement met parfois un peu de temps.... J'ai farfouillé comme possible et je suis tombé sur ça:https://jquerymodal.com/ (Exemple 4)
Sur ce site, la modal s'ouvre sur la même page tandis que moi, je suis envoyé sur la page contenant ma modal. Voici ce que j'en ai tiré:

Fichier 'v-tests':

Code javascript :

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

1
2
3
4
5
6
7
$(".modalLink").click(function(event){
		alert("blnstbiumbtne");
		event.preventDefault();
		$.get(this.href, function(html) {
			$(html).appendTo('body').modal();
		});
	});

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
echo "<input type='hidden' name='chantier[]' value='".$p->getChantier()->getNumChantier()."'>";
					echo $p->getChantier()->getNomChantier();
					echo "<br>";
					echo "<input type='hidden' name='vehicule[]' value='".$p->getVehicule()->getNumVehicule()."'>";
					echo "<input type='hidden' name='commentaire[]' value='".$p->getCommentaire()."'>";
					echo $p->getVehicule()->getNomVehiculeABRG();
					if (!is_null($p->getCommentaire() ) ) {
						echo "<div class='commentaire'>";
							echo "<span class='glyphicon glyphicon-info-sign' data-toggle='tooltip' data-original-title='".$p->getCommentaire()."'>";
							echo "</span>";
						echo "</div>";	
					}
					echo "<a href='ajax/a-planningChantier_modal.php' id='modalLink'><span class='glyphicon glyphicon-plus'></span></a>";

Les inputs hidden me permettent d'avoir les identifiants de mes données, pour les transmettre ensuite à la modal. Mais ceux-ci provoquent-ils également un chargement plus long ?

Fichier 'a-planningChantier_modal':

Code html :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div id="myModal" class="modal" role="dialog">
	<div class="modal-dialog">
		<!-- contenu du popup-->
		<div class="modal-content">
			<div class="modal-header"> <!-- En-tête -->
							<p id='cellule'> 
									</p>
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
 
			<div class="modal-body"> <!--corps -->
				<p div="left">
					<form method="POST" class="form-horizontal">
							<div class="form-group">
									<label class="control-label col-sm-4" for="chantier">Chantier:</label>
									<div class="col-sm-8">
											<select name='chantier' id='chantier' class='form-control'>
													<?php
                                                                                                        foreach($chantiers as $ch){
                                                                                                                        echo "<option value='".$ch->getNumChantier()."'>".$ch->getNomChantier()."</option>";
                                                                                                        }
                                                                                                        ?>
											</select>
									</div>
							</div>
							<div class="form-group">
									<label class="control-label col-sm-4" for="vehicule">Véhicule:</label>
									<div class="col-sm-8">
											<select name='vehicule' id='vehicule' class='form-control'>
													<?php
                                                                                                        foreach($vehicules as $vh){
                                                                                                                        echo "<option value='".$vh->getNumVehicule()."'>".$vh->getNomVehiculeABRG()."</option>";
                                                                                                        }
                                                                                                        ?>
											</select>
									</div>
							</div>
							<div class="form-group">
									<label class="control-label col-sm-4" for="commentaire">Commentaire:</label>
									<div class="col-sm-8">
											<input type="text" name="commentaire" id="commentaire" class="form-control" placeholder="Commentaire">	
									</div>
							</div>
							<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
											<button type="submit" class="btn btn-default">Confirmer</button>
											<span style="font-size: 9px">*champs obligatoires</span>
									</div>
							</div>
					</form>
				</p>   
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
			</div>
		</div>
	</div>
</div>

Honnêtement, j'ai du mal à comprendre comment je peux ouvrir une modal grâce à une requête ajax et faire appelle à sa fonction .done lorsqu'on valide le formulaire en cliquant sur un bouton 'Valider' par exemple. Il faut aussi prendre en compte le fait que je na manipule pas souvent le javascript et encore moins sa syntaxe jQuery.

Il y a cette seconde source mais je n'arrive pas à comprendre parfaitement le traitement qui y est fait: https://www.discussdesk.com/how-to-o...k-function.htm.
Ici, je constate tout de même que des paramètres sont passés à la modal mais sans plus...

J'ai également essayé ceci:

Code javascript :

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

1
2
3
4
5
6
7
$(".glyphicon glyphicon-plus").on('click', function(event){
		var cell = $(this).parent().attr('id');
		$("#myModal").find('id#chantier').val( $(this).parent().find('id#chantier').val() );
		$("#myModal").find('id#vehicule').val( $(this).parent().find('id#vehicule').val() );
		$("#myModal").find('id#commentaire').val( $(this).parent().find('id#commentaire').val() );
		$("#myModal").modal('toggle');
	});

Je me sers de la même modale que précédemment (sur la même page cette fois ci) et j'ai retiré la balise <a> autour du span.
Cependant, la modal ne s'ouvre toujours pas.

En tout cas, merci de votre aide!

[Invité]

Bonjour,

Comme tout "bon débutant", tu essaies d'intégrer un outils à ton propre code, sans en maitriser le fonctionnement.

Non.
Fais d'abord des EXERCICES SIMPLES !