Forum Discussion

darrenSP's avatar
darrenSP
Mentor
8 years ago

Passing a variable from one component to another in the same quilt

Hi,   I have a quilt that has for example 2 components.   One component has a dropdown which changes the value of a variable. I want to pass this variable from this component into another compone...
  • TariqHussain's avatar
    8 years ago

    darrenSP- This is not possible in freemarker as it is server side language, you can't update the freemareker variable value or pass it to next component on run time.  This is only possible using JS.

     

  • ClaudiusH's avatar
    8 years ago

    Hi darrenSP

     

    The way I approached that in a similar scenario was working with an endpoint returning the innerHTML and JavaScript to update the component. This should be scalable to work in your scenario with two components.

     

    My scenario was a list of unread messages on a board which included a drop down menu to select a different board. I created two components and one endpoint:

    1. Widget component: This was not included in the quilt, but called from both the frontend component to return the board's message list in its initial content and called from the endpoint subsequently to list the messages of the new board.
    2. Frontend component: This was included in the actual page quilt and included the JavaScript to listen to changes in the dropdown, perform the AJAX call to the endpoint and then completely replace the existing component HTML:
      $('.custom-openresponse-component .lia-panel-content-wrapper').html($(dataToInject).html());
    3. Endpoint: Let me share the full code sample of that so you see how simple it is to pass parameters when calling the endpoint:
      <#assign nodeId = http.request.parameters.name.get("nodeid","") />
      <#assign nodeType = http.request.parameters.name.get("nodetype","") />
      <#if nodeId?has_content && nodeType?has_content >
      	<@component id="custom-openresponse-widget-boardinfo" nodeid=nodeId nodetype=nodeType />
      </#if>

    In your situation if both of your frontend components are always updated at the same time then you create one endpoint which returns the HTML for both components at once to reduce the number of calls and waiting time.