How to call HTML file from a jquery function in js file?

Question

I am calling HTML file from jquery function using require(). But I am not able to link css with the HTML file. Only plain HTML is displayed after I run the file.

My HTML file:

<head>
    <script src="jquery-3.4.0.js"></script>
</head>

<div class="wdg-uniplick">

        <table class="data-table">
            <tr>
                <th class="col-id" id="id-h">Plick Order</th>
                <th class="col-name" id="name-h">name</th>
                <th class="col-date" id="date-h">Date</th>
                <th class="col-nr-tx" id="nr-tx-h">Nr. Tx</th>
                <th class="col-amount" id="amount-h">Amount</th>
                <th class="col-state" id="state-h">State</th>
                <th class="col-actions"></th>
            </tr>
            <tr id="row-0">
                <td class="col-id" id="id-d0"></td>
                <td class="col-name" id="name-d0"></td>
                <td class="col-date" id="date-d0"></td>
                <td class="col-nr-tx" id="nr-tx-d0"></td>
                <td class="col-amount">
                    <div class="sub-2" id="ccy-d0"></div>
                    <div class="sub-1" id="amount-d0"></div>
                </td>
                <td class="col-state" id="state-d0">-</td>
                <td class="col-actions">
                    <img id="action-icons-d0" src="../img/search-20.svg">
                </td>
            </tr>
        </table>
</div>

My jquery function :

render() : void {
        console.log('in multiLevelSCA');
        let content: string = '';
        this.content = require('../html/multilevelSCA.html');
        let translatedText: string = this.translate('hello');
        content += translatedText;
        this.getDiv().html(content);
    }

And I have a content.css file present.

Syed mohamed aladeen · Accepted Answer · 2019-05-21 05:55:21Z

1

In order to link external css file you need to use the following:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

edited May 21, 2019 at 5:55

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

answered Apr 25, 2019 at 6:18

YK S

3,4705 gold badges30 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syed mohamed aladeen · Accepted Answer · 2019-04-25 06:19:08Z

0

I think you haven't added content.css file in your html file. if you add it you will be able to load the css too

<link rel="stylesheet" type="text/css" href="content.css">

or else you can do it in jquery

$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "content.css"
}).appendTo("head");

answered Apr 25, 2019 at 6:19

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

2 Comments

Shriya Shivankar Over a year ago

let content: string = ''; this.content = require('../html/multilevelSCA.html'); Is this the correct way to call html file from jquery function?

Syed mohamed aladeen Over a year ago

the correct way of loading a html file into a div is $("#content").load("content.html"); for your case you can do like this.getDiv().load('../html/multilevelSCA.html')

Collectives™ on Stack Overflow

How to call HTML file from a jquery function in js file?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related