ansaurus

Question

how to call js files first instead of loading html in case of ajax call

Answer 1

+3 A:

When you load content with AJAX, the returned content should be only an HTML fragment.

If you load a complete HTML document and put it into the page, the resulting HTML code is invalid, as a document can not be inside another document. Different browsers behave a little different on invalid code, but no browser will ever load the css files and apply them only to the loaded content.

If you want to load a complete HTML document, then you should use an iframe instead of loading the content using AJAX.

Guffa 2010-10-29 14:55:18

Answer 2

A:

You would need to do the work manually.

function ajaxJq() {
    $.get('test.jsp', function(data) {
         var $html = $(data);

         $html.find('script').each(function(i,e){
             $('head').append(e);
         });
         $html.find('link').each(function(i,e){
             $('head').append(e);
         });

         $('#myDiv').html($html.find('body').contents());

         alert('Load was performed.');
    });
}

But in general, this is maybe not a good way to do it. Using an iframe is maybe a lot more efficient here since you cannot load another <html> or <head> tag into another page / DOM.

jAndy 2010-10-29 14:59:31

Answer 3

+1 A:

That's expected behaviour. When you try to load an entire HTML page into an existing page element such as a DIV, most browsers will strip out scripts, stylesheets and any other meta-content such as the title. Possible workarounds for styling are:

include the additional CSS files in your main page
use inline styles in the retrieved page

casablanca 2010-10-29 14:59:36

ansaurus

tags:

views:

answers:

how to call js files first instead of loading html in case of ajax call

related questions