Ajax load div , part of CSS not working

Question

I'm using the ajax to load a div content, but the div content is not taking the CSS of the page.

Example :- This link will load into

<a href="#" onclick="javascript:loadAjax('test.html')">Test</a> 

<div id="result">
<table class="tablesorter">
<thead>
    <tr>
        <th>Header 1</th><th>Header 2</th>
    </tr>
</thead>
<tbody>

    <tr><td>Record 1</td><td>Desc 1</td></tr>
</tbody>    
</table>
</div>

In my CSS :

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}

table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

In my test.html, it's the same table with different record :

<table class="tablesorter">
    <thead>
        <tr>
            <th>Header 1</th><th>Header 2</th>
        </tr>
    </thead>
    <tbody>

        <tr><td>Record 2</td><td>Desc 2</td></tr>
    </tbody>    
    </table>

The issue I'm facing is that before "test.html" is load, the CSS is fine. But after clicking on the link which suppose to loads test.html, the CSS background still shows but "cursor:pointer" and "background-image" not longer works.

What should I do to make it work? Thanks in advance!

Added in the loadAjax code :

   var http_request = false;
   function loadAjax(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      http_request.onreadystatechange = alertContents;
      http_request.open('GET', url + parameters, true);
      http_request.send(null);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
     // alert(http_request.status);
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('result').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }

Please provide the code in loadAjax()

Delan Azabani
– Delan Azabani

2010-05-18 02:08:29 +00:00
Commented May 18, 2010 at 2:08 — Delan Azabani
– Delan Azabani, Commented May 18, 2010 at 2:08
Hi Delan, Have added in the script. :) thanks

Sylph
– Sylph

2010-05-18 03:17:55 +00:00
Commented May 18, 2010 at 3:17 — Sylph
– Sylph, Commented May 18, 2010 at 3:17

Banzor · Accepted Answer · 2010-05-18 03:34:19Z

3

Try adding the same css to test.html file. If you are actually using an iframe or embedding a page into another then the CSS will not cascade into the embedded page. It is rendered as its own document.

Update: It looks like you might need to add a class to the first cell in the row to make it get styled. The test.html does not have any elements in it that are styled by the second section of CSS since it does not match any element.

<table class="tablesorter">
    <thead>
        <tr>
            <th>Header 1</th><th>Header 2</th>
        </tr>
    </thead>
    <tbody>

        <tr><td class="header">Record 2</td><td>Desc 2</td></tr>
    </tbody>    
    </table>

edited May 18, 2010 at 3:34

answered May 18, 2010 at 2:17

Banzor

1,1227 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sylph Over a year ago

Thanks, I have add in the same css into the test.html, but I get the same result. I tried to use IE developer tool to trace the CSS. I can see all the other CSS except for the "cursor" and "background-image".. I wonder why :(

Banzor Over a year ago

Try adding the header class to the cell like I have demonstrated above. The issue is that the selector used for the cursor and bg does not match any elements in the page.

Sylph Over a year ago

Thanks Banzor!! It works for the CSS. However, wonder if you could help me for the javascript as well? I have a js function, which will sort the table when the header is being clicked. tablesorter.com/docs The function is not working after the div is loaded with the ajax. Thanks again!

Banzor Over a year ago

Try calling $(".tablesorter").tablesorter(); during the loadAjax function after test.html is loaded. The reason it doesnt work is that there is a new table in the DOM and jQuery tablesorter plugin has not been initialized for it.

Sylph Over a year ago

Thanks Thanks! Have clean up my script as well :) I think I begin to understand how everything works. I have been trying $("#myTable").tablesorter() but it didn't work. Thanks so much!

Collectives™ on Stack Overflow

Ajax load div , part of CSS not working

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related