How to load component after an API call is completed? | Community
Skip to main content
R
rakesh_h2
Level 3
August 13, 2023
Solved

How to load component after an API call is completed?

  • August 13, 2023
  • 2 replies
  • 1100 views

Hi,

I have a component and a clientlib for the same. When the component loads, I want to call an ajax API call in the js file (in clientlib) and wait for the result.

 

1. After the result is obtained, I want to load the component (i.e. execute the html file). How can I achieve this?

2. I will have the API result in clientlib js file. How can I access the same inside HTL of that component?

Please help.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Saravanan_Dharmaraj

@rakesh_h2 By default hide the component div using css "display:none" and from the javascript xhr call onSuccess method set , manipulate the div and show. If the xhr fails, display the div accordingly.

Please check the Simple Ajax example given here using html template to populate the component div.

https://www.endyourif.com/jquery-creating-templates-for-your-html-content/#google_vignette 

2 replies

Saravanan_Dharmaraj
Community Advisor
Saravanan_DharmarajCommunity AdvisorAccepted solution
Community Advisor
August 14, 2023

@rakesh_h2 By default hide the component div using css "display:none" and from the javascript xhr call onSuccess method set , manipulate the div and show. If the xhr fails, display the div accordingly.

Please check the Simple Ajax example given here using html template to populate the component div.

https://www.endyourif.com/jquery-creating-templates-for-your-html-content/#google_vignette 

    mahi1729
    mahi1729
    Level 4
    August 14, 2023

    Well in its original form of HTL its not possible, as HTL is server side and ajax call is client side. However, similar to what @saravanan_dharmaraj suggested, you can probably have a default markup with hidden attributes to be sent to client side in the initial load, and once ajax call is executed, the same markup can be re-processed with data obtained. I suggest using handlebars, as its one of the most popular templating languages and gives you more control. Or any other templating language that can be used on client side should be fine. Hope this helps. Thanks

      Terms & ConditionsAccessibility statement

      Loading footer...