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.');
         }
      }
   }

Answer 1

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>