CODEWITHSUNDEEP
jqueryhtmlcssajax
chendind
chendind

Reputation: 109

I am using jquery load a new html file, but css doesn't work

<html>
  <head>
  <link rel="stylesheet" type="text/css" href="./css/public.css">
  </head>
  <body>
     <div id="ajaxcont">
        <!-- i will load some.html here by ajax -->
     </div>
     <script>
        $("#ajaxcont").load("some.html");
     </script>
  </body>
</html>

some.html looks like this:

<link rel="stylesheet" type="text/css" href="./css/another.css">
<div>some contents here</div>

But I found that another.css sometimes doesn't work, and the console told me that:

"Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/."

And I want to load different css file for different html page, So I don't want to put those css files into the <head><head> in advance;

Upvotes: 1

Views: 2717

Answers (4)

chendind
chendind

Reputation: 109

finally i found a solution: using

<style>
  @import url('./css/another.css');
</style>

instead of

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

Upvotes: 3

Gary Hayes
Gary Hayes

Reputation: 1788

You need to load the jquery library to make jquery work.

<html>
  <head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/public.css">
  </head>
  <body>
     <div id="ajaxcont">
        <!-- i will load some.html here by ajax -->
     </div>
     <script>
        $("#ajaxcont").load("some.html");
     </script>
  </body>
</html>

Also, the proper way to move up a directory with a relative path is two periods, not one:

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

Upvotes: 2

Manjunath s k
Manjunath s k

Reputation: 38

Check the CSS file has execute permission for the specified path. if you are using linux OS.

Upvotes: 0

The Well
The Well

Reputation: 884

Right click the html document and view its page source, click the url of your stylesheet and check if its there. The url of your css file might be wrong.

Upvotes: 1

Related Questions