1 Reply Latest reply on Jun 20, 2016 4:25 AM by nilay.nath

    Need help on Campaign/Teaser afterload initialization

    nilay.nath

      Hi All,

       

      I'm facing two issues while doing a poc on Campaign experience in CQ5.6.1.

       

      My CQ POC app uses jQuery version 1.8.3 ( but CQ5 has default 1.8.1 version) and clientlibrary includes other JS library like flexslider, jquery-ui, etc. And becomes/bundled in a single JS file named "poc-app.js".

       

      I have created a Campaign with 3 teaser page (option-a, option-b and option-c). Each teaser page contains same component but for different purpose based on the option. Teaser pages are assigned to their respective segments.

       

      ---------Component code---------

      <%@include file="/libs/foundation/global.jsp"%>

      <div>

        <input type="text" id="input-box" name="search" placeholder="<%=properties.get("placeholder","First Name")%>" >

      </div>

      <script type="text/javascript">

        initializeAndBindEvent();  //initialize and bind with event

      </script>

      ----------------------------

       

      Now I have included that campaign to my page in a teaser container. By default option-a teaser is currently displayed.

       

       

      Problem#1: My input field is not getting initialized or binded with any event [through 'initializeAndBindEvent()'] after rendering. I found that, when that teaser content (option-a/option-b/option-c) is getting embedded in that page, "<script>" section is missing or getting removed somehow. Is there any way (afterload or something), I can initialize & bind my field with events?

       

      Problem#2: My "poc-app.js" file is getting loaded in the head section properly. Due to teaser container following JS files are also loaded but strangely all those features and available functionalities/methods (from "poc-app.js" file) are now showing as undefined or not-reachable. I tested this in publisher also but same behavior. Anything wrong am I doing? When I remove teaser container, functionality works fine.

       

      /etc/clientlibs/granite/jquery.js (version 1.8.1)

      /etc/clientlibs/granite/utils.js

      /etc/clientlibs/granite/jquery/granite.js

      /etc/clientlibs/foundation/jquery.js

      /etc/clientlibs/foundation/shared.js

      /etc/clientlibs/granite/underscore.js

      /etc/clientlibs/foundation/personalization/kernel.js

       

       

      Please help me to solve these issues. Thanks in advance.