Learn the process of applying dynamically loaded inline and external CSS using jQuery

I have a unique situation where I am using an Ajax control within a Yahoo popup that is being loaded with jQuery.

My approach involves making a simple .get request to load the HTML content.

  $.get(contentUrl, null, function(response) {
         $('#dialog').find('.bd').assertOne().html(response);
     }, "waitDlg");

The issue arises when the loaded content requires its own CSS which is generated dynamically. I am faced with the decision of either inline styling or incorporating an external CSS stylesheet.

Upon testing in Chrome, it becomes evident that the CSS introduced via AJAX is not being evaluated/applied when inserted into the DOM through the above code.

Interestingly, Internet Explorer will evaluate an inlined CSS as soon as it enters the DOM, but Chrome does not exhibit this behavior. Unfortunately, I am currently unable to test in FireFox due to an unrelated technical problem.

My question now is whether there is a jQuery method to evaluate a dynamically added stylesheet in the DOM as either an inline style or a separate stylesheet?

There are several factors driving my desire for this functionality:

  • The CSS in the popup belongs exclusively to the popup and may originate from a different environment
  • The dynamic nature of the CSS makes it inconvenient to place it in the parent page unless absolutely necessary
  • I had anticipated this setup to function smoothly, but unfortunately, I have encountered setbacks :-(
jquerycssajax

Answer №1

When provided with a path to your CSS file (or any URL that generates valid CSS):

var myStylesLocation = "myStyles.css";

Here are a few ways to load the styles:

Method 1: AJAX Loading

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});

Method 2: Dynamic <link> Element

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");

Method 3: Dynamic <style> Element

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

Alternatively, you can use:

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

Answer №2

This solution is compatible with IE 7, as well as FF and Chrome/Safari. It offers a workaround for styling issues in older versions of Internet Explorer:

var stylesheetUrl = 'urlOfStyleSheet.css'
if(document.createStyleSheet) {
    try { document.createStyleSheet(stylesheetUrl); } catch (error) { }
}
else {
    var cssLink = document.createElement('link');
    cssLink.rel = 'stylesheet';
    cssLink.type = 'text/css';
    cssLink.media = "all";
    cssLink.href = stylesheetUrl;
    document.getElementsByTagName("head")[0].appendChild(cssLink);
}

Answer №3

let cssDirectory = "/css/files/";

let styleLink = document.createElement("&lt;link rel='stylesheet' type='text/css' href='"+cssDirectory+"' media='screen' /&gt;");

document.querySelector("head").appendChild(styleLink);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps on opening css after changing the default program

I'm in the process of creating my very first web page. I added some code to change the background color, but it's not working as expected. The code seems correct, so why isn't it displaying properly when I preview the page? It turns out th ...

htmlcssweb

Update information in the dropdown chart

