Discussion :

[zerros]

Bonjour,

je suis confronté à un problème que je n'arrive pas à résoudre. Sur mon application, je rempli une div en faisant appel à ajax. Du coup, je peux naviguer dans les différentes pages sans avoir à rafraîchir tous le site à chaque changement de page.

Cette partie fonctionne bien grâce qu code suivant (j'ai un blockUI pour affichier l'image de load):

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
// action sur le clique du menu
$('.menuItem').click(function(event) {
	event.preventDefault();
	$('.blockMe').block({ 
		message: '<img src="templates/default/img/loading.gif" />', 
		//css: { border: '3px solid #a00' } 
	});
	url = $(this).attr('href');
	$.ajax({
		type: "POST",
		url: url,
		cache: false,
		success: function(ret) {
			$('.blockMe').unblock();
			$("#main").html(ret);
		},
		statusCode: {
			404: function() {
				alert("page not found");
			}
		}
	});
});

Donc jusqu'ici pas de prob. J'ai ensuite voulu ajouter une fenêtre modal pour les différentes actions sur chaque page (formulaires notamment). J'ai donc implémenter jqmodal, et là aussi pas de souci:

Code html :

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

1
2
3
4
5
6
7
8
9
10
{literal}
	<script type="text/javascript" src="templates/default/js/jq_modal.js"></script>
{/literal}
<link rel="stylesheet" type="text/css" href="templates/{$TPL}/css/jq_modal.css" />
...
...
<div class="mAction">
	<a href="gUtilisateurs.php?do=add" class="jq_modal" title="Ajouter un nouvel utilisateur"><img src="templates/{$TPL}/img/adduser.png" /></a> 
	<a href="gUtilisateurs.php?do=delall" class="jq_modal" title="Supprimer tous les utilisateurs"><img src="templates/{$TPL}/img/truncate.png" /></a>
</div>

Donc j'ouvre bien ma popup, et j'exécute bien mon formulaire, et dans cet exemple, je crée un utilisateur. pas de problème. Je veux maintenant fermer ma modal et revenir à la page parente. Je clique sur la croix, et hop, je me retrouve bien sur ma page utilisateur, mais avec les anciennes données puisque je ne l'ai pas rafraîchit.

Pour rafraichir ma page parente, j'ai essayé de mettre un parent.location.reload lors du click sur la croix. pas de prob, ma page parente se reload, mais .... c'est le drame. C'est carrément le site qui se reload entièrement et je me retrouve sur la page d'accueil.

Et oui, puisque je load une div avec le contenu d'autres page, mon URL ne bouge jamais. Alors je cherche un moyen de reloader juste la div de la page parente déjà ouverte avec le contenu d'une nouvelle exécution de la page qui permettra d'avoir la mise à jour qui vient juste d'être faite.

