Member Avatar for vishalonne

My code is working in IE 8 but not working properly in FireFox and Google Chrome.
Actually by JQuery I am loading html page in div in same page this working properly in IE but in FF and in GC page opens but not in div it open like target_self type. Means my link page is overridden by the new page
Hi
I am try to load a html page using jquery, I am able to load html page successfully by a click on link, but problem is loaded page is not using style sheet.
Code jscript-

$(function(){
    $('#ul1 li a').on('click', function(e){
        e.preventDefault();
        var page_url=$(this).prop('href');
        $('#content').load(page_url);
    });
});


<div id="nav" class="image002-03">
        <span id="smalltext" 
            style="bottom: 0px; margin-bottom: 0px; padding-bottom: 0px; font-family: Calibri; font-size: large; text-align: center;">Service Menu</span>
        <ul id="ul1" class="serviceul">
            <li class="serviceli"><a href="testpage1.htm">Question Papers (unsolved)</a></li>
            <li class="serviceli"><a href="#">Question Papers (solved)</a></li>
            <li class="serviceli"><a href="#">Sample Papers</a></li>
            <li class="serviceli"><a href="testpage2.htm">Notes</a></li>
            <li class="serviceli"><a href="#">Solved Assignments</a></li>
            <li class="serviceli"><a href="#">Projects</a></li>
            <li class="serviceli"><a href="#">Presentations</a></li>
            <li class="serviceli"><a href="#">Uploads</a></li>
            <li class="serviceli"><a href="#">Forum</a></li>
        </ul>
</div>

Above code load a testpage1.htm my testpage.htm code is

<head>
    <title>cbse cs n ip</title>
    <link href="css/innerPage.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="mainbody">
    <div id="bodytext">
        Question Papers (unsolved)
        </div>
        </div>
</body>

and innerPage.css contain following style -

#mainbody
{
    background-color: #FF3300;
    height: 434px;
    margin-top: 137px;
}
#bodytext
{
    font-size: large;
    font-weight: bold;
    width: 214px;
    color: #CC0099;
}

Above css is not working. Totally confused

  • 2 Contributors
  • 1 Reply
  • 246 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Atli

Dani AI

Generated

A few things stand out from the posts by and that explain why IE8 might show the expected result while Firefox and Chrome do not.

Common causes - a JavaScript error that prevents the click handler from attaching, testing the files over file:// (Chrome/Firefox block many local XHRs while IE is more permissive), or loading a full HTML document into a DIV so its linked stylesheet either is not requested or its relative path resolves incorrectly against the parent page. Checking the browser console and Network panel will immediately reveal which of these is happening.

Practical checks and fixes:

  • Confirm jQuery is loaded before the script and there are no console errors.

  • Verify the click handler is actually attached (use the console to inspect event listeners or add a quick log inside the handler).

  • Prefer loading only the fragment needed (avoid inserting a full <head> into the body). Example pattern to attach reliably and load a fragment:

    $(document).on('click', '#ul1 a', function(e){
  e.preventDefault();
  var url = $(this).attr('href');           // keep it relative
  $('#content').load(url + ' #mainbody', function(resp, status, xhr){
    if (status === 'error') console.error('Load failed', xhr.status, xhr.statusText);
  });
});

  • If the fragment needs its own stylesheet, include that CSS in the main page head or append the stylesheet to the document head after load (avoid relying on link tags that were inside the injected HTML). Example to append a stylesheet:

    if (!$('link[href="/css/innerPage.css"]').length) {
  $('<link rel="stylesheet" href="/css/innerPage.css">').appendTo('head');
}

If testing from the filesystem, running a simple local HTTP server removes browser XHR restrictions (for example, python -m http.server 8000). The Network panel will also show whether the CSS file is requested and whether it returns 404 because of a wrong relative path — fixing paths to absolute or moving needed CSS into the parent page will solve styling inconsistencies.

Member Avatar for Atli

I tried the above code over here. It seems to work fine in all the major browsers. The CSS of the loaded HTML is also loaded and applied just as expected.

Are you getting any errors in your browser's Javascript dev tools? (Usually brought up with the F12 key or CTRL+SHIFT+J)

Could you show us a live example of a page where the problem is showing? Or perhaps just send us the complete project so we can set it up and see for ourselves?

Edited by Atli
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.