Click to load a 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.

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.

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.

If you use an endpoint, you can share code between your components and endpoints by including them in a "macro" file (you can create macros through the endpoints tab in Studio).

If you find that you really need to render a component of some kind (and not an endpoint), we do have these javascript functions you can call to render components dynamically via JavaScript:

/**
 * Renders a component in place.
 *
 * @param componentId (String) The ID of the component to render.
 * @param data (Object) An object literal that can contain key/value pairs that will be passed as parameters to the component.
 * @param ajaxOptions (Object) An object literal that will be used to extend the XHR transport object. The "success" and "error" functions cannot be provided since they are used to render in place.
 * @param clientId (String) ID of element where the component should be rendered. If not specified then document.write will be used to write out the component in the current location of the script tag that contains this directive.
 */
LITHIUM.Components.renderInPlace(componentId, data, ajaxOptions, clientId);

/**
 * Renders a component.
 *
 * @param componentId (String) The ID of the component to render.
 * @param data (Object) An object literal that can contain key/value pairs that will be passed as parameters to the component.
 * @param ajaxOptions (Object) An object literal that will be used to extend the XHR transport object, typically used to define a "success" callback function.
 */
LITHIUM.Components.render(componentId, data, ajaxOptions);

-Doug

Hi, is it possible to 'reload' a custom component with one of the above described functions? I have tried but I do not get it working.
What I want is to rerender a custom component with a different parameter depending on a clicked button in another custom component.
I can build an endpoint but I thought this would be an easier way.

I have tried to run it from the console and from a custom component. Maybe I'm missing an essential AJAX option?
Thanks.

That is interesting Doug.   Is that function supposed to also work with a modal component?   I'm trying to call such a component this way, essentially with this:

$(".item a").click(function(e) {
    var mydata = "Some data to pass";
    var ajaxOptions = {success:console.log('SUCCESS!') };
    LITHIUM.Components.render("MyModalComponent", {data:mydata}, ajaxOptions);
});

When I do I can see the success message in the console when tells me it should work, but the modal window does not open.    The modal component does execute properly in studio when I preview it so that is not the problem.    Any ideas?

You could use that to build a modal widget, but it would be up to you to supply the modal library to feed the markup to -- LITHIUM.Components.render will return markup that you can feed to a modal libary.  We actually have  a special freemarker derictive for loading components in a modal dialog if you are interested in try that out -- see this article for more information about that:

http://community.lithium.com/t5/Developers-Knowledge-Base/Creating-Modal-Dialogs/ta-p/77986

-Doug

Thanks Doug.  I have read that page, but given up trying to use the Lithium modal dialog.   The limitation I found is with the label parameter, which MUST be the name of a text key in Studio.   This would be fine for a simple button or link on a page, but in a dynamically-built video carousel that displays both a thumbnail image and description text for clicking, that won't do.   Even when I tested it that way there were other display issues with the dialog box, so it will be easier to use my own modal library.

Well in that case it sounds like LITHIUM.Components.render might be the right choice for you.  You will need to feed the response of that call into whatever modal library you choose.