Forum Discussion

PerBonomi's avatar
PerBonomi
Boss
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?
DougS's avatar
DougS
Khoros Oracle

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

rwm's avatar
rwm
Advisor
10 years ago

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?