exemple:
- J'ouvre le formulaire d'ajout d'un utilisateur
- Je crée l'utilisateur
- j'appuie sur la croix
- La div parente (#main) se recharge avec le contenu de l pahe utilisateur.php qui renvoi la nouvelle liste d'utilisateur.

Y a t il un moyen de faire ça ? J'espère que vous pourrez m'aider.

[NoSmoking]

Bonjour,

Alors je cherche un moyen de reloader juste la div de la page parente déjà ouverte avec le contenu d'une nouvelle exécution de la page qui permettra d'avoir la mise à jour qui vient juste d'être faite.

un peu du mal à comprendre pourquoi tu ne fais pas une nouvelle requête une fois ton retour Ok.
Tu pourrais également mettre les champs à jour si les informations ne dépendent pas la prise en compte de la requête en cours. ( sur ce coup c'est toi qui risque d'avoir du mal à comprendre )

[zerros]

En fait, c'est exactement ce que je voudrai faire, à savoir renvoyer une nouvelle requête pour recharger la div en question. Mais je ne sais pas du tout comment faire puisque l'url ne change jamais.

Il faudrai que j'arrive à rappeler la page depuis la modal et afficher son contenu dans la div qui va bien.

Voilà une démo: http://pxa.zerr0s.net
User: sadmin
Pass: 1234 (ce mot de passe est temporaire)

J'ai fait sauter les protections temporairement.
Il faut aller dans "Administration" puis "gestion des utilisateurs".

Le test que je fais actuellement est sur la corbeille (qui permet de supprimer tous les utilisateurs). Vous comprendrez mieux car c'est un peu compliqué à expliquer.

Une fois que je ferme la modal, je voudrai pouvoir me retrouver sur la page "Gestion des utilisateurs", mais avec la nouvelle liste.

pour tester, le bouton ajouter un utilisateur fonctionne aussi, mais pour le moment, le "forms action" est pourri. mais il permet au moins d'ajouter quelques utilisateurs pour ensuite pouvoir tester la suppression (corbeille).

Voilà. j'espère que vous aurez des idées/solutions à me filer

[Golgotha]

Bonjour,

Avec le .load de jQuery ? http://api.jquery.com/load/

Sinon, ça sera lancement d'une fonction qui va rafraîchir la liste en ajax dans la page parente je pense, c'est le plus simple.

[zerros]

Le problème est de pouvoir lancer le load depuis la modal pour recharger la div du parent.
J'avais déjà essayé cette solution. Je vais réessayer, peut-être m'y suis-je mal pris.

Sinon l'idée de faire une fonction qui va exécuter un php et qui renvoi le contenu sur demande (avec un bouton rafraîchir par exemple), pourrait fonctionner,mais ce n'est pas très propre.

Peut-être que je m'y suis mal pris sur la gestion de la navigation ... il faudrait peut-être faire autrement pour ne pas être autant emm***

[Golgotha]

J'ai du mal à comprendre ou est le problème

Si je reprends le truc :

- Une page ouvre une fenêtre modale, qui n'est rien d'autre qu'un div non ?
- Quand tu ferme cette div, avec un callback ou autre tu peux lancer une fonction, si je ne me trompe pas.
- Cette fonction va rafraîchir, en ajax la liste des utilisateurs sur la fenêtre.. et voilà.

Ou je me trompe ? Pour moi, rien de sorcier..

[zerros]

ahhh non. la modal ouvre une autre page. pas une div qui est sur la même page:

Code :

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

var $the_link = $(this).attr('href');

Et le lien est:

Code :

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

<a href="gUtilisateurs.php?do=delall" class="jq_modal" title="Supprimer tous les utilisateurs"><img src="templates/{$TPL}/img/truncate.png" /></a>

Ah voilà pourquoi nous n'arrivons pas à nous comprendre. Du coup, je ne peux pas rafraichir avec un callback car je ne suis plus sur la même page quand je lance la modal.

[Golgotha]

Ok,

Ducoup, je pense que c'est pas top d'appeler une autre page. ça fait un peux "iframe".. pour moi, une div dans la fenêtre qui s'ouvre est largement suffisante pour faire ça, non ? Tu aurai moins de problème.

[zerros]

yesss, je vais essayer de chanegr le mode de fonctionnement et au lieu d'utiliser des plugins qui utilisent les méthodes dialog de jquery, je vais instancier directement dans mon code. Je n'ai pas besoin de toutes les fioritures qu'il peut y avoir dans les plugins.

Merci. j'essaie cette piste.

[zerros]

Bon, j'ai créer des div dans mes pages et j'arrive à ouvrir mes modal. Sur une de mes modal, j'ai mis un formulaire, et ce formulaire a une action sur le click du bouton qui envoi en ajax à une page de traitement php qui renvoi l'état de l'insertion en base :

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
$('.submit').click(function(event) {
        event.preventDefault();
        var href = $(this).attr('href');
        var elemt = href.split('-');
        alert(elemt[0]);
        alert(elemt[1]);
        alert( $(elemt[0]).serialize() );
        $.ajax({
                type: "POST",
                data: $( elemt[0] ).serialize(),
                url: elemt[1],
                cache: false,
                success:
                        function(ret) {
                                alert(ret);
                },
                statusCode: {
                        404: function() { alert("page not found") }
                }
        });
})

Le problème est que je n'arrive pas à récupérer les données qu'il y a dans le formulaire. Mon array POST est vide. je ne peux pas tester le callback tant que je n'aurai pas régler ce problème. Une idée ?

[zerros]

yesss ça marrcchhhheee. problème réglé pour le serialize et pour le callback aussssiiii.

Merci pour toutes ces pistes que je ne connaissais pas

[Golgotha]

Super