What is the best way to add a CSS link if a request is not made using AJAX?

Question

What is the best way to add a CSS link if a request is not made using AJAX?

My webpage, 'foo.html', retrieves data from a database using AJAX ('ajax.html?options=option1') to populate a table. The table is styled nicely with CSS that is linked to 'foo.html'. However, I also want the ajax.html page to be styled when accessed directly. When I add

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

to ajax.html, it inserts the link into foo.html as well, which is not desired. Is there a way to prevent the CSS link code from appearing in the AJAX call or only display on non-AJAX calls?

Any advice would be appreciated.

html css ajax

Answer 1

Answer №1

One solution that comes to mind is to include an extra parameter that specifies the context in which the function is called.

Answer 2

One solution that comes to mind is to include an extra parameter that specifies the context in which the function is called.

Answer 3

Answer №2

To simplify this task, utilizing jQuery is highly recommended.

Begin by loading the ajax.html page using jQuery.get(). Upon success, execute the following steps:

Remove the existing stylesheet:
```
$('link[rel=stylesheet]').remove()
```
;

If you wish to add a new stylesheet at a later point:

var link = $("<link>");
link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: 'http://example.com/stylesheet.css'
});
$("head").append( link );

Alternatively, if you need to modify the stylesheet URL later on:

$("link").attr("href","http://example.com/stylesheet.css");

Answer 4

To simplify this task, utilizing jQuery is highly recommended.

Begin by loading the ajax.html page using jQuery.get(). Upon success, execute the following steps:

Remove the existing stylesheet:
```
$('link[rel=stylesheet]').remove()
```
;

If you wish to add a new stylesheet at a later point:

var link = $("<link>");
link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: 'http://example.com/stylesheet.css'
});
$("head").append( link );

Alternatively, if you need to modify the stylesheet URL later on:

$("link").attr("href","http://example.com/stylesheet.css");

What is the best way to add a CSS link if a request is not made using AJAX?

Answer №1

Answer №2

Similar questions

Customizing arrays in DataTables allows for creating new columns and displaying them in the table according to the specified customizations

Implementing uniform column width in a Material-UI Grid

Is there a way to have the headline gently fade in and subtly rise when the page loads using CSS?

Dynamically insert innerHTML content into table rows using JavaScript in PHP is a fantastic way to customize

What could be causing the server to not successfully receive the ajax request?

Issue with using the character '#' in a JSON as a parameter in $AJAX URL

The functionality provided by Ajax and React

Unable to trigger JavaScript function from ASP.NET MVC HTML view

Ajax request terminates once PHP has looped for a specific duration of time (2 minutes)

Transmit JSON Data via POST Method and Retrieve Using Node.js (Without the Use of Body Parser)

Converting non-null values in a JSON object to null within an MVC Controller method

The 'data-intro' property cannot be bound to the button element as it is not recognized as a valid property

Arrange the DIVs in the identical spot and switch them back and forth

Upon selecting a dropdown menu option, populate a textbox with information retrieved from the database

Refresh data in bootstrap table using a JSON dataset for a seamless user experience

How to properly set margins for button components in Material UI

Designing Tables for User Interfaces

HTML underlay with interactive z-index functionality

Utilizing FormHelper in CakePHP to send search query to controller parameter

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript