Issues with HTML formatting after using JQuery .load()

Question

Issues with HTML formatting after using JQuery .load()

Hey there StackOverflow community!

I've encountered a problem that I need help with. Whenever I use the following code:

$("#specificDIV").load("new.html")

The HTML content loads into the div, but the CSS and JS don't work properly. The formatting is off, elements like sliders and text overflow outside of their containers, fonts are not displayed correctly, and the slider doesn't function at all.

I tried including the same header from the original HTML file inside new.html to ensure that the CSS and JS are referenced properly, but it didn't solve the issue. I also noticed that .load is deprecated and attempted using:

$("#specificDIV").on("load","new.html")

This resulted in the same broken formatting as before on the first attempt, but now I'm getting an error message when calling it:

load Uncaught TypeError: Cannot create property 'guid' on string "new.html"

This error seems to point back to the deprecated load function. It appears that using .on() isn't the solution either.

How can I resolve the formatting issue with .load() and fix the guid error related to .on()? Your assistance is greatly appreciated!

edit: Here are some screenshots showing what's happening.

https://i.sstatic.net/eGvna.png

https://i.sstatic.net/oXZOw.png

javascript jquery html css

Answer 1

Answer №1

Here are two important points to consider:

The code $("#specificDIV").on("load", "new.html") does not function as expected.

This is due to the fact that this code instructs jQuery to execute the string "new.html" when the element with id "specificDIV" triggers a 'load' event. The confusion arises from the existence of two different methods in jQuery, namely .on() and .load(). In essence, the former has replaced the latter.

If you intend to dynamically load content using jQuery's .load() method, it is worth noting that:

jQuery utilizes the browser's .innerHTML property for parsing the retrieved document and incorporating it into the current document. However, certain elements like <html>, <title>, or <head> may be filtered out by browsers during this process. Hence, the loaded elements may not be exactly identical to those if directly fetched by the browser.

Have you placed your CSS and JS scripts within the head section of the document being fetched? If so, consider moving them outside of the <head> tag.

Answer 2

Here are two important points to consider:

The code $("#specificDIV").on("load", "new.html") does not function as expected.

This is due to the fact that this code instructs jQuery to execute the string "new.html" when the element with id "specificDIV" triggers a 'load' event. The confusion arises from the existence of two different methods in jQuery, namely .on() and .load(). In essence, the former has replaced the latter.

If you intend to dynamically load content using jQuery's .load() method, it is worth noting that:

jQuery utilizes the browser's .innerHTML property for parsing the retrieved document and incorporating it into the current document. However, certain elements like <html>, <title>, or <head> may be filtered out by browsers during this process. Hence, the loaded elements may not be exactly identical to those if directly fetched by the browser.

Have you placed your CSS and JS scripts within the head section of the document being fetched? If so, consider moving them outside of the <head> tag.

Answer 3

Answer №2

Give this a shot

 $.ajax({
      url: 'ajax/new-info.html',
      success: function(response) {
        $('#targetDIV').html(response);
      }
    });

Answer 4

Give this a shot

 $.ajax({
      url: 'ajax/new-info.html',
      success: function(response) {
        $('#targetDIV').html(response);
      }
    });

Issues with HTML formatting after using JQuery .load()

Answer №1

Answer №2

Similar questions

Please be patient until setInterval() completes its task

What is the best way for Protractor to effectively wait for a popover to be displayed and verify that it does not contain an empty string?

"Move a div towards the mouse's location by animating it with JavaScript when

Creating an adjustable fixed footer using Bootstrap 3

Exploring Facebook Graph API response with Angular 2 Mapping

I'm looking for guidance on the syntax of declaring a constant variable with an empty object in JavaScript. Can someone please explain or

Can you share the method for concatenating an object at a specific index within an Array using JavaScript?

Looking for a way to keep the mobile ad unit fixed at the bottom of the screen

The links are displaying on separate lines instead of being inline

The visibility of a CSS class is rendered non-apparent when formed through the implementation

Issue: Unable to locate module '/node_modulesprogressbar/package.json'

What causes all the accordion panels to toggle simultaneously in a ReactJs application?

What is the best way to select an HTML tag element using the :v-deep() selector?

When the onChange event is triggered, the current value in my text input field disappears in React

Utilize Webpack to integrate redux-form as an external library

Tips for transferring a variable from a webpage's JavaScript to Node.js

Customizing Event Color in fullcalendar based on live data and assigned categories tag

Bootstrap 4 does not have the capability to include spacing between two columns

How to delete an array within an array in MongoDB if it exists

assign a goal to hyperlinks