Pop up ou autre solution?

MiWi86-33 Messages postés 149 Statut Membre -  
Mimiste Messages postés 1159 Statut Membre -
Bonjour tout le monde!!!!!

Je crée une petite "application" ou plutôt je facilite l'enregistrement de données en php html js, via un formulaire, dans une base de donnée.
Qui dit base de donnée enregistrement, suppose visualisation, suppression, modification ...

C'est pour cela que j'ai un tableau qui me permet de visualiser mes données, et de les supprimer. En ce qui concerne la modification, j'ai pensé qu'en cliquant sur un img, je lancerais une popup : 


<td align=center>
<A HREF="#" onClick="window.open('modifier.php','unNom','toolbar=1, location=1, directories=0, status=0, scrollbars=1, resizable=1, copyhistory=0, menuBar=1, width=500, height=500');return(false)">
<input type='image' name='btnMod' value='".$num."' src='b_edit.jpg' height='20'width=20' alt='modifier' title='modifier'>
</A>
</td>


Ce que j'aimerais qui apparaissent dans cette popup, c'est un formulaire (formulaire par exemple utilisé pour rentrer les données) avec les données à modifier déjà à l'intérieur. Par exemple en utilisant php, j'aurais fait du $_POST pour le récupération de donnée, mais je doute que cela marche avec des popup. et j'aimerais aussi que cette popup soit bloqué, comme les fenêtres de confirmation, si tu soumets pas ou si tu annules pas, tu peux faire aucune autre action.

Bien sur il y avait le choix de target, ou d'une alert() ou confirm() ou je ne sais pas trop en faite.

Donc d'une, j'aimerais savoir qu'elle est la méthode la plus approprié, et de deux, hum, comment faire???

Merci d'avance pour vos réponses!!!
A voir également:

15 réponses

Réponse 1 / 15
Mimiste Messages postés 1159 Statut Membre 206
 
Oui en effet c'est ça, faut utiliser onmousedown (lorsqu'on presse le bouton on recupere les coordonée de la souris et on deplace la fenetre en consequence) et onmouseup (quand on relache le bouton de la souri on arrete)

C'est pas lourd et ça fonctionne plutot bien même regarde un exemple la

http://www.java2s.com/Code/JavaScript/Event/MouseDragandDrop.htm
1
Réponse 2 / 15
MiWi86-33 Messages postés 149 Statut Membre 9
 
mais comment je peux remplir la div?? je te montre le code : 

<div align='center'>
		<table border=5 width='100%'cellpadding='2' cellspacing='0' height='75%' width='100%'>
			<tr>
				<td align=center>Multicast</td>
				<td align=center>Chaine</td>
				<td align=center>Port</td>
				<td align=center>Codage</td>
				<td align=center>Définition</td>
				<td align=center>Systeme</td>
				<td align=center>Temporaire</td>
				<td align=center>Visuel</td>
				<td align=center>Diffusé</td>
				<td align=center>Type</td>
				<td align=center>Modifier</td>
				<td align=center>Supprimer</td></tr>


