Utiliser jquery dans une div chargée par XMLHttpRequest

Version imprimable

15/05/2012, 15h16
zerros

Utiliser jquery dans une div chargée par XMLHttpRequest

Bonjour,

Je suis en train de développer une application sur laquelle je charge une div à partir de requêtes XMLHttpRequest qui exécutent des pages php et renvoi la sortie sur la div principale. J'utilise Smarty comme moteur de templates.

Le souci est que dans cette fameuse div, je voudrai y ajouter un lien permettant d'ouvrir une fenêtre modal qui contient un formulaire. J'ai donc inclus je fameux jquery.js sur la page principale, et ensuite dans la page sur laquelle doit aparaitre le lien, j'ai ajouter le code ajax pour la modal entouré de {literal} ... {/literal} (Smarty le demande).

Le code tout seul dans une page html simple n'a aucun souci. Je l'ai juste trasnposé sur mon application.

Quand je clique sur le lien, rien ne se passe et je trouve rien non plus avec firebug. Aruiez-vous déjà de l'expérience sur ce type de structure ?
16/05/2012, 15h23
tidus_6_9_2

Salut, heu pas bien saisi ton problème...

Dans le XML tu as le code de la div avec quelque chose du genre :

<div onclick="ouvriremapopup();"></div>

C'est bien ça ?

Non en fait, j'ai une page principale avec un menu et une div.

Quand je clique sur un item du menu, j'affiche une image de loading dans la div et je fais appel à un page php qui fais des traitements et renvoi le résultat dans cette div. Ensuite dans la réponse renvoyée, je veux ouvrir une fenêtre modal.

Voilà un exemple de code de mon menu:
Code:

1 2 3 4 5 6 <div id="top"> <a onclick="go('page1');">xxxx</a> .::. <a onclick="go('page2');">xxx</a> .::. <a onclick="go('page3');">xxx</a> .::. <a onclick="go('page4');">xxx</a> </div>
Le code de ma div :
Code:

1 2 3 <div id="content"> <span id="loader" class="load" style="display: none; position: absolute;width:1024px; text-align: center;"><img src="templates/{$TPL}/img/loader.gif" alt="loading" /></span></span> </div>
Le prob est que la modal ne s'ouvre pas si je la met dans une page php qui est retournée dans le div content. Si je la met directement sur la page principal, pas de souci. J'espère m'être mieux exprimé ;)

Bonjour , je ne vois pas de jquery par ici ...

