ColdFusion.navigate alternative?

Question

Dans une autre question, "Utiliser Google Map avec ColdFusion", j'ai rencontré un problème de ne pas pouvoir afficher une carte google en utilisant CF. Après de nombreuses expériences, j'ai découvert que si vous utilisez ColdFusion.navigate pour pointer vers une page d'une zone cflayout vers une autre zone cflayout, la carte dans la zone de destination cflayout ne s'afficherait pas. (Cependant, si vous exécutez simplement la page, à la fois par elle-même ou à l'intérieur de la destination cflayoutarea, la carte s'affichera)

Alors ma question est maintenant: existe-t-il une approche alternative où je n'ai pas besoin d'utiliser coldfusion.navigate pour naviguer d'un cflayoutarea à un autre?

Answer 1

Votre anglais est pas terrible, donc je vais paraphraser à une question qui fait sens (pour moi) et répondre à cette question ...

Il semble que vous avez 2 CFLayoutArea « s, et vous voulez avoir un lien (ou un bouton, etc) dans l'un d'entre eux qui va changer le contenu de l'autre.

Si vous éliminez ColdFusion.navigate en option, alors il me semble que vous allez devoir essayer une des quelques autres options qui sont fondamentalement la même chose. J'aime jQuery. Si vous n'aimez pas jQuery, vous pouvez utiliser une autre bibliothèque ou lancer votre propre solution, mais tous feront le même travail.

Depuis ce code:

<cflayout name="foo" type="hbox"> 
    <cflayoutarea name="nav">nav</cflayoutarea> 
    <cflayoutarea name="content">content</cflayoutarea> 
</cflayout> 

génère ce HTML:

<div id="foo"> 
    <div id="nav" style="overflow:auto;float:left;"> 
     nav 
    </div> 
    <div id="content" style="overflow:auto;float:left;"> 
     content 
    </div> 
</div> 

Vous pouvez utiliser l'attribut ID du contenu DIV, avec jQuery, de modifier son contenu:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#goLink").click(function(e){ 
      $("#content").load("content.cfm"); 
      e.preventDefault(); 
     }); 
    }); 
</script> 
<cflayout name="foo" type="hbox"> 
    <cflayoutarea name="nav"><a href="#" id="goLink">go</a></cflayoutarea> 
    <cflayoutarea name="content">content</cflayoutarea> 
</cflayout>