0

This is the code I have written so far.

HTML:

<h1>Test Message</h1>

Default CSS: 

h1{
   font-size: 24px;
}

Jquery: 

$(document).ready(function(req, res){
    $.ajax({
        url:"example.com/test.css",
        type : "GET",
        crossDomain: true,
        contentType: "text/plain",
        dataType:"script",
        success:function(data){
             $("<style></style>").appendTo("head").html(data);
             //loading complete code here
    }
});  });

Test.css (uploaded to my domain)

h1 {
    font-size: 36px;
}

Now I am trying to fetch test.css from my domain and override its styles with the default one. I can't get ahead of it because it's giving me an error "Unexpected error { " in test.css. Now how do I resolve this error and override the code?

V.Spock
  • 555
  • 2
  • 5
  • 11
  • Using AJAX is not the correct way to update CSS rules. If you want to override rules, just add your own stylesheet in the page with rules of a higher specificity – Rory McCrossan Jan 08 '18 at 16:38
  • https://stackoverflow.com/questions/805384/how-to-apply-inline-and-or-external-css-loaded-dynamically-with-jquery Refer this.. – John Rajan Jan 08 '18 at 16:45

1 Answers1

0

datatype is using to tell the type of data that you're expecting back from the server (Documentation). In your case, you tell that it is sript, so javascript is trying to interpret the server response as script, when in your case you are using it as text as you are including it in your DOM, from scratch.

Using :

 dataType:"text",

will solve your problem.

Please note that your navigator won't use necesseraly the rule from your download CSS: can resolve conflits reading this article or this

Stéphane Ammar
  • 1,454
  • 10
  • 17
  • Hi. Thanks for the answer. But now it gives me an error " No 'Access-Control-Allow-Origin' header is present on the requested resource".What is it and how do I resolve it? – V.Spock Jan 08 '18 at 18:39