Ajax et fenêtre modale

Version imprimable

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:

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:

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.

20/01/2014, 18h36
NoSmoking

Bonjour,

Citation:

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 :mouarf:)
21/01/2014, 08h34
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 :)
21/01/2014, 09h21
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.
21/01/2014, 10h25
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***
21/01/2014, 10h49
Golgotha

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

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..
21/01/2014, 11h03
zerros

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

Code:

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

Et le lien est:

Code:

<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.
21/01/2014, 12h01
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.
21/01/2014, 12h09
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.

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:

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 ?

21/01/2014, 16h37
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 :)
22/01/2014, 06h45
Golgotha

Super :ccool: