Menu
I have a function which calls ajax to retrieve information from the database, then creates a table to display but it is not working as expected.
“`
var tr = $(this).closest(‘tr’);
var row = table.row( tr );
row.child( getData( row.data()) ).show();`
“`
function getData ( d ) {
var booking;
$.ajax({
async: false,
type: “POST”,
url: “api/bookings.manage.php?h=”+hash,
data: {action: ‘select_row’, booking_id:d[0]},
success: formatTable
});
}
“`
function formatTable ( response ) {
booking = JSON.parse(response);
return ‘<table class=”table”>’+
‘ <thead>’+
‘ <tr>’+
‘ <th scope=”col” colspan=”2″>Booking Details</th>’+
‘ </tr>’+
‘ </thead>’+
‘ <tbody>’+
‘ <tr>’+
‘ <th scope=”row”>Suburb</th>’+
‘ <td>’+booking[0].suburb+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Waste Type</th>’+
‘ <td>’+booking[0].waste_type+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Bin Size</th>’+
‘ <td>’+booking[0].bin_description+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Delivery Date</th>’+
‘ <td>’+booking[0].delivery_date+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Pickup Date</th>’+
‘ <td>’+booking[0].pickup_date+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row” colspan=”2″>Customer Details</th>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Name</th>’+
‘ <td>’+booking[0].firstName+’ ‘+booking[0].lastName+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Email</th>’+
‘ <td>’+booking[0].email+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Company/Business Name</th>’+
‘ <td>’+booking[0].companyName+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Address</th>’+
‘ <td>’+booking[0].address+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Suburb</th>’+
‘ <td>’+booking[0].suburb+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Postcode</th>’+
‘ <td>’+booking[0].postcode+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Daytime Phone</th>’+
‘ <td>’+booking[0].phoneDay+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Mobile Phone</th>’+
‘ <td>’+booking[0].phoneMob+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Billing Address</th>’+
‘ <td>’+booking[0].billToAddress+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row” colspan=”2″>Payment Details</th>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Payment Method</th>’+
‘ <td>’+booking[0].payment_method+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row” colspan=”2″>Other Details</th>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>Additional Information/Delivery Instructions</th>’+
‘ <td>’+booking[0].addit_info+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row”>How did you find us</th>’+
‘ <td>’+booking[0].heard_about_us+’ – ‘+booking[0].heard_other+'</td>’+
‘ </tr>’+
‘ <tr>’+
‘ <th scope=”row” colspan=”2″>Total: $’+booking[0].total_price+’ Inc of GST</th>’+
‘ </tr>’+
‘ </tbody>’+
‘</table>’;
}
When I originally set it up, I simply returned:
`return ‘<h1>TABLE</h1>’;
This was working fine. Now, when I add the table data, I get:
`Uncaught TypeError: Cannot read property ‘show’ of undefined
All i can think of is that the return value is too big and it is breaking?