<?php
include "Controleur.php";
if(Connecter())
{
	//j'affiche dans mon tableau
	while($tuple=mysql_fetch_array($CurseurMult)) 
	{
		$num = $tuple['Num'];
		echo"<tr><td align=center>".$tuple['Multicast']."</td>";
		echo"<td align=center>".$tuple['Chaine']."</td>";
		echo"<td align=center>".$tuple['Port']."</td>";
		echo"<td align=center>".$tuple['Codage']."</td>";
		echo"<td align=center>".$tuple['Definition']."</td>";
		echo"<td align=center>".$tuple['Systeme']."</td>";
		echo"<td align=center>".$tuple['Permanent']."</td>";
		echo"<td align=center><img src='images.jpg' height='30'width=45' ></td>";
		echo"<td align=center>...</td>";
		echo"<td align=center>".$tuple['Type']."</td>";
		?>
		
		<td align=center><A HREF="#" onclick="document.getElementById('popup').style.display='';"><input type='image' name='btnMod' <?echo"value='".$num."'"?> src='b_edit.jpg' height='20'width=20' alt='modifier' title='modifier'></A></td>

		<?php
		echo"<form name='button' method='post' action='supprimer.php' >";
		echo"<td align=center><input type='image' name='btnSup' value='".$num."' src='b_drop.jpg' height='20'width=20' alt='Effacer' title='Effacer' onClick='return confirmation()'></td></tr>";
		
		echo"</form>";
	} 
	echo"</table></div>";?>	
	
	<div align="center" id="popup" style="display:none;position:absolute;top:0;left:0;background:url(transparent.png);background-repeat:repeat;" >
	<table border=0 cellpadding=0 cellspacing=0 height=100% width=100%>
	<tr>
	<td align=center>
		<div id="fenetre" style="position:relative;">
		
		<table style="border: 1px solid black;" cellpadding=0 cellspacing=0 width=500 height=200>
		<tr style="background:#00b1de" height=30><td><b><div class=fenetre style="cursor:move;" >Modification</div></b></td></tr>
		<tr style="background:#FFFFFF">
			<td align=center valign=top>

				<br>
				<?php ?>
				<br>
				<br>
				<br>
			</td>
		</tr>
		<tr style="background:#FFFFFF">
			<td align=center>

				<input type=button value=Fermer onclick="document.getElementById('popup').style.display='none';">
			</td>
		</tr>
		</table>
	</td>
	</tr>
	</table>
</div>

la boucle se ferme avant que je puisse remplir la div, donc ce que j'aimerais c'est récupérer <?echo"value='".$num."'"?> pour qu'après je fasse une requête récupérant les champs de ma table à l'id = $num.
j' sais pas si je suis très claire là....
1
Mimiste Messages postés 1159 Statut Membre 206
 
D'accord je vois

Ben alors va falloir faire de l'ajax pour pouvoir recuperer des données de la base direct avec javascript, t'en a deja entendu parler au moins j'imagine ^^ au pire si tu veu envoi moi par mp une adresse msn ce sera plus pratique

0
Réponse 3 / 15
MiWi86-33 Messages postés 149 Statut Membre 9
 
hey hey, merciiiiiiiiii!!!!! j'ai ma fenêtre qui bouge, avec l'arriere plan transparent (j'ai eu un soucis à un moment, parce que je n'arrivais pas à remttre le transparent et c'était juste une question de position : absolute ou position : relative...comme quoi un rien...


en tt cas, merci beaucoup, il me reste plus qu'à récupérer les données...je pense que je vais bloquer, alors je reviendrais surement, mais pour le moment, un GRAND MERCIIIIIIIIIIIIIIIIIIIIIIIII
0
Réponse 4 / 15
MiWi86-33 Messages postés 149 Statut Membre 9
 
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeuh, comment je fais pour récupérer les données?????? parce que dans modification, j'aimerais pouvoir créer un formulaire pré-remplies avec les données de ma base de données à modifier....
donc juste des petites données...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
Mimiste Messages postés 1159 Statut Membre 206
 
Ben tes données tu les a deja non ? Tu genere bien la fenetre en php donc rien ne t'empeche au passage de remplir les données dans la div ?
0
Réponse 6 / 15
Mimiste Messages postés 1159 Statut Membre 206
 
Bonjour

Pour passer des données effectivement du POST c'est pas possible mais du GET oui par exemple :

window.open('modifier.php?ID=12','unNom','toolbar=1, location=1, directories=0, status=0, scrollbars=1, resizable=1, copyhistory=0, menuBar=1, width=500, height=500')

dans modifier.php

$ID = $_GET['ID'];
echo $ID; // affiche 12

voila tu peux imaginer que tu passe l'id de l'enregistrement ensuite rien de plus simple que de faire une petite requete select qui recupere les données et les affiche dans les champs.

Pour le blocage d'une popup la c'est pas vraiment possible et je pense que tu comprendra facilement pourquoi... Imagine tu surf sur internet et paf une popup pleine de pub et de spam apparai a l'ecran t'empechant de faire quoi que ce soit a part cliquer sur la pub... Ce serai un gros problème de securité
-1
Réponse 7 / 15
MiWi86-33 Messages postés 149 Statut Membre 9
 
Merci pour la réponse, donc si je comprends bien, si je veux quelque chose qui se bloque, le pop up n'est pas à utiliser!!!!
Donc je pense que dans mon cas, ce n'est pas la meilleure des solutions, car si l'utilisateur clique sur modifier, j'aimerais qu'une fenêtre s'ouvre avec un formulaire pré remplis que je puisse modifier seulement les données dont j'ai besoin. je veux donc que la fenêtre qui apparait soit au premier plan, et ne puisse s'enlever que SI on valide le formulaire ou on l'annule (d'où l'idée d'une confirm()). Mais dans mon cas, je pense qu'il est mieux d'ouvrir une nouvelle page non???

Ou que pensez-vous d'une frame ou iframe? comme ça, j'aurais toujours la vue sur mon tableau avec les données et en appuyant sur "enregistrer les modification" que je lance un événement onClick = confirm(). Mais après, j'aimerais que ça enlève la frame pour n'avoir que le tableau à voir!!

Non????

Merci encore pour ton aide!!!!! le truc avec le pop up, c'est que la fenêtre peut se balader sans que l'utilisateur n'enregistre quoi que ce soit, et j'ai pas envie qu'il y ai une fenêtre qui se ballade!!!mais je vais voir!!!!

En tt cas, merci pour ta réponse!!
-1
Réponse 8 / 15
Mimiste Messages postés 1159 Statut Membre 206
 
Tu peut tout simplement faire une sorte de popup contenu dans une div avec un joli fond transparent

J'avai fait un test sur mon FTP a cette page :

http://www.a-w-t.fr/test/popup/popupJS.html

Regarde avec Firefox cette version la deconne avec IE (il ne gere pas les tailles de la même manière)

c'est pas infaillible non plus mais ça peut te donner un ordre d'idée
-1
Réponse 9 / 15
MiWi86-33 Messages postés 149 Statut Membre 9
 
bonjour,


Merci pour tes réponses, je vais me pencher dessus pour voir si celà correspond ou pas à ce que je pourrais entreprendre. Parce que pour le coup, c'est pas vraiment une pop up, il faudrait que je puisse bien la caler, donc je vais voir, mais merci pour l'idée en ttcas
-1
Réponse 10 / 15
MiWi86-33 Messages postés 149 Statut Membre 9
 
Salut, j'ai repris ton code en essayant de l'appliquer au moins, pour le moent, ça donne : 

onload=function(){

document.getElementById('popup').style.width = "100%";
document.getElementById('popup').style.height = "100%";

}

</script>  
<body>
<div align='center'>
		<table border=5 width='100%'>
			<tr>
				<td align=center>Multicast</td>
				<td align=center>Chaine</td>
				<td align=center>Port</td>
				<td align=center>Codage</td>
				<td align=center>Définition</td>
				<td align=center>Systeme</td>
				<td align=center>Temporaire</td>
				<td align=center>Visuel</td>
				<td align=center>Diffusé</td>
				<td align=center>Type</td>
				<td align=center>Modifier</td>
				<td align=center>Supprimer</td></tr>


<?php
include "Controleur.php";
if(Connecter())
{
	// s?ctionne les fiches de la table
	$query="SELECT * FROM information  order by Multicast LIMIT $nbDeb,$nbMax";
	$CurseurMult = mysql_query($query);
	
	//j'affiche dans mon tableau
	while($tuple=mysql_fetch_array($CurseurMult)) 
	{
		$num = $tuple['Num'];
		echo"<tr><td align=center>".$tuple['Multicast']."</td>";
		echo"<td align=center>".$tuple['Chaine']."</td>";
		echo"<td align=center>".$tuple['Port']."</td>";
		echo"<td align=center>".$tuple['Codage']."</td>";
		echo"<td align=center>".$tuple['Definition']."</td>";
		echo"<td align=center>".$tuple['Systeme']."</td>";
		echo"<td align=center>".$tuple['Permanent']."</td>";
		echo"<td align=center><img src='images.jpg' height='30'width=45' ></td>";
		echo"<td align=center>...</td>";
		echo"<td align=center>".$tuple['Type']."</td>";
		?>
		<td align=center><A HREF="#" onclick="document.getElementById('popup').style.display='';"><input type='image' name='btnMod' <?echo"value='".$num."'"?> src='b_edit.jpg' height='20'width=20' alt='modifier' title='modifier'></A></td>
		<?php
		echo"<form name='button' method='post' action='supprimer.php' >";
		echo"<td align=center><input type='image' name='btnSup' value='".$num."' src='b_drop.jpg' height='20'width=20' alt='Effacer' title='Effacer' onClick='return confirmation()'></td></tr>";
		echo"</form>";
	} 
	
	echo"</table></div>";?>
	<div align="center" id="popup" style="display:none;position:absolute;top:0;left:0;background:url(transparent.png);background-repeat:repeat;" >
	<table border=0 cellpadding=0 cellspacing=0 height=100% width=100%>
	<tr>
	<td align=center>
		<table style="border: 1px solid black;" cellpadding=0 cellspacing=0 width=500 height=200>
		<tr style="background:#00b1de" height=30><td><b>Modification</b></td></tr>
		<tr style="background:#FFFFFF">
			<td align=center valign=top>

				<br>
				mon formulaire
				<br>
				<br>
				<br>
			</td>
		</tr>
		<tr style="background:#FFFFFF">
			<td align=center>

				<input type=button value=Fermer onclick="document.getElementById('popup').style.display='none';">
			</td>
		</tr>
		</table>
	</td>
	</tr>
	</table>
</div>


Le petite fenêtre s'ouvre bien, en plein milieu de ma page, mais j'aimerais bien pouvoir rentre l'arrière plan opaque pour que vraiment, ce soit le 'pop up' qui ressorte!!! comment je pourrais faire ça???

Merci d'avance!
-1
Réponse 11 / 15
MiWi86-33 Messages postés 149 Statut Membre 9
 
Et puis j'aurais aussi voulu pouvoir déplacer la fenêtre...
-1
Réponse 12 / 15
Mimiste Messages postés 1159 Statut Membre 206
 
c'est le fichier "transparent.png" qui defini l'arriere plan de la fenêtre j'ai juste fais une petite image transparente qui ce repete pour former un arriere plan transparent. Je sais pas si tu l'a pris en même temps que mon code

http://www.a-w-t.fr/test/popup/transparent.png

Pour la rendre deplaçable la faut le coder c'est un peu plus tendu la comme ça je n'ai pas la solution (j'ai surement l'algo theorique en tete mais faut l'appliquer quoi ^^)
-1
Réponse 13 / 15
MiWi86-33 Messages postés 149 Statut Membre 9
 
Merci pour transparent.png, et pour rendre déplacable, faut utilisé des événements du genre onMouse et tt le tralala non???ça peut être lourd non????
-1
Réponse 14 / 15
MiWi86-33 Messages postés 149 Statut Membre 9
 
Hey merci encore pour la réponse, et ça correspond encore à ce que je veux, donc encore plus merci!!!

Et comme il y a toujours un "mais"...

Pourquoi quand je cherche à l'appliquer à mon code, il y a un soucis 

<style type="text/css">
.dragclass{
position : relative;
cursor : move;
}
</style>


<script type="text/javascript">

onload=function(){

document.getElementById('popup').style.width = "100%";
document.getElementById('popup').style.height = "100%";

}
//Drag and Drop script - http://www.btinternet.com/~kurt.grigg/javascript

if  (document.getElementById){

(function(){

//Stop Opera selecting anything whilst dragging.
if (window.opera){
document.write("<input type='hidden' id='Q' value=' '>");
}

var n = 500;
var dragok = false;
var y,x,d,dy,dx;

function move(e){
if (!e) e = window.event;
 if (dragok){
  d.style.left = dx + e.clientX - x + "px";
  d.style.top  = dy + e.clientY - y + "px";
  return false;
 }
}

function down(e){
if (!e) e = window.event;
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
 }
if (temp.className == "dragclass"){
 if (window.opera){
  document.getElementById("Q").focus();
 }
 dragok = true;
 temp.style.zIndex = n++;
 d = temp;
 dx = parseInt(temp.style.left+0);
 dy = parseInt(temp.style.top+0);
 x = e.clientX;
 y = e.clientY;
 document.onmousemove = move;
 return false;
 }
}

function up(){
dragok = false;
document.onmousemove = null;
}

document.onmousedown = down;
document.onmouseup = up;

})();
}//End.
</script>


</head>
<body>
<div class="dragclass" style="height:20px;width:150px;top:0px;left:0px;background-color:#ff0000;color:#ffffff">
Div: Relative position
</div>
<td align=center><A HREF="#" onclick="document.getElementById('popup').style.display='';"><input type='image' name='btnMod'src='b_edit.jpg' height='20'width=20' alt='modifier' title='modifier'></A></td>

<div class="dragclass" align="center" id="popup" style="display:none;position:relative;top:0;left:0;background:url(transparent.png);background-repeat:repeat;" >
	<table border=0 cellpadding=0 cellspacing=0 height=100% width=100%>
	<tr>
	<td align=center>
		<table style="border: 1px solid black;" cellpadding=0 cellspacing=0 width=500 height=200>
		<tr style="background:#00b1de" height=30><td><b>Modification</b></td></tr>
		<tr style="background:#FFFFFF">
			<td align=center valign=top>

				<br>
				mon formulaire
				<br>
				<br>
				<br>
			</td>
		</tr>
		<tr style="background:#FFFFFF">
			<td align=center>

				<input type=button value=Fermer onclick="document.getElementById('popup').style.display='none';">
			</td>
		</tr>
		</table>
	</td>
	</tr>
	</table>
</div>
</body>


Ma premiere div (utilisé en guise d'exemple ) se déplace, mais pas la deuxième (celle qui m'intéresse vraiment), pourtant, je pense que c'est le même code...
-1
Réponse 15 / 15
Mimiste Messages postés 1159 Statut Membre 206
 
Tien en modifiant un peu le systeme je suis arrivé a un compromis pas trop mal

http://www.a-w-t.fr/test/popup/test.html

En fait comme tu etait parti pour le faire ça n'aurai pas fonctionné car tu lui demandai de deplacer toute la fenetre avec le fond compris, en fait ce qu'on cherche a deplacer c'est juste la balise <table> mais ce n'est pas faisable directement donc : 


<div id="fenetre" style="position:relative;"> 
		<table style="border: 1px solid black;" cellpadding=0 cellspacing=0 width=500 height=200> 
		<tr style="background:#00b1de" height=30><td><b><div class=fenetre style="cursor:move;" >Modification</div></b></td></tr> 
		<tr style="background:#FFFFFF"> 
			<td align=center valign=top> 
 
				<br> 
				mon formulaire
				<br> 
				<br> 
				<br> 
			</td> 
		</tr> 
		<tr style="background:#FFFFFF"> 
			<td align=center> 
 
				<input type=button value=Fermer onclick="document.getElementById('popup').style.display='none';"> 
			</td> 
		</tr> 
		</table> 
		</div>



J'ai mis la table dans une div avec comme id "fenetre"

J'ai rajouté une div (en gras dans le code) sur la ligne en bleu et je lui ai mis comme classe "fenetre"

Dans le javascript je lui dis de deplacer la div dont l'ID est la classe de l'objet sur lequel on click
-1

Discussions similaires

Comment désactiver le mode sécurisé de la Freebox POP.
Cycy -
bazfile -

18 réponses
Comment lire un DVD avec un pop-up mobile external DVD-RW
Anna -
Anna -

2 réponses
Je ne trouve pas ouaf
Luffy -
blux -

3 réponses
Freebox pop
Kuza -
CCMBot -

1 réponse
solution de tous les albums ou est Charlie
Utilisateur anonyme -
piquesous -

3 réponses