CODEWITHSUNDEEP
javascriptphpjqueryhtmljson
Rooter
Rooter

Reputation: 383

Web page content not shownig after JQuery loading

Above code generate HTML table using JSON output.

But, my problem is, after this JQuery runs, other page content is not shown. 

<script>
    $(document).ready(function () {
    var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;

    var data2   =   <?php echo $data; ?>;
    $.each(data2[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data2, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '<tr>';
     });
     html += '</table>';
     $('body').html(html);
     console.log(html);
});
</script>

when the page loads, content should disappear and it should shows particular table only.

Upvotes: 2

Views: 81

Answers (3)

kevin
kevin

Reputation: 115

Probably cause is 

$('body').html(html);

Because html() method will change the content of body elements. You should use 

$('body').append(html);

to insert content at the end of body elements.

Upvotes: 0

Harshil Patel
Harshil Patel

Reputation: 308

you miss : html += '</tr>'; please check with full code 

<script>
    $(document).ready(function () {
    var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;

    var data2   =   <?php echo $data; ?>;
    $.each(data2[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data2, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '</tr>';
     });
     html += '</table>';
     $('body').html(html);
     console.log(html);
});
</script>

Upvotes: -1

Abhinav
Abhinav

Reputation: 1200

change this 

$('body').html(html);

with

$('body').append(html);

Upvotes: 2

Related Questions