nouvelle fenetre pour selectionner et rechercher un item

**pop_up** · 05/04/2012, 09h52

Bonjour,

Je cherche une solution pour ouvrir une popup qui me permette de rechercher des éléments et en cliquant sur un élément, que ça l'insère dans la page depuis laquelle j'ai ouvert la popup.

Pour résumer, j'ai ma page principale dans laquelle j'ai un formulaire où j'aurai plusieurs lien "ajouter un élément". El cliquant sur un de ces liens, cela devrai m'ouvrir la popup, que l'utilisateur puisse faire des recherches qui filtrent les éléments dans celle-ci, et en sélectionnant l’élément désiré dans la popup, il faudrait que cela me l'insère au bon endroit dans mon formulaire sans pour autant valider mon formulaire.

Auriez vous des liens vers des tutos ou vers des posts qui me permettent de mettre en place ce système ?

merci beaucoup

**SpaceFrog** · 05/04/2012, 11h08

en jquery tous les plugins avec "box"

lightbox, tinybox, formbox ....

**pop_up** · 06/04/2012, 07h29

Je vais regarder ça de plus près, d'autant plus que j'utilise déjà fancybox.

merci

**pop_up** · 23/04/2012, 10h50

je reviens vers vous car, étant novice en jquery, il me manque quelques billes pour mettre en place le dialogue entre ma page mère et la popup.

J'ai plusieurs lien "ajouter" dans ma page. Ceux-ci sont dans une boucle php.
ça me donne ce code, si vous voulez tester (il vous faudra pour cela les fichier fancybox inlus et les images fancybox)

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>
		<link rel="stylesheet" href="jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
	</head>
	<body>
 
		<table>
			<tr><th colspan="2">Titre rubrique A</th></tr>
			<tr><td>A1-col1</td><td>A1-col2</td></tr>
			<tr><td>A2-col1</td><td>A2-col2</td></tr>
			<script type="text/javascript">
			$(document).ready(function() {
			  $('#addElement1').fancybox({
					'titlePosition'   : 'inside',
					'transitionIn'    : 'none',
					'transitionOut'   : 'none'
				  });
			});
			</script>
			<tr>
				<td colspan="2">
					<a href="#rechercheElement1" id="addElement1">Ajouter un element</a>
					<div style="display: none">
						<div id="rechercheElement1" style="width:600px;overflow:auto;">
						  <p>la recherche va se trouver ici</p>
						</div>
					</div>
				</td>
			</tr>
			<tr><th colspan="2">Titre rubrique B</th></tr>
			<tr><td>B1-col1</td><td>B1-col2</td></tr>
			<tr><td>B2-col1</td><td>B2-col2</td></tr>
			<script type="text/javascript">
			$(document).ready(function() {
			  $('#addElement2').fancybox({
					'titlePosition'   : 'inside',
					'transitionIn'    : 'none',
					'transitionOut'   : 'none'
				  });
			});
			</script>
			<tr>
				<td colspan="2">
					<a href="#rechercheElement2" id="addElement2">Ajouter un element</a>
					<div style="display: none">
						<div id="rechercheElement2" style="width:600px;overflow:auto;">
						  <p>la recherche va se trouver ici</p>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

Dans un premier temps, je cherche à savoir comment faire pour insérer l'élément au retour de la popup, au dessus du lien à partir duquel on vient.

en jquery, je sais insérer grâce à cette ligne mais je ne sais pas comment faire pour insérer le lien dans la pop-up et lui dire de quel lien on vient :

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
$(document).ready(function(){
  $(".addPrestation").click(function(){
    $(this).parents("tr").before('<tr><td>col a inserer</td><td>col a inserer</td></tr>');
    return false;
  });
});
</script>

merci pour votre aide

**pop_up** · 24/04/2012, 13h35

C'est bon, j'avais pas résonné correctement car au final, ma popup se trouve dans mon code a coté de mes liens "ajouter" donc je peux "remonter" dans mon contenu avec jquery pour insérer le futur élément ou je veux

nouvelle fenetre pour selectionner et rechercher un item

jQuery

Discussions similaires

Partager

Partager