2013-02-21 3 views
0

J'ai essayé d'écrire un site Web dans lequel toute la navigation est traitée en cachant et en montrant des divs. Je crois comprendre que cette méthode est appelée Single Page Interface. Cela a fonctionné pour des conceptions simples dans le passé mais ma tâche actuelle commence à devenir très gênante en utilisant cette méthode. Comment est-ce que je pourrais répliquer le même comportement mais au lieu de cacher et montrer des divs je peux juste avoir un conteneur principal div qui est alors rempli avec le code html désiré du serveur?page JSP avec html dynamique

Exemple:

<script> 
    $("#button").onclick(function() { 
     $("#a").show(); 
     $("#b").hide(); 
    }); 
</script> 

<html> 
    <body> 
     <div id="a" style="display:none;">A: SOME HTML</div> 
     <div id="b" style="display:block;">B: SOME HTML</div> 
     <button id="button">Change to A</button> 
    </body> 
</html> 

(noter que ceci est un exemple très difficile de je suis blanc essayant de le faire)

Mais je voudrais le contenu d'un conteneur div pour passer de « B » à "A" via certains jsp

Quelqu'un pourrait-il pointer dans la bonne direction?

plus Explication:

Peut-être que je peux clarifier un peu mieux. Ainsi, lorsque l'utilisateur charge la page, une section contenant une table de tous les fichiers existants dans une base de données s'affiche. L'utilisateur peut sélectionner un fichier de la liste de base de données à renommer ou à copier. Si l'utilisateur souhaite renommer un fichier, par exemple, il se présentera avec un nouvel affichage (tous dans le même "onglet") qui aura un ensemble de champs remplis pour le fichier qu'ils auront sélectionné et un ensemble de champs vides dans lequel ils peuvent spécifier le nouveau nom de fichier. Actuellement, ce changement d'affichage est géré en affichant et en masquant les divs, mais je voudrais récupérer le code HTML que je veux afficher depuis le serveur et le présenter. Fondamentalement mimant la dissimulation et la projection de divs.

+0

à comprendre mieux - ne signifie u éléments à onglets - par exemple: http://jqueryui.com/tabs/ – user1428716

+0

Eh bien l'interface que j'essaie de développer implique des éléments à onglets . Mais dans chaque onglet il y a différentes tâches différentes que l'on pourrait accomplir. Par exemple, sous un onglet, un utilisateur peut télécharger, renommer ou copier un fichier. Sous un autre onglet on pourrait éditer divers paramètres etc. Mais les onglets ne sont pas le problème, c'est le contenu dans chaque onglet. –

Répondre

0

Comme il est pas tout à fait clair pour moi ce que vous essayez de faire, je vais vous donner quelques options:

  1. voir
  2. Remplacer
  3. le contenu d'un élément sur votre page Puisque vous utilisez une page JSP, vous pouvez utiliser la logique côté serveur pour afficher certains fragments
  4. vous utilisez une page JSP, utiliser pour rendre un contenu côté serveur

annonce 1:

(en supposant jQuery) $('body').load('serverSide.html'); voir http://api.jquery.com/load/

Ad 2:

<% if ("a".equals(request.getParameter("aOrB"))) { %> 
<jsp:include page="/a.jspf"> 
<% } else { %> 
<jsp:include page="/b.jspf"> 
<% } %} 

Ad 3:

<%= request.getAttribute('content') %> 

Hope qui aide

+0

Donc disons que j'ai un morceau de html que je souhaite afficher dans un div stocké sur le serveur. Puis-je spécifier $ ("# targetDiv"). Load ("desired.html"); et avoir le html de "desired.html" affiché dans "targetDiv" tous formatés et autres joyeusetés? –

+0

oui, voir http://jsbin.com/ayukof/1/edit – Friso

+0

MERCI! Cela fonctionne très bien.Ceci combiné avec history.pushstate() est exactement ce que j'ai cherché. –