CODEWITHSUNDEEP
javascriptjqueryhtml
Shriya Shivankar
Shriya Shivankar

Reputation: 1

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

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.

Upvotes: 0

Views: 272

Answers (2)

YK S
YK S

Reputation: 3440

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

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

Upvotes: 1

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

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");

Upvotes: 0

Related Questions