javascript loading issue with jquery ajax or xmlhttp

Question

Hi We using a master template for all aspx pages. In master page we added frequent using CSS, JS, In aspx page pages we using require CSS and JS for that particular page.

Now we are trying add Jquery Ajax or XmlHttp for website optimization. Using Jquery ajax we calling a aspx page into DIV. Here problem when we load total aspx page from HTML tags javascript and all scripts working fine. But when we trying to load that page from particular DIV or body then scripts not working.

Can please tell me how we can load scripts when loading page from particular DIV or body.

Answer 1

In your aspx page make sure you do not have relative paths for your CSS and JS files. The following is using a relative path. If you load the file through an ajax request and into a div the relative paths will not work.

    <link rel="stylesheet" type="text/css" href="../Common/css/myCss.css" media="all" />
    <script type="text/javascript" src="../Common/js/myJs.js"></script>

Instead you must use the absolute path of the file

    <link rel="stylesheet" type="text/css" href="<%=Page.ResolveUrl("../Common/css/myCss.css") %>" media="all" />
    <script type="text/javascript" src="<%=Page.ResolveUrl("../Common/js/myJs.js") %>"></script>

Try this and see if it works. I have not tested it in the way you want to use it.

Edit:

If you are receiving the page as an html string, instead of doing this:

    $(result).find("#ContentSwitcher").html()

try the following:

    $.parseHTML(result).find("#ContentSwitcher").html()

Note: $.parseHTML requires jquery 1.8.0 or higher.