I have encountered an issue with my code where the data updates properly but the chart does not redraw in the correct position. Can someone help me identify what might be causing this problem? (For more information, you can check Firebug - the JSON is upd ...

javascriptjqueryjsondojodojox.charting

Set the datepicker to automatically show today's date as the default selection

The date picker field is functioning correctly. I just need to adjust it to automatically display today's date by default instead of 1/1/0001. @Html.TextBoxFor(model => model.SelectedDate, new { @class = "jquery_datepicker", @Value = Model.Selecte ...

javascriptjqueryhtmldatepicker

Overflow and contain a flex item within another flex item

I am facing a challenge where I need to prevent a flex-child of another flex-child from overflowing the parent, ensuring it does not exceed the screen height or the height of the parent (which is also a flex-child). Here's the CodePen link for refere ...

htmlcssvue.jsflexboxvuetify.js

Tips for accessing data from dynamically named inputs within an ng-repeat loop

My objective is to facilitate the process of transferring data from one table row to another. https://i.sstatic.net/2XjSG.png If the information from 2015 remains unchanged in 2016, users should have an efficient method for copying these values into the c ...

javascriptjqueryangularjslodashlinq.js

When trying to pass an array to a servlet through ajax, receiving a null parameter is

Just starting out with ajax and encountering an issue. This is what I have set up: var myArray = [2324.031536 , 2355.015241 , 2397.099387 , 2444.286019]; $(document).ready(function() { ...

javajavascriptjqueryajaxservlets

Tips for reducing the impact on performance caused by cookie consent code

Experimenting with basic HTML to analyze the impact of cookie consent code. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="determine page l ...

htmlcsspagespeedgoogle-pagespeedcookieconsent

Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...

htmlcss

`Problem with the layout of the form on the website`

Experiencing some challenges with the container design for a job sheet project. As a beginner, I have been learning on the fly and following online tutorials to create functional forms. However, this particular form is not rendering correctly when viewed o ...

htmlcssflexboxalignmentcentering

The footer section of my website seems to have gone missing in the HTML/CSS coding

I'm having trouble with my website footer not displaying. I've tried using "position: absolute; top: 50px; left:100px;" in my HTML/CSS, but it's not working. Can anyone help me fix this issue? Here is a link to the code I'm working on: ...

javascripthtmlcssfooter

The Google Maps V3 API map is not loading completely

I'm currently in the process of developing an application that will display maps showcasing local dining establishments. Although the map does appear, it's taking an excessively long time to load and never fully loads as expected. My deadline i ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Effect of hovering on marker on Google Maps API using Javascript is initiated upon mouseout

I am facing an issue with my Google map markers. Each coordinate set has its own marker, and when a user hovers over a marker, it changes to a different icon. However, when the mouse moves away from the marker, I want it to revert back to the original icon ...

jquerygoogle-mapsgoogle-maps-markersmouseout

Upgrade the arrow accordion in bootstrap by incorporating images instead

I have implemented a Bootstrap accordion with a toggle arrow. Here is an example: http://jsfiddle.net/zessx/r6eaw/12/ My question is, if I want to change the arrow with an image, what do I need to edit? Or how can I implement it? This is the image I want ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with div element not functioning properly within table declaration on Internet Explorer

There seems to be an issue with the div tag not functioning properly inside a table definition: <table> <tr></tr> <div id="choice"><tr> <td>-------</td> <td>-------</td> <td>-------</td> &l ...

javascriptcsshtml-table

Bootstrap modal fails to appear on screen

Using PHP, I generate a link from the controller. The link is stored in $retailer["url"] as 0125myimage.jpg <a onClick="crop('.$retailer["url"].')" data-target="#styledModal3" href="#" class="fa fa-edit lupa"></a> Here is my JavaSc ...

javascriptjqueryajaxtwitter-bootstrap

Using jQuery to selectively hide elements that are currently visible

I have 5 interactive buttons that control the visibility of corresponding points on a detailed SVG map. The buttons are labeled #icon1, #icon2, #icon3, #icon4, and #icon5. All points on the map belong to the .poi-hover class. Using jQuery to Show/Hide Poi ...

jquery

Having trouble retrieving the Id for a row when implementing dynamic binding for a Datatable with Jquery

Everything is working fine, but sometimes when I click that icon, it returns the wrong value. In result[i][10] on the onclick function, it's not able to get the ID. Can anyone point out what I am doing wrong? success: function (response) { debug ...

jqueryjsondatatable

Selecting the incorrect label while hovering over a checkbox

I am using Bootstrap and encountering an issue with displaying checkboxes after clicking on an accordion element. While the first checkbox is displayed correctly, the checkboxes inside the accordion do not appear as expected. It is confusing to me why thi ...

htmlcssbootstrap-4

The Ajax form request in Django is not working as expected, as the method request.is_ajax() is returning false consistently

I've been searching high and low for a solution to this issue, but nothing seems to work. I'm currently learning AJAX through Django. Despite my efforts, the code never seems to enter my Ajax block in the following setup, and the form request is ...

pythondjangoajax

Setting up Bootstrap 4 SCSS with React webpack: A comprehensive guide

Embarking on a new project with ReactJS ES6 and webpack. Utilizing the react-static-boilerplate starter. My main query lies in how to import Bootstrap4 into the build process? Avoiding the use of the generated bootstrap.css file, I aim to have webpack co ...

csstwitter-bootstrapreactjswebpack