How to access html fragment file in another component via source code | Community
Skip to main content
dj_datum
dj_datum
January 13, 2021
Solved

How to access html fragment file in another component via source code

  • January 13, 2021
  • 1 reply
  • 1234 views

Greetings!!

 

I am creating a modal using an hbs template file.  In the modal I want to use an html file as the modal-body.  

 

Both files exist in the ui.apps project.  

 

I have tried div.load() in javascript client-libs as well as data-sly-include and data-sly-resource in the hbs and cannot properly access the html file.  

 

Any suggestions on how to get this connected properly??  

 

Thank you,

 

-Daniel

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 Manjunath_K

Hi @dj_datum ,

You need to include html in handlerbar script tag itself, if you are trying include inside script tag then it will not be evaluated & included as html file. please check below code. 

 

<script id="modal-popup-id" type="text/x-handlebars-template"
        data-sly-include="/apps/{project}/{file location}/modal-popup.html">
</script>

 

Include html file in Modal Popup html:

<div class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title"></h4>
        </div>
        
        <sly data-sly-include="/apps/{project}/{file location}/popup-body.html"/>
    </div>
</div>

 

Hope this helps!

1 reply

Manjunath_K
Manjunath_KAccepted solution
Level 7
January 13, 2021

Hi @dj_datum ,

You need to include html in handlerbar script tag itself, if you are trying include inside script tag then it will not be evaluated & included as html file. please check below code. 

 

<script id="modal-popup-id" type="text/x-handlebars-template"
        data-sly-include="/apps/{project}/{file location}/modal-popup.html">
</script>

 

Include html file in Modal Popup html:

<div class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title"></h4>
        </div>
        
        <sly data-sly-include="/apps/{project}/{file location}/popup-body.html"/>
    </div>
</div>

 

Hope this helps!

    Terms & ConditionsAccessibility statement

    Loading footer...