Loading other html file within a div doesn't use the CSS of current file

Question

I have a code like this:

  <div class="bg-faded text-center p-1 h-50" id="content">
  <div class="container">
  <div class="row py-4 my-2">
    <div class="col-md-3">
      <h3 class="">Simplicity</h3>
      <p class="lead">Just set the bot up and run it, the rest will be done for you!</p>
    </div>
    <div class="col-md-3">
      <h3 class="">No risk of ban</h3>
      <p class="lead">The bot doesn't use any kind of injection, thus the chances of getting banned are almost non-existent!<br></p>
    </div>
    <div class="col-md-3">
      <h3 class="">Time</h3>
      <p class="lead">A single bot takes about a week to get the account to level 30!</p>
    </div>
    <div class="col-md-3">
      <h3 class="">Limitless</h3>
      <p class="lead">You can run as many bots as you want!</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <h3 class="">Performance</h3>
      <p class="lead">The bot itself uses about 20 MB RAM, so it doesn't overload your computer!</p>
    </div>
    <div class="col-md-3">
      <h3 class="">Updates</h3>
      <p class="lead">The application is gets constantly updated, thus works with the latest patches!</p>
    </div>
    <div class="col-md-3">
      <h3 class="">Resolutions</h3>
      <p class="lead">It works on every single resolution higher than 1024x546!</p>
    </div>
    <div class="col-md-3">
      <h3 class="">Regions support</h3>
      <p class="lead">It supports every single region, all you need to do is changing the language to English!</p>
    </div>
  </div>
  <div class="col-md-12"><a href="#" class="btn btn-primary btn-block text-center text-uppercase" data-toggle="">Purchase now!</a></div>
  </div>

'

and it works properly, but when I load other html file in the "content", the file doesn't use the css etc. included in index.html

Here's the including code:

  <script>
  function load_purchase() {
     document.getElementById("content").innerHTML='<object type="text/html" data="purchase.html" ></object>';
    }
  </script>

and this is the "purchase.html":

  <div class="container">
  <div class="col-md-12"><a href="#" class="btn btn-primary btn-block text-center text-uppercase" data-toggle="">Test</a></div>
  </div>

It doesn't use the css file, so it's just showing text "Test" without any styles.

What am I doing wrong?

Community · Accepted Answer · 2017-05-23 12:18:10Z

1

object elements are like iframes, they don't inherit styling or similar from their parent.

If you want purchase.html to be part of the document, including being styled by its stylesheets, etc., you'll want to load it via ajax and then assign the HTML directly to innerHTML on #content.

E.g., roughly:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("content").innerHTML = xhr.responseText;
    }
};
xhr.open("GET", "purchase.html");

Apologies, since you weren't using jQuery in your code, I didn't realize you were using jQuery until I saw the tag later. jQuery has a load function for this, as called out by Super User:

$("#content").load("purchase.html");

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered May 8, 2017 at 11:07

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

8 Comments

P Sawicki Over a year ago

yeah I tried using the jquery load but it wouldn't work at all I have no idea why

T.J. Crowder Over a year ago

@PSawicki: Well, you don't have to use jQuery if this is your only reason for using it, see my first codeblock for (roughly) the same thing using the DOM directly.

P Sawicki Over a year ago

Thank you for the code, but I'd like to use jQuery as it looks much simplier. However, it doesn't work, do you have any idea why? Here's the code: pastebin.com/jN35eWud Am I doing something wrong ?

T.J. Crowder Over a year ago

@PSawicki: Yes: You have invisible characters in your jquery path (in the jquery.min.js part, delete all of it and type it back in again). Look in your web console, the errors will show up. (The web console is the first place to look when things don't work.) If you fix the path, that code works.

P Sawicki Over a year ago

What is the web console?

|

Super User · Accepted Answer · 2017-05-08 11:08:04Z

0

Instead of object you can use jQuery .load() function

$("#content").load("purchase.html");

For detail you can check jquery .load()

answered May 8, 2017 at 11:08

Super User

9,6623 gold badges34 silver badges48 bronze badges

11 Comments

P Sawicki Over a year ago

i tried using it but for some reason I couldn't get it working at all.

Super User Over a year ago

@P Sawicki if you are not using jQuery then remove jQuery tag from your question, we are giving you the right solution. Please include jQuery library first then use this code. it will definitely work.

P Sawicki Over a year ago

P Sawicki Over a year ago

Should I put it on <head>?

Super User Over a year ago

check your developer option for any error, i think you have written wrong path for jquery it should be <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min‌‌.js">

|

Collectives™ on Stack Overflow

Loading other html file within a div doesn't use the CSS of current file

2 Answers 2

8 Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related