CQ5: Не удалось редактировать текстовый компонент CQ5 в скрытом контейнере

Question

Мы разрабатываем компонент вкладки в формате CQ5/AEM. Компонент содержит 3 вкладки, и на каждой вкладке есть один текстовый компонент CQ5 для редактирования контента.

Но только текстовый компонент первой вкладки доступен для редактирования, как показано по умолчанию. Другие текстовые компоненты, находящиеся в области содержимого скрытых вкладок, недоступны для редактирования.

Пример кода:

<div> 
<div> 
    <div id="tabcnt1"> 
     <div id="tab1" class="tablink">Tab 1</div> 
    </div> 
    <div id="tabcnt2"> 
     <div id="tab2" class="tablink">Tab 2</div> 
    </div> 
    <div id="tabcnt3"> 
     <div id="tab3" class="tablink">Tab 3</div> 
    </div> 
</div> 
<div class="plantabcontent">   
    <div id="plancontenttab1" class="plancontent"> 
     <cq:include path="plandescription1" resourceType="libs/foundation/components/text" /> 
    </div> 
    <div id="plancontenttab2" class="plancontent" style="display:none;"> 
     <cq:include path="plandescription2" resourceType="libs/foundation/components/text" /> 
    </div> 
    <div id="plancontenttab3" class="plancontent" style="display:none;"> 
     <cq:include path="plandescription3" resourceType="libs/foundation/components/text" /> 
    </div> 
</div> 

Сценарий:

$(document).ready(function(){ 

    $('.tablink').click(function(){ 
    $(".tablink").removeClass('selecttab').addClass('plantxt'); 

    var tabid = $(this).attr("id"); 
    $("#"+tabid).addClass('selecttab').removeClass('plantxt'); 

    $(".plancontent").hide(); 
    $("#plancontent"+tabid).show(); 
    }); 
}); 

'plandescription1' видна по умолчанию, и он работает нормально. Но скрытые текстовые компоненты не работают, позволяя им изменять вкладки.

Просьба показать мне немного света. Заранее спасибо.

Answer 1

При загрузке страницы важно загрузить компоненты вкладки (текстовый компонент). Если компоненты по умолчанию отключены, компоненты не инициализируются AEM. Поэтому отключите «скрытые» вкладки на document.ready, вместо того, чтобы использовать стиль = «display: none».

В примере я добавил $ ("div.plancontent: not (: first)"). Hide();, чтобы отключить все вкладки, кроме первого.

Пример:

<div> 
    <div> 
     <div id="tab1" class="tablink">Tab 1</div> 
     <div id="plancontenttab1" class="plancontent"> 
      <cq:include path="plandescription1" resourceType="/libs/foundation/components/text" /> 
     </div> 
    </div> 
    <div> 
     <div id="tab2" class="tablink">Tab 2</div> 
     <div id="plancontenttab2" class="plancontent"> 
      <cq:include path="plandescription2" resourceType="/libs/foundation/components/text" /> 
     </div> 
    </div> 
    <div > 
     <div id="tab3" class="tablink">Tab 3</div> 
     <div id="plancontenttab3" class="plancontent"> 
      <cq:include path="plandescription3" resourceType="/libs/foundation/components/text" /> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 

    $(document).ready(function(){ 
     //Disable all tabs except first 
     $("div.plancontent:not(:first)").hide(); 

     //Set clickevent 
     $('.tablink').click(function(){ 

      $(".tablink").removeClass('selecttab').addClass('plantxt'); 
      var tabid = $(this).attr("id"); 
      $("#"+tabid).addClass('selecttab').removeClass('plantxt'); 

      $(".plancontent").hide(); 
      $("#plancontent"+tabid).show(); 
     }); 
}); 
</script>