Discussion :

[VinceCBA]

Bonjour à tous,
J'ai un div que j'aimerais rafraichir mais je ne sais pas comment faire.

Je l'ai passé en dijit.layout.ContentPane, et j'ai créé un bouton appelant une fonction JS (Dojo) pour le rafraichir. Mais problème, je remarque que c'est l'ensemble de la page qui est ré affiché dans le div que je viens de rafraichir, et non juste son contenu initial ...
Comment faire?

Mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
function refreshDiv(){
                var toto = dijit.byId("div3");
                var foo = toto.refresh();
            }
 
// D'autres div...
 
<div data-dojo-type="dijit.layout.ContentPane" id="div3" style="border: 1px green solid;">
            un message
        </div>

[cfried]

cherche du coté de dojo.xhrGet ensuite sur le onLoad(content) tu supprimes et recrée ta ContentPane avec ton nouveau content ça devrait marcher

[VinceCBA]

Bonjour,
pourrais tu etre un peu plus précis sur la réalisation de ce que tu proposes stp ?
Merci

[cfried]

Salut,

Je viens de te donner le mode opératoire.

Dans ta fonction refreshDiv() tu fais :

Code :

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

1
2
3
4
5
6
7
8
9
 
xhrGet({
url:"monPhpQuiMeDonneLeContent.php",
onLoad:function(content){
// ici tu fais un dijit.byId('div3').domNode.innerHTML=content
// si ça ne marche pas tu fais un truc du genre destroyRecursive(true) sur ton ContentPane (le booléen te permet de conserver le domNode) et tu recrées ton ContentPane sur celui ci
},
onError://ta fonction de traitement
});

Il faut essayer et réessayer encore. L'API Dojo est ton amie

[VinceCBA]

En fait mon problème est que je ne voudrais pas passer par l'insertion d'un fichier externe (ton "url'), et ne pas "remplacer" le contenu de mon contentPane (via un innerHTML) .. Ouais je sais j'en demande beaucoup

Je ne sais pas si tu connais struts2, mais j'ai par exemple ceci :

Code :

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

1
2
3
<s:div data-dojo-type="dijit.layout.ContentPane">
        <s:property value="variableJava" />
</s:div>

Avec par exemple, au 1er chargement de ma page : variableJava = "toto"
Puis j'appuie sur un bouton qui va faire les actions suivantes :
- Modifier la valeur de "variableJava" en "tutu" (dans ma classe Java), via une Action Struts
- Faire un refresh de mon contentPane (ou un div si on peut le faire avec) => le contenu "pur" (j'entends par la, le code) ne changera pas, mais la partie interprétée, coté client, affichera "tutu" au lieu de "toto".

Je ne sais pas si c'est assez clair comme explication

[cfried]

Si je comprends bien tu veux que le serveur envoie une mise à jour au client spontanément ? De ce que je connais ce n'est pas encore possible mais ça va le devenir avec les socket HTML5 ...

[VinceCBA]

cherche du coté de dojo.xhrGet ensuite sur le onLoad(content) tu supprimes et recrée ta ContentPane avec ton nouveau content ça devrait marcher

J'ai finalement réussi, en utilisant un peu ce principe.
J'ai une jsp principale (index.jsp) dans laquelle je vais inclure mes jsp "filles" en ajax. Et donc si je veux actualiser l'une d'entre elle, je détruits tous les widgets qu'elle contient :

Code :

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

1
2
3
4
5
function destroyWidgets(div){
    dojo.forEach(dijit.findWidgets(dojo.byId(div)), function(w) {
        w.destroyRecursive();
    });
}

Puis je charge ma page via XHRget:

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
function populateDiv(method, url, handleAs, divId, contentId, isHtmlReturned){
dojo.xhr(method,{
            url: url, 
            handleAs : handleAs,
            preventCache: true,
            content:{Id:contentId},
            timeout: 20000,
            load: function(newContent) {
                dojo.byId(divId).innerHTML = newContent;
                dojo.parser.parse(divId); // Permet de garder Dojo
            },
            error: function(response, args) {
                var errNum = args.xhr.status; // On récupère le numéro d'erreur
                dojo.byId(divId).innerHTML=response;
 
                switch (errNum) {
                    case 404:
                        message = "The requested page was not found";
                        break;
                    case 500:
                        message = "The server reported an error.";
                        break;
                    case 407:
                        message = "You need to authenticate with a proxy.";
                        break;
                    default:
                        message = "Unknown error. : ";
                }
            }
        },isHtmlReturned);
}

Et le tour est joué

[cfried]

Oui je pense que c'était le plus évident bien joué