Alloy UI Tabeview doesn't work on multiple web contents

[Bruno Lima，修改在7 年前。]

Hello,

I'm facing a strange behavior with the Alloy UI Tableview inside a custom web content template: When I instantiate two web content portlet using the same custom template, only the first works as a expected! The second one doesn't change tabs like the first.

Here's my custom web content template:

<script>

AUI().use(
  'aui-tabview',
  function(Y) {
    new Y.TabView(
      {
        srcNode: '#myTab'
      }
    ).render();
  }
);
</script>




	<ul class="nav nav-tabs">
		<li class="active"><a href="#$tab1">Em Andamento </a></li>
		<li><a href="#$tab2">Concluídos </a></li>

	</ul>

	<div class="tab-content">
		<div id="$tab1" class="tab-pane">

			<table class="table table-striped">
				<tbody><tr>
					<td>Nr. OS</td>
					<td>Escopo</td>
					<td>Tipo</td>
					<td>Status</td>
					<td>Data Início</td>
					<td>Data Conclusão</td>
					<td>Tamanho (PF)</td>
					<td>Acompanhamento</td>
				</tr>

				#if (!$Nr_OS.getSiblings().isEmpty()) 
				    #foreach ($cur_Nr_OS in $Nr_OS.getSiblings()) 
				        #if($cur_Nr_OS.Status.getData() != "Concluida")

				<tr>
					<td>$cur_Nr_OS.getData()</td>
					<td>$cur_Nr_OS.Escopo.getData()</td>
					<td>$cur_Nr_OS.Tipo.getData()</td>
					<td>$cur_Nr_OS.Status.getData()</td>
					<td>$dateUtil.getDate($dateUtil.newDate($getterUtil.getLong($cur_Nr_OS.Dt_Inicio.getData())),
						" dd/MMM/yyyy ", $locale)</td>
					<td>$dateUtil.getDate($dateUtil.newDate($getterUtil.getLong($cur_Nr_OS.Dt_Conclusao.getData())),
						" dd/MMM/yyyy ", $locale)</td>
					<td>$cur_Nr_OS.Tamanho_PF.getData()</td>
					<td>$cur_Nr_OS.Acompanhamento.getData()</td>
				</tr>
				        #end 
				    #end 
				#end

			</tbody></table>


		</div>

		<div id="$tab2">

			<table class="table table-striped">
				<tbody><tr>
					<td>Nr. OS</td>
					<td>Escopo</td>
					<td>Tipo</td>
					<td>Status</td>
					<td>Data Início</td>
					<td>Data Conclusão</td>
					<td>Tamanho (PF)</td>
					<td>Acompanhamento</td>
				</tr>

				#if (!$Nr_OS.getSiblings().isEmpty()) 
				    #foreach ($cur_Nr_OS in $Nr_OS.getSiblings()) 
				        #if($cur_Nr_OS.Status.getData() == "Concluida")

				<tr>
					<td>$cur_Nr_OS.getData()</td>
					<td>$cur_Nr_OS.Escopo.getData()</td>
					<td>$cur_Nr_OS.Tipo.getData()</td>
					<td>$cur_Nr_OS.Status.getData()</td>
					<td>$dateUtil.getDate($dateUtil.newDate($getterUtil.getLong($cur_Nr_OS.Dt_Inicio.getData())),
						" dd/MMM/yyyy ", $locale)</td>
					<td>$dateUtil.getDate($dateUtil.newDate($getterUtil.getLong($cur_Nr_OS.Dt_Conclusao.getData())),
						" dd/MMM/yyyy ", $locale)</td>
					<td>$cur_Nr_OS.Tamanho_PF.getData()</td>
					<td>$cur_Nr_OS.Acompanhamento.getData()</td>
				</tr>
				        #end 
				    #end 
				#end

			</tbody></table>

		</div>
		
	</div>

Thank you all

[Víctor Ponz，修改在7 年前。]

You can not have two div's with the same id. So, try to use a random id for each tableview

Hope it helps

[Bruno Lima，修改在7 年前。]

I've put some random numbers but I forgot the Id inside AUI script!
$mathTool.random(1,20) worked fine for me because $mathTool.getRandom() returns a float value and a " . " inside a div id is not allowed.

<script>

AUI().use(
  'aui-tabview',
  function(Y) {
    new Y.TabView(
      {
        srcNode: '#$masterTab'
      }
    ).render();
  }
);
</script>




...