Forum Discussion

PerBonomi's avatar
11 years ago

Click to load a component

Hello. I was just wondering.. if I'm on a custom page, displaying,say, customcomponent1, is it possible to click a link and swap out that component with a different custom component?

  • PerBonomi - Absolutely, it is possible, you'd need some javascript code to do this for you. e.g. 

     

    Custom Component 1
    
    <div class="custom_comp1">
           //your links which will swap the component goes here
       <a href="#" class="swap_link">Click to swap</a>
          // the jQuery code goes here, which will swap the content from CC2 on click of the link. You can include the CC2 on the same page              here and keep it hidden, and on click of the link in CC1, hide the CC1 and show CC2.
           <script>   
                $('.custom_comp1 .swap_link').click(function(){
                    $('.custom_comp2').show();
                    $('.custom_comp1').hide();
               });
             </script>
    </div>
    
    Custom Component 2
    <div class="custom_comp2" style="display:none;">
           //CC2 content goes here
    </div>

     

     

    I hope this helps.

     

    • PerBonomi's avatar
      PerBonomi
      Boss

      Thanks for that. Usually that would be a good way to do it.

      My "problem" is that the second custom component in question uses a freemarker macro to do a large api call and I don't want to do that call unless I specifically load the second component.

      • VarunGrazitti's avatar
        VarunGrazitti
        Boss

        PerBonomi - In that case, you can create an Endpoint instead of your CC2, and make an ajax call to that endpoint from CC1. This would load the content on click rather than show/hide and would save your API call unless the user clicks.