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

What is the best way to save geolocation coordinates in a Javascript array?

Creating a Dynamic Navigation Bar with HTML and CSS

The stature of Bootstrap's columns

The chosen color for the link button in CSS

Looking to create a format for displaying short comic strips in a grid pattern

AngularJS application is throwing an error indicating provider $q is not recognized

Utilize auto-suggestion feature for populating dynamically created input fields with information sourced from the

Use the Google Maps API to dynamically add a marker via AJAX once the map has been initialized

What is the best way to show an array object from PHP to AJAX in JavaScript?

Does Openerp or Odoo utilize ajax to transmit POST and GET data seamlessly, without the need for page refresh?

Is it possible for a navbar in CSS to collapse based on its width?

How to use JQuery UI sortable to automatically scroll to the bottom of the page

Issues with AJAX validation causing problems with enabling/disabling the Submit button

"Error: The function $(...).autocomplete is not recognized" in conjunction with Oracle Apex

Anchor checkboxes

Refreshing a jsp page without the need to reload the content

How can you determine the number of times a particular digit appears around a specific position in a TypeScript array

Tips for adjusting the default selection in a second dropdown menu

Unveiling the Secret: Empowering a Span to Secure its Territory Amidst an Adv

Receive live updates from a SQL Server database into an AJAX-based ASP.NET web page, similar to the real-time updates on Facebook