Derri\u00e8re ce titre alambiqu\u00e9 se cache un besoin particulier que j’ai cherch\u00e9 (et r\u00e9ussi) \u00e0 r\u00e9soudre derni\u00e8rement. La situation est la suivante : un utilisateur arrive sur une page, celle-ci effectue un appel ajax afin de conna\u00eetre l’\u00e9tat d’un param\u00e8tre utilisateur. Pour illustrer, nous dirons donc que la page interroge une api pour r\u00e9pondre \u00e0 la question : l’utilisateur a-t-il une image de profil enregistr\u00e9e ?<\/p>\n
Si l’utilisateur poss\u00e8de une image enregistr\u00e9e, on la lui affiche ainsi qu’un message pour lui permettre de la supprimer. Si aucune image n’est pr\u00e9sente, l’utilisateur peut choisir d’en ajouter une. L’acquisition de l’image s’effectue dans une page d\u00e9di\u00e9e, que nous appellerons la page fille. Cette acquisition est r\u00e9alis\u00e9e \u00e0 l’aide de la biblioth\u00e8que Cropper.js<\/a>.<\/p>\n Une fois l’image acquise, l’utilisateur valide la s\u00e9lection via un bouton. Au niveau de la page fille, un appel est donc r\u00e9alis\u00e9 vers une api pour sauvegarder l’image. Si l’appel est une r\u00e9ussite, nous fermons la page fille.\u00a0\u00c0 ce stade, l’utilisateur se retrouve sur la page parente qui lui propose toujours d’ajouter une image, ce qu’il vient de faire, nous allons donc recharger la page parente \u00e0 la fermeture de la page fille.<\/p>\n J’illustre ce processus dans le code HTML en fin de page. Lorsque la page parente est charg\u00e9e, celle-ci affiche en alert(), le message \u00ab\u00a0Page charg\u00e9e !\u00a0\u00bb afin de mat\u00e9rialiser le rechargement de la page. En cliquant sur le lien, une nouvelle page s’ouvre. Lorsqu’on clique sur le bouton de cette page, on va d\u00e9clencher la fermeture de la page courante (la page fille) et le rechargement de la page parente. De plus, afin de mat\u00e9rialiser l’action de la page fille dans la page parente, de rendre l’exemple plus int\u00e9ressant et de mat\u00e9rialiser ce qui correspondrait dans mon cas pratique \u00e0 la mise \u00e0 jour de l’information par le premier appel ajax (celui sur la page parente), le texte saisi dans le formulaire sur la page fille est transf\u00e9r\u00e9 \u00e0 la page parente et affich\u00e9 par un alert().<\/p>\n Par ailleurs, le test du bool\u00e9en pageFille.fermeture dans la fonction de l’\u00e9v\u00e9nement unload de la page fille permet de s’assurer que la page parente ne sera recharg\u00e9e que si le traitement est r\u00e9ussi sur la page fille o\u00f9 window.fermeture vaudra alors true. En effet, si on enl\u00e8ve le test du bool\u00e9en, on constate qu’un \u00e9v\u00e9nement unload a lieux d\u00e8s l’ouverture de la page fille, ce qui aurait donc pour effet de recharger imm\u00e9diatement la page parente. Le test du bool\u00e9en permet de palier \u00e0 ce \u00ab\u00a0probl\u00e8me\u00a0\u00bb.<\/p>\n Page Parente (pageParente.html)<\/p>\n Page Fille (pageFille.html)<\/p>\n Voil\u00e0 pour l’exemple. Il reste maintenant quelques limitations \u00e0 pr\u00e9ciser pour finir cet article. Si l’utilisateur ferme la fen\u00eatre du navigateur via le bouton pr\u00e9vu \u00e0 cet effet (la croix rouge g\u00e9n\u00e9ralement en haut \u00e0 droite), la page parente n’est pas recharg\u00e9e. Dans mon cas pratique, cela fait sens car l’utilisateur n’aura alors pas soumit d’image; il n’y a donc aucun raison de rafra\u00eechir la page. Autre point, si l’utilisateur rafra\u00eechit la page fille, cela a pour effet de casser la liaison existante entre les deux pages et le rechargement de la page parente n’aura pas lieux.<\/p>\n Voici donc une mani\u00e8re de rafra\u00eechir une page parente \u00e0 la fermeture de sa page fille en restant dans les fonctionnalit\u00e9s de base du navigateur et des langages. D’autres fa\u00e7ons de faire sont tr\u00e8s certainement possibles (avec des \u00e9v\u00e9nements) et certains framework js seraient \u00e0 m\u00eame de simplifier le probl\u00e8me, en permettant de ne mettre \u00e0 jour dynamiquement qu’une partie de l’interface.<\/p>\n","protected":false},"excerpt":{"rendered":" Derri\u00e8re ce titre alambiqu\u00e9 se cache un besoin particulier que j’ai cherch\u00e9 (et r\u00e9ussi) \u00e0 r\u00e9soudre derni\u00e8rement. La situation est la suivante : un utilisateur arrive sur une page, celle-ci effectue un appel ajax afin de conna\u00eetre l’\u00e9tat d’un param\u00e8tre utilisateur. Pour illustrer, nous dirons donc que la page interroge une api pour r\u00e9pondre \u00e0 … Continuer la lecture de « Rafraichir la page parente \u00e0 la fermeture de la page fille »<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[284,13],"class_list":["post-2169","post","type-post","status-publish","format-standard","hentry","category-code","tag-html","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/2169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2169"}],"version-history":[{"count":3,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/2169\/revisions"}],"predecessor-version":[{"id":2222,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/2169\/revisions\/2222"}],"wp:attachment":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!DOCTYPE html>\r\n<html>\r\n\u00a0 <head>\r\n\u00a0\u00a0\u00a0 <meta charset=\"UTF-8\">\r\n\u00a0 <\/head>\r\n\u00a0 <body>\r\n\u00a0\u00a0\u00a0 <p>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"javascript:ouvrirPageFille();\">cliquez ici<\/a>\r\n\u00a0\u00a0\u00a0 <\/p>\r\n\r\n\u00a0\u00a0\u00a0 <script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 function ouvrirPageFille() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var pageFille = window.open('pageFille.html', 'Titre', 'top=42,left=42,height=800,width=600,scrollbars=yes,status=no,toolbar=yes');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/Recharge la page parente \u00e0 la fermeture de la page fille \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 pageFille.onunload = function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if(pageFille.fermeture) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alert(pageFille.message);\r\n \/\/Rechargement\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 location.reload();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 window.onload = alert('Page charg\u00e9e !');\r\n\u00a0\u00a0\u00a0 <\/script>\r\n\u00a0 <\/body>\r\n<\/html><\/pre>\n<!DOCTYPE html>\r\n<html>\r\n\u00a0 <head>\r\n\u00a0 \u00a0 <meta charset=\"UTF-8\">\r\n\u00a0 <\/head>\r\n\u00a0 <body>\r\n\u00a0 <form>\r\n\u00a0\u00a0\u00a0 <label for=\"message\">Message :<\/label>\r\n\u00a0\u00a0\u00a0 <input id=\"message\" type=\"text\" name=\"message\">\r\n\u00a0\u00a0\u00a0 <input type=\"submit\" value=\"Valider et quitter\" onclick=\"quitterPage();\">\r\n\u00a0\u00a0 <\/form>\r\n\r\n\u00a0 \u00a0<script>\r\n\u00a0\u00a0 \u00a0\u00a0 function quitterPage() {\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0 window.message = document.getElementById('message').value;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0window.fermeture = true;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0window.close();\r\n\u00a0\u00a0 \u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0<\/script>\r\n\u00a0 <\/body>\r\n<\/html><\/pre>\n