sinon pour information il faut binder tes évènements après qu'il se soit chargé dans le dom du document ( après le chargement en ajax )
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $.ajax({ url: tonurl, data : {"mes données": "valeurs"}, type: 'POST', dataType: 'html', // le format de retour attendu, ici de l'html success: function(data) { $('#madiv').html(data); $('#leboutonquiestdansladiv').on('click',function(){APPELMAFONCTION()}); }, error : function(data){ alert('une erreur est survenue'); } });
voila ...

sinon montre nous ton code javascript ou jquery

Hello,

Désolé de n'avoir pas répondu plus vite. J'avais laissé tomber le code par manque de temps, et là je m'y remets et je me retrouve dans le même problème puisque je ne l'avais pas réglé en mai dernier :s (vive GIT)

Voici le code du menu, et qui fonctionne.

Code:

1
2
3
4
5
6
7
<div id="top">
                        <a onclick="go('requests');">Automatique</a> .::. 
                        <a href="#?w=500" rel="popup_sendfile" class="poplight">Envoyer un fichier</a> .::. 
                        <a onclick="go('xml');">Gestion des XML</a> .::.
                        <a onclick="go('templates');">Gestion des modèles</a> .::. 
                        <a onclick="go('list');">Gestion des fichiers générés</a> .::. 
</div>

Je charge mes pages via XMLHttpRequest. Pour la popup modal, celle du menu popup_sendfile fonctionne car elle est dans la fenetre principale.

La popup_sendfile:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="popup_sendfile" class="popup_block">
                        <h1>Envoi manuel</h1>
                        <hr />
                        <div id="viewform">
                                <form method="post" enctype="multipart/form-data" action="uploadFile.php">
                                        <p>Veuillez sélectionner sur votre ordinateur le fichier modèle à envoyer:</p>
                                        <p>
                                                <input type="file" id='file' name="newfile" />
                                                <select name="dir" id="dir">
                                                		<option selected="selected" value=""></option>
                                                        <option value="xml">Fichier xml</option>
                                                        <option value="template">Fichier modèle</option>
                                                </select>
                                                <input type="submit" value="Envoyer" />
                                        </p>
                                </form>
                        </div>
                </div>

Le code d'ouverture de la popup:

Code:

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
<script type="text/javascript">
                {literal}
                $(document).ready(function(){
                        $('a.poplight[href^=#]').click(function() {
                                var popID = $(this).attr('rel');
                                var popURL = $(this).attr('href');
 
                                var query= popURL.split('?');
                                var dim= query[1].split('&');
                                var popWidth = dim[0].split('=')[1];
 
                                $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="templates/default/img/close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');
 
                                var popMargTop = ($('#' + popID).height() + 80) / 2;
                                var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
                                $('#' + popID).css({ 
                                        'margin-top' : -popMargTop,
                                        'margin-left' : -popMargLeft
                                });
 
                                $('body').append('<div id="fade"></div>');
                                $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
                                return false;
                        });
 
                        $('a.close, #fade').live('click', function() {
                                $('#fade , .popup_block').fadeOut(function() {
                                        $('#fade, a.close').remove();  
                        });
 
                                return false;
                        });
 
 
                });
                {/literal}
                </script>

PS: J'utilise smarty, , d'où le {literal}

Et la fonction "go()" qui permet d'ouvrir mes pages dans la div "content":

Code:

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
function getXhr() {
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	} else { 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}
 
function go(page){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			resp = xhr.responseText;
			document.getElementById("loader").style.display = "none";
			document.getElementById("content").style.backgroundColor = "#fff";
			document.getElementById('content').innerHTML = resp;
		} else if (xhr.readyState < 4) {
			document.getElementById("content").style.backgroundColor = "#cccccc";
			document.getElementById("loader").style.display = "inline";
		}
	}
 
	xhr.open("GET", page + ".php", true);
	xhr.send(null);
}

Jusque là ça va. Le problème est que je voudrai ouvrir une autre popup dans ma div "content" qui contient la page demandée via le menu. J'ai donc remis dans ma page qui est chargée:

Code:

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
<script type="text/javascript">
                {literal}
                $(document).ready(function(){
                        $('a.poplight[href^=#]').click(function() {
                                var popID = $(this).attr('rel');
                                var popURL = $(this).attr('href');
 
                                var query= popURL.split('?');
                                var dim= query[1].split('&');
                                var popWidth = dim[0].split('=')[1];
 
                                $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="templates/default/img/close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');
 
                                var popMargTop = ($('#' + popID).height() + 80) / 2;
                                var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
                                $('#' + popID).css({ 
                                        'margin-top' : -popMargTop,
                                        'margin-left' : -popMargLeft
                                });
 
                                $('body').append('<div id="fade"></div>');
                                $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
                                return false;
                        });
 
                        $('a.close, #fade').live('click', function() {
                                $('#fade , .popup_block').fadeOut(function() {
                                        $('#fade, a.close').remove();  
                        });
 
                                return false;
                        });
 
 
                });
                {/literal}
                </script>

La nouvelle popup:

Code:

1
2
3
<div id="popup_list" class="popup_block">
test
</div>

et un lien qui y fait référence:

Code:

<a href="#?w=500" rel="popup_list" class="poplight">test</a>

Mais la popup ne fonctionne pas. je pense que le jquery ne s'applique pas au contenu de la div "content".

Une idée ?

12/10/2012, 09h06
SpaceFrog

COmme le signale chomy ;), un element n'existant pas sur la page ne peut se voir attribuer d'evènements, il faut anticiper avec on() ou delegate()

Il faut aussi savoir que ajax ne permet qu'une conversation sous forme de string
Si le retourne comporte du script il devra etre évalué ... voir getScript()
Le meilleur moyen est encore d'appender le retour
12/10/2012, 11h16
zerros

Arggg. ok, je n'ai pas tout pigé, mais je comprends que le code de ma page parente doit être linké avec ma div.

Je vais fureter sur le net pour trouver comment linker/appender en partant de l'exemple de chomy.