CODEWITHSUNDEEP
jquery
ChrisJ
ChrisJ

Reputation: 477

Jquery output not being displayed in web page

I am trying to display the results of a database query on a web page. I'm using the JQUERY script below to get the data as a JSON array via a php script.

For some reason I can't figure out, the web page. is blank. Note the alert shows the data is being passed to the $.each loop correctly.

Can anyone tell me what I'm doing wrong??

Thanks
Chris

JQUERY SCRIPT

function projectData() {

var data = '';

    $.ajax(
    {
        url:"projectdata.php", 
        type: "POST",
        dataType: 'JSON',
        cache: false,
        success:function(data)
        {
            $( "#projectList" ).insertAfter('<tbody>' + 

                $.each(data, function(indx, value) 
                {
                    '<tr><td>' + data[indx].project_id + '</td>' +
                    '<td>' + data[indx].dept + '</td>' +
                    '<td>' + value.projName + '</td>' +
                    '<td>' + data[indx].notes + '</td>' + 
                    '<td>' + data[indx].dates + '</td>' +
                    '<td>' + data[indx].status + '</td>' +
                    alert("ID: " + value.project_id + "   " + "DEPT: " + data[indx].dept);
                } //end function
                ) //end each
                ) //end After

        } //end success
    }); //end ajax

} //end projectdata

HTML SCRIPT

Existing Projects: 

&lt; table id="projectList">    
&lt; thead>  
&lt; tr class="success">   
&lt; th class="span1">PROJECT ID &lt; /th>  
&lt; th class="span2">SCHOOL / DEPT &lt; /th>  
&lt; th class="span1">PROJECT &lt; /th>  
&lt; th class="span3">DESCRIPTION / PROJECT NOTES &lt; /th>  
&lt; th class="span1">APPROX DATES &lt; /th>  
&lt; th class="span1">STATUS &lt; /th>  
&lt; th class="span1">USER</th> &lt; /tr>  
&lt; /thead>  
&lt; tbody>  
&lt; !-- RESULTS FROM JQUERY/PHP GOES HERE -->  


&lt; /tbody>  
&lt; /table>

Upvotes: 0

Views: 133

Answers (3)

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

Change your insertAfter to append:

           $( "#projectList" ).append('<tbody>' + 

                '<tr><td>' + data[indx].project_id + '</td>' +
                '<td>' + data[indx].dept + '</td>' +
                '<td>' + value.projName + '</td>' +
                '<td>' + data[indx].notes + '</td>' + 
                '<td>' + data[indx].dates + '</td>' +
                '<td>' + data[indx].status + '</td>' 
            );

And what is the alert doing there? Didnt get id.

Upvotes: 0

Sergii
Sergii

Reputation: 1320

'<tbody>' + $.each(data, function(indx, value)

In this code you concatinate string with function

Try to create html first with $.each and then put it into tbody 

var result = "";

$.each(data, function(i, val){

   result += "<tr><td>" + val.project_id + "</td></tr>";

})

$( "#projectList tbody" ).html(result);

Upvotes: 0

devnull69
devnull69

Reputation: 16544

You have a syntax error

$( "#projectList" ).insertAfter('<tbody>' + 

$.each(data, function(indx, value) 
{
   '<tr><td>' + data[indx].project_id + '</td>' +

This doesn't make any sense

Maybe this is what you wanted to do

var result = "";
$.each(data, function(indx, value) 
{
   result += '<tr><td>' + data[indx].project_id + '</td>' +
                '<td>' + data[indx].dept + '</td>' +
                '<td>' + value.projName + '</td>' +
                '<td>' + data[indx].notes + '</td>' + 
                '<td>' + data[indx].dates + '</td>' +
                '<td>' + data[indx].status + '</td></tr>';
}
$("#projectlist").insertAfter('<tbody>' + result + '</tbody>');

Upvotes: 3

Related Questions