Le Cadre de tuiles : actualiser uniquement le corps de la

nous avons une page de disposition de Tuiles ayant en-Tête, Menu, Corps et Pied de page. Cette mise en page à chaque fois que l'utilisateur effectue une action dans le Menu listes, toute la Mise en page (y Compris l'en-Tête, menu et pied de page) est rafraîchissant. Je veux l'en-tête,menu, pied de page statique, et la seule partie du corps doit être à jour.

Est-il un moyen pour empêcher l'actualisation de l'en-Tête, le menu et le Pied de page mise à jour uniquement le contenu du Corps sur le menu, cliquez sur ce qui peut être mis en œuvre en utilisant des Tuiles?

Si votre préoccupation est de ne recevoir le corps de votre tuile sur le serveur, je crois que ce n'est pas possible en utilisant uniquement des tuiles. Vous pouvez accomplir cela avec des appels ajax...
ok..les appels ajax avec des tuiles, mais comment procéder?

OriginalL'auteur Ashish Kataria | 2012-06-14

struts tiles

7

Pour ce faire, vous devez utiliser les appels ajax. La procédure générale serait:

1.- De créer et de définir une tuile qui sera votre base, composé avec votre en-tête, corps et pied de page, qui ressemblera à ceci:
```
<div id='headerTile'>whatever goes here...</div> 
<div id='bodyTile'>whatever goes here....</div>  
<div id='footerTile'>whatever goes here...</div>  
```
examinons chacun de ces divs à une tuile de votre définition:
```
<definition name="layoutBase" path="/whateverPathItIs/layoutBase.jsp">
    <put name="header" value="/whateverPathItIs/baseHeader.jsp"/>
<put name="body" value="/whateverPathItIs/baseBody.jsp" />
<put name="footer" value="/whateverPathItIs/baseFooter.jsp" />         
</definition>
```
2.- De créer et de définir les différentes jsp qui va remplacer votre corps contenu, n'oubliez pas que ce jsp doit contenir que les éléments du corps. Disons que vous avez 2 autres corps de contenu prêt à être montré dans votre page, chacune fera l'objet d'une tuile:
```
<div id='bodyContent1'>whatever goes here again...</div> 

<div id='bodyContent2'>whatever goes here again 2</div> 
```
3.- À ce stade, vous avez à la fois la base de jsp de tuiles et de 2 autres jsp qui contient le contenu du corps. Maintenant nous avons besoin d'une action struts qui agira en tant que service, en retournant le corps correspondante en fonction de la requête ajax. Cela comme une action normale, et à la cartographie.findForward méthode en fin de compte, le retour de la jsp qui contient votre corps. Vous pouvez soit créer une action pour chaque corps d'un contenu ou d'un seul DispatchAction qui contient une méthode pour chaque corps.La deuxième option est plus propre, et l'action est définie comme ceci:
```
<action path="/bodySwitcher" 
        type="BodySwitcherAction"
        parameter="method"
        scope="request"
        >
    <forward name="content1" path="/pathToJsp/content1.jsp"/>
    <forward name="content2" path="/pathToJsp/content2.jsp"/>
</action>
```
4.- Pour changer le contenu, l'utilisation de javascript ou jquery pour faire un appel ajax et charge le retour de l'jsp dans votre corps. Ceci est un exemple de la méthode qui permettrait de basculer le contenu en jQuery, à l'aide de .load() comme un appel ajax:
```
function switchContent(whichContent){
     $('#bodyTile').children().remove();
     $('#bodyTile').load("/pathToYourApp/bodySwitcher.do?method="+whichContent);
}
```
Ne soyez pas découragés par combien de temps la réponse est, je suis juste essayer d'expliquer proprement. C'est en fait assez facile à faire, et la question est plus jquery/javascript liés qu'autre chose, le seul détail est de savoir comment utiliser un struts action en tant que service. Bonne chance.

merci pour l'expliquer, si proprement, pouvez-vous me donner un exemple de code pour cela.. il m'aiderait à mieux comprendre.
N'est-ce pas assez?
$('#bodyTile').la charge de travail pour firefox, mais pas pour Internet Explorer..
c'est une autre question 🙂 vous pouvez essayer d'utiliser une normale $.appel ajax, j'ai utilisé la méthode de chargement, parce que c'est plus simple. Il y a beaucoup de questions dans la expliquant comment faire un appel ajax, de faire quelques recherches et vous serez sur votre chemin.
merci..une chose que je voudrais savoir, en utilisant les iframes peuvent également atteindre cet.. va avec des appels ajax, serait-il un certain avantage sur les iframes?

OriginalL'auteur Th0rndike
1

Je n'ai comme l'Th0rndike et travailler comme un charme. Je suis à l'aide du printemps et de l'été un peu différents, mais avec la même idée.

Dans ma configuration, en utilisant des tuiles à résoudre en utilisant seulement les points de vue, je ne pouvais pas faire avant de le nouveau corps à l'aide du fichier jsp directement, par exemple, à l'aide de path = "/pathToJsp/content1.jsp".

Utilisant la configuration par défaut du ressort de la documentation pour vos vignettes dans le fichier layouts.xml ajouter au delà du modèle existant, le nouveau modèle qui sera responsable de l'contenant le nouveau corps à chaque fois la requête Ajax est faite.
```
<definition name="bodySwitcher" template="/WEB-INF/layouts/bodySwitcher.jspx">
<put-attribute name="bodyContent" value="" />
</Definition>
```
Définir le modèle du fichier:
```
<div xmlns: jsp = "http://java.sun.com/JSP/Page"
xmlns: c = "http://java.sun.com/jsp/jstl/core"
xmlns: tiles = "http://tiles.apache.org/tags-tiles"
xmlns: spring = "http://www.springframework.org/tags"
xmlns: util = "urn: jsptagdir :/WEB-INF/tags/util" id = "bodySwitcher"
version = "2.0">

<tiles:insertAttribute name="bodyContent" />

</div>
```
Dans le fichier views.xml définir le contenu de chaque lien de charger le nouveau corps de votre page en particulier:
```
<definition name="link1" extends="bodySwitcher">
<put-attribute name="bodyContent" value="/WEB-INF/views/link1.jspx" />
</Definition>

<definition name="aboutus" extends="bodySwitcher">
<put-attribute name="bodyContent" value="/WEB-INF/views/aboutus.jspx" />
</Definition>
```
La requête Ajax peut être fait dans le template principal:
```
$ (Document). ready (function () {

$ ('. PageAction'). click (function (e) {
LoadPage (e)
});

function LoadPage (e) {
e.preventDefault ();
console.log (e)
console.log (e.currentTarget.pathname);
$ ('# BodySwitcher'). children (). remove ();
$ ('# BodySwitcher'.) Load ("bodySwitcher? Method =" + e.currentTarget.pathname);
}

});
```
La requête ajax peut être manipulé à l'aide le contrôleur de l'avant à la vue spécifiée dans le paramètre méthode de bodySwitcher. De retour à l'avant de la chaîne comme "avant:" + link1 à l'avant de contrôleur de la poignée link1 demandes;

OriginalL'auteur thalespf

Vous devez vous connecter pour publier un commentaire.