Image not loaded in jQuery load() of a HTML page

Question

I am using following code to load a html page inside a div,

$("#htmlViewer").load("conversion_test/to_convert_3264/"+getPageName(pageCount)+".htm", function(response, status, xhr) { if (status == "error") { /* var msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); */ jAlert('Unexpected Error : Please try again later', 'Alert'); pageCount--; } });

In the above code I am getting only the HTML text but I am not getting CSS and the images in that page. To get the CSS I added another Ajax request. Without this the page loaded in ajax call will not have the css styles applied.

$.ajax({ url:"conversion_test/to_convert_3264/style.css", success:function(data){ $("<style></style>").appendTo("head").html(data); } })

I am not sure this is the right way to go about it. The problem is I am not getting the images during the ajax call. The images come from conversion_test/to_convert_3264/images folder. Any help is greatly appreciated. Please let me know If I need to give more details.

Thanks in advance.

Because you are not requesting images. Your ajax call can only request the uri/url you have specified. — KV Prajapati
– KV Prajapati, Commented Aug 23, 2012 at 6:06
Thank you, but How to make the images display any suggestions please ? — Dilip Rajkumar
– Dilip Rajkumar, Commented Aug 23, 2012 at 6:08
is it possible to load the images folder dynamically so that the images will be displayed? — Dilip Rajkumar
– Dilip Rajkumar, Commented Aug 23, 2012 at 6:10
That is not possible via jQuery - en.wikipedia.org/wiki/Web_crawler — KV Prajapati
– KV Prajapati, Commented Aug 23, 2012 at 6:12
Is the page that makes the Ajax call in the same folder as the called page? Could the problem be that the images are referenced relatively to the target page, which means they are wrong in the page that code is inserted into? — Miika L.
– Miika L., Commented Aug 23, 2012 at 6:20

Community · Accepted Answer · 2017-05-23 12:08:35Z

Will write this as an answer so its a bit more obvious than just the comment thread:

The problem is that the calling page is not located in the same folder as the page being called. The target page references the images with relative paths, and thus when its inserted into the calling page, those references no longer match. In other words, the context of the page has changed.

There are two possible solutions:

Use absolute paths for the images so that the context doesn't matter.
Use jQuery to fix the paths in the received html (Dilip came up with the code for this himself in his answer).

Dilip Rajkumar · Accepted Answer · 2012-08-23 07:30:37Z

I finally fixed based on the @MiikaL suggestion. Following is my code to solve the problem.

function replaceImageSource() { $("img").each( function(){ $(this).attr({ src: 'conversion_test/to_convert_3264/' + $(this).attr('src') }); }); }

Hope this helps some one. Thanks for all your help.

Collectives™ on Stack Overflow

Image not loaded in jQuery load() of a HTML page

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related