CODEWITHSUNDEEP
jqueryhtmlajaxload
Sean Bulley
Sean Bulley

Reputation: 73

Trying to load a table into DIV from HTML file

I'm trying to load the entire contents of a .html file into a div I have in another page using Javascript / JQuery and currently have:

$( "#divToFill" ).load("newContent.html");

However this replaces the existing content in the DIV with nothing and leaves empty space on the screen. The content in newContent.html is as follows:

 <table cellspacing="0" cellpadding="3" border="0" class="results" id="results">
    <thead id="tableHeader">
       <tr class="column-headers">
          <td width="15%">1</td>
          <td width="10%">2</td>
          <td width="35%">3</td>
          <td width="17%">4</td>
          <td width="5%">5</td>
          <td width="18%">6</td>
       </tr>
    </thead>
    <tbody>
       <tr class="row">
          <td class="column">
             <div style="word-wrap:break-word;overflow:auto">CONTENT</div>
          </td>
          <td class="2">Num5757474747</td>
          <td class="3">
             <span>
                <div class="divStyle2"> TEXT TEXT TEXT </div>
             </span>
          </td>
          <td class="4">HELLO</td>
          <td class="5">10:00</td>
          <td class="6">To be done</td>
       </tr>
    </tbody>
 </table>

Any help?

Upvotes: 0

Views: 1156

Answers (2)

Justinjs
Justinjs

Reputation: 140

u can alo try loading it via php file

<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});
</script>

if not try this one

<script type="text/javascript"> 
            var includeDiv = $("#include");
            $(window).on('hashchange', function() {
                var href = location.hash.slice(1) +".html";
                includeDiv.load('include/' + href);
            });
 </script>

Upvotes: 1

user4258956
user4258956

Reputation:

The jQuery.load() function requires the entire URI of the page. So, if your developing on a live website, it would need to have....

$("#DivToFill").load("http://domain/directory/fileName.html");

Also, try outputting what the response from the load function is in the console. This will help you debug further. The way you do this is...

        $("#DivToFill").load("http://domain/directory/fileName.html",function(response, status, xhr ){
         console.log(xhr);
         console.log(response);
         console.log(status);
        }

Hope this helps...

Upvotes: 0

Related Questions