bloggers bloggers

Durante la creazione di un sito con Liferay, ci siamo trovati di fronte ad una necessità che sembrava banale ma poi si è rivelata abbastanza rognosa :

In una pagina, dovevamo mostrare tre tab ed in uno di questi mostrare un iframe di google maps: l'iframe risultava rotto, tranne che nel primo tab.

In pratica, utilizzando il componente TabView di Alloyui ed embeddando dentro un tab (che non sia il primo) un iframe,il componente non riesce a renderizzarlo correttamente.

Di seguito vi mostro un trick per ovviare a questo problema.

Creare inizialmente la struttura html a cui attaccare il componente alloy assegnando un id all' li relativo al tab che conterrà l'iframe

<div id="myTab">
  <ul class="nav nav-tabs">
    <li><a href="#tab-1">Tab #1</a></li>
    <li class="active"><a href="#tab-2">Tab #2</a></li>
    <li><a href="#tab-3" id="li-map">Tab #3 (IFRAME) </a></li>
  </ul>
 
  <div class="tab-content">
    <div id="tab-1" class="tab-pane">
	<p>
           Doloremque beatae rem voluptate nulla perspiciatis 
           atque laudantium nihil impedit molestiae fuga...
        </p>
    </div>
    <div id="tab-2">
	<p>
           Doloremque beatae rem voluptate nulla perspiciatis 
           atque laudantium nihil impedit molestiae fuga...
        </p>
 </div> <div id="tab-3" class="tab-pane"></div> (COME VEDETE é VUOTO) </div> </div>

Creare un div nascosto in cui inserite il codice dell'iframe

<div class="hide" id="div-hidden-map">
    <iframe src="xsdsdsdsdsds" ............. ></iframe>
</div>

Collegare lo script alloy alla nostra struttura html

<aui:script use="aui-base,aui-tabview">
   new A.TabView(
      {
        srcNode: '#myTab'
      }
    ).render();
</aui:script>

Creare una funzione che al click del li relativo al tab contentente l'iframe

vada a copiare il contenuto html dal div nascosto a quello contenuto nella pagina del tab

(finezza, non ricaricarichiamo il contenuto se questo non è vuoto)

<aui:script use="aui-base">
   A.one('#li-map').on('click',
          function (event){
                var selDiv = A.one('#tab-3');
                if(selDiv.text().trim() === ''){ 
                    var a = A.one('#div-hidden-map');
                    selDiv.html(a.html());
                }
           }    
    );
</aui:script>

Il gioco è fatto.

Nell'esempio abbiamo utilizzato un div nascosto perchè noi utilizzavamo una stringa proveniente da un web content di Liferay che era su più righe ed il javascript andava in errore.

Nel caso voi non abbiate questa necessità, non utilizzate il div nascosto ma

valorizzate il div del tab con il codice <iframe src="xxxx".... ></iframe>

Hope this help.

Francesco.