Envoyer et récuperer en GET un form HTML dans une lightbox

**tydoo34** · 06/11/2012, 03h13

Bonjour à tous

Voila je viens ici car j'ai un petit soucis de code.

J'i une lightbox qui fonctionne trés bien, et qui affiche les $_GET[''] quand je fait un liens tout simple de type :

Alors voici mes code de bases :

LE CODE QUI AFFICHE LA LIGHTBOX :

Code :

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

1
2
 
onclick="Lightbox.L10('http://www.monbahu.com/ajax/lightbox/backoffice.php');"

LE CODE JS DE LA LIGHTBOX

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
var Lightbox = {
 
	M1 : function(href) {
		$('#box').css('width','600px');
		$.post(href, {}, function(data){$("#boxcontent").html(data)});
		this.center('box','64');
		$('html,body').animate({scrollTop:0});
		return false;
	},
 
	M2 : function(href) {
		$('#box').css('width','770px');
		$.post(href, {}, function(data){$("#boxcontent").html(data)});
		this.center('box','64');
		$('html,body').animate({scrollTop:0});
		return false;
	},
 
	L10 : function(href) {
		$('#box').css('width','980px');
		$.post(href, {}, function(data){$("#boxcontent").html(data)});
		this.center('box','40');
		$('html,body').animate({scrollTop:0});
		return false;
	},
 
	hide : function() {
		$('#boxcontent').html('<div class="boxtitle">Loading...</div><div class="boxpad"><center><img src="../img/box/loading.gif"></center></div>');
		$('#box').css('width',null);
		$('#box').css('height',null);
		$('#box').hide();
		return false;
	},
 
	center : function(element,top) {
		var windowSize = this.getPageDimensions();
		var windowWidth  = windowSize[0];
		var left = (windowWidth - $('#'+element).width()) / 2;
		if (!$.browser.msie) left = left - 9;
		if (top == 40) left = ( left < 0 ) ? 0 : left;
		else left = ( left < 0 ) ? 0 : left;
		$('#'+element).css('position','absolute');
		$('#'+element).css('z-index','3000');
		$('#'+element).css('left',left+'px');
		$('#'+element).css('top',top+'px');
		$('#'+element).show();
	},
 
	getPageDimensions : function() {
		var xScroll, yScroll;
		if (window.innerHeight && window.scrollMaxY) {
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight) {
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else {
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		var windowWidth, windowHeight;
		if (self.innerHeight) {
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) {
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) {
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}
		if (yScroll < windowHeight) {
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
		if (xScroll < windowWidth) {
			pageWidth = windowWidth;
		} else {
			pageWidth = xScroll;
		}
		arrayPageSize = new Array(windowWidth,windowHeight,pageWidth,pageHeight);
		return arrayPageSize;
	},
 
	init : function() {
		var lightboxtext  = '<div id="box" style="display:none;">';
			lightboxtext += '	<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>';
			lightboxtext += '	<td background="http://127.0.0.1/img/box/top_left.png" width="10" height="10"></td>';
			lightboxtext += '	<td background="http://127.0.0.1/img/box/center.png"></td>';
			lightboxtext += '	<td background="http://127.0.0.1/img/box/top_right.png" width="10" height="10"></td>';
			lightboxtext += '	</tr><tr>';
			lightboxtext += '	<td background="http://127.0.0.1/img/box/center.png"></td>';
			lightboxtext += '	<td><div id="boxcontent"><div class="boxtitle">Loading...</div><div class="boxpad"></div></div></td>';
			lightboxtext += '	<td background="http://127.0.0.1/img/box/center.png"></td>';
			lightboxtext += '	</tr><tr>';
			lightboxtext += '	<td background="http://127.0.0.1/img/box/bottom_left.png" width="10" height="10"></td>';
			lightboxtext += '	<td background="http://127.0.0.1/img/box/center.png"></td>';
			lightboxtext += '	<td background="http://127.0.0.1/img/box/bottom_right.png" width="10" height="10"></td>';
			lightboxtext += '	</tr></table>';
			lightboxtext += '</div>';
		$('body').append(lightboxtext);
	}
}
$(window).load(function(){ Lightbox.init(); });

LE CODE QUI AFFICHE LES DIFFERENTE PAGE DANS LA MEME LIGHTBOX

enfaite le code recherche la meme page avec un GET['page] different suivant la page demander

Code :

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

1
2
 
onclick="Lightbox.L10('http://www.monbahu.com/ajax/lightbox/backoffice.php?page_admin=new_photo');"

Passons maintenant a la partit compliqué : Faire la meme choses, mais cette fois avec un form et des input.

Bon voila mon code que je fait, un code de base :

Code :

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

1
2
3
4
<form  method="get">
            <input  type="text" name="membre" class="login" value="Rechercher un pseudo" onclick="if(this.value=='Rechercher un pseudo')this.value=''" onblur="if(this.value=='')this.value='Rechercher un pseudo'">
<span style="margin-left:5px;margin-top:4px;" class="input-bleu2"><input style="font-size:15px;" class="button-bleu2" name="submit" id="button" value="Rechercher" type="submit"/></span>
</form>

Enfaite mon problème c'est quand je met en action="" mon code de base comme le lien de llightbox

Code :

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

1
2
 
action="Lightbox.L10('http://www.monbahu.com/ajax/lightbox/backoffice.php?page_admin=new_photo&action=ded');"

Il ne m'ouvre pas la lightbox, mais exécute le form et me renvoir le GET dans la page ouvré de base 'index.php' qui est ouverte.

Code :

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

<a href="http://www.monbahu.com/?membre=marie&submit=submit" target="_blank">http://www.monbahu.com/?membre=marie&submit=submit</a>

J'aurais besoin de vous pour trouvé une solution pour utiliser un forme en GET
pour que je puisse envoyer le contenue d'un formulaire dans une page lightbox

Merci pour vos réponses

**SpaceFrog** · 06/11/2012, 08h36

Les elements de la lightbox sont dans la même page ...
si tu soumets le form, il part sur la page d'action.
Tu dois envoyer le contenu du form en ajax, pour ce faire il faut inhiber l'envoi traditionnel du form et donc bloquer l'envoi du form par le bouton submit et de manière générale le submit du form au moyen d'un preventDefault()
il faut ensuite recupérer les données du form avec un serialize() et passer ces données dans le data de ton ajax.
Puis sur le success de ton ajax gérer le retour.

**tydoo34** · 06/11/2012, 17h06

A d'accord.

Mais comment je code ca ? Je ne sais pas coder en ajax, ni les fonction que tu as dit ^^

Tu peut m'aider. J'vais voir pour les fonction.

**SpaceFrog** · 06/11/2012, 17h09

Mais comment je code ca ? Je ne sais pas coder en ajax,

heu

Code :

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

$.post

c'est de l'ajax
ainsi que $.get, $.ajax etc ...

il te faut surtout inhiber l'envoi du form avec le preventDefault()

**tydoo34** · 06/11/2012, 17h17

a dont comme ca :

Code :

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

onclick="preventDefault() "

**SpaceFrog** · 06/11/2012, 17h18

non dans le jquery

Code :

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

1
2
3
4
5
6
 
$('tonelement').click( function(e) {
          e.preventDefault();
          // ici ton ajax ...
 
})

**tydoo34** · 06/11/2012, 17h26

ok dont le form reste basique ?

Code :

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

1
2
3
4
5
6
<form type="get" id="tonelement" action="Lightbox.L10('http://<?php echo $_SERVER['HTTP_HOST']; ?>/ajax/lightbox/backoffice.php?page_admin=edit_membre')" >
 
           <input  type="text" id="membre" name="membre" id="query" class="login" value="Rechercher un pseudo" onclick="if(this.value=='Rechercher un pseudo')this.value=''" onblur="if(this.value=='')this.value='Rechercher un pseudo'">
			<span style="margin-left:5px;margin-top:4px;" class="input-bleu2">
			<input style="font-size:15px;" class="button-bleu2" name="submit" value="Rechercher" type="submit"/>
			</span></form>

et l'ajax ?

Code :

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

1
2
3
4
$('tonelement').click( function(e) {
          e.preventDefault();
          serialize($membre);
})

Mais comment je fait pour récuperer la donnée dans l'ajax, l'envoyer et la recuperer sous forme d'une variable php ?

**SpaceFrog** · 06/11/2012, 17h29

Tu cliques sur le form pour le soumettre ????

**tydoo34** · 06/11/2012, 17h32

a non ^^

Code :

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

1
2
3
4
5
6
<form type="get" action="Lightbox.L10('http://<?php echo $_SERVER['HTTP_HOST']; ?>/ajax/lightbox/backoffice.php?page_admin=edit_membre')" >
 
           <input  type="text" id="membre" name="membre" id="query" class="login" value="Rechercher un pseudo" onclick="if(this.value=='Rechercher un pseudo')this.value=''" onblur="if(this.value=='')this.value='Rechercher un pseudo'">
			<span style="margin-left:5px;margin-top:4px;" class="input-bleu2">
			<input id="tonelement"  style="font-size:15px;" class="button-bleu2" name="submit" value="Rechercher" type="submit"/>
			</span></form>

et pour l'ajax ?

Code :

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

1
2
3
4
$('tonelement').click( function(e) {
          e.preventDefault();
          $.get('/ajax/lightbox/backoffice.php?page_admin=edit_membre&membre=',serialize(), function());
})

**SpaceFrog** · 06/11/2012, 19h37

Code :

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

 $.get('/ajax/lightbox/backoffice.php?page_admin=edit_membre&membre=',serialize(), function());

ton membre= il sert à quoi ?

et ton callback n'est pas valide ...

Code :

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

function(){ alert('fini!}

**tydoo34** · 06/11/2012, 20h28

enfaite je doit envoyer le contenue de l'input membre et la recuperer sous forme de variable $membre

c'est quoi un callback ?

**tydoo34** · 06/11/2012, 20h55

je crois que ca doit pas etre ca, ca marche pas ^^

Code :

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

1
2
3
4
5
$('tonelement').click( function(e) {
          e.preventDefault();
          $.get('/ajax/lightbox/backoffice.php?page_admin=edit_membre&membre=',serialize(), function(){ alert('fini!'});
 
})

**tydoo34** · 06/11/2012, 20h58

Quand je clique sur le submit, il s'éxecute et j'obtiens dans l'url :

Code :

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

?membre=Rechercher+un+pseudo&submit=Rechercher

**tydoo34** · 09/11/2012, 22h24

Enfaite je ne my connais pas vraiment en JS.

Es ce que vous pouvez m'aider a coder. CAr la je suis perdu.

Merci a vous

Envoyer et récuperer en GET un form HTML dans une lightbox

JavaScript

Discussions similaires

Partager

Partager