Bom dia, estou tendo problemas para printar elementos em uma view, esses elementos estão sendo chamados pelo PHP e são enviados para um script em javascript, que recebe os mesmos em json e através de ajax mostra um pop-up com as informações da tabela, sendo que esses elementos são de duas tabelas, uma delas é ONE e a outra é MANY, ou seja, uma ordem de serviço contém vários produtos...
<!--Chamado da tabela do banco-->
<?php
// Check if user has requested to get detail
if (isset($_POST["get_data"]))
{
// Get the ID of customer user has selected
$id = $_POST["id"];
// Connecting with database
include '../../connection.php';
// Getting specific customer's detail
$sql = "SELECT * FROM po, po_materials WHERE po.po_number = po_materials.po_number_material AND id_po = '$id'";
$result = mysqli_query($connection, $sql);
$array = mysqli_fetch_array($result);
// Important to echo the record in JSON format
echo json_encode($array);
// Important to stop further executing the script on AJAX by following line
exit();
}
?>
<!-- Modal para vizualização -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-hidden = "true" style="margin-top: 80px">
<div class = "modal-dialog">
<div class = "modal-content" style="width: 700px; margin-left: -18%">
<div class = "modal-header">
<h4 class = "modal-title">
Purchase Order View
</h4>
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
</div>
<div id = "modal-body" style="margin-left: 20px">
Press ESC button to exit.
</div>
<div class = "modal-footer">
<a href="view_po.php?id=<?php echo $id_po ?>" role="button"
class="btn btn-dark btn-sm"><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
<path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
</svg> Open Orther Page</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--Script para mostrar as informações-->
<script>
function loadData(id) {
console.log(id);
$.ajax({
method: "POST",
data: {get_data: 1, id: id},
success: function (response) {
response = JSON.parse(response);
console.log(response);
var html = "";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Id Po</div>";
html += "<div class='col-md-6'>" + response.id_po + "</div>";
html += "</div>";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Po Number</div>";
html += "<div class='col-md-6'>" + response.po_number + "</div>";
html += "</div>";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Project</div>";
html += "<div class='col-md-6'>" + response.project + "</div>";
html += "</div>";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Project Units</div>";
html += "<div class='col-md-6'>" + response.project_units + "</div>";
html += "</div>";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Vendor</div>";
html += "<div class='col-md-6'>" + response.vendor + "</div>";
html += "</div>";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Ship To</div>";
html += "<div class='col-md-6'>" + response.ship_to + "</div>";
html += "</div>";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Po Date</div>";
html += "<div class='col-md-6'>" + response.po_date + "</div>";
html += "</div>";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Expected Date</div>";
html += "<div class='col-md-6'>" + response.expected + "</div>";
html += "</div>";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Document Name</div>";
html += "<div class='col-md-6'>" + response.po_document_name + "</div>";
html += "</div>";
html += "<div class='row'>";
html += "<div class='col-md-6' style='font-weight: bold;'>Stock Materials</div>";
html += "<div class='col-md-6'>" + response.stock + "</div>";
html += "</div>";
html += "<table id='table_id' class='table' style='text-align: center; width: 100%; table-layout:fixed'>";
html += "<thead>";
html += "<tr>";
//html += "<th scope='col'>Image</th>";
html += "<th scope='col'>Material Name</th>";
//html += "<th scope='col'>Quantity</th>";
//html += "<th scope='col'>Um</th>";
//html += "<th scope='col'>Rate</th>";
//html += "<th scope='col'>Amount</th>";
html += "</tr>";
html += "</thead>";
const occurrence = 1 + (response.stock.match(/,/g) || []).length;
html += "<tr>";
//html += "<td style='vertical-align: inherit; word-wrap:break-word'><img style='max-width: 80px; height: 70px; border-radius: 6px' src='../material/imgmaterials/"+response.stock_name+".jpg'/></td>";
html += "<td style='vertical-align: inherit; word-wrap:break-word'> "+ response.stock_name +" </td>";
//html += "<td style='vertical-align: inherit; word-wrap:break-word'> "+ element.response.stock_quantity +" </td>";
//html += "<td style='vertical-align: inherit; word-wrap:break-word'> "+ element.response.um +" </td>";
//html += "<td style='vertical-align: inherit; word-wrap:break-word'> "+ element.response.stock_rate +" </td>";
html += "</tr>";
// And now assign this HTML layout in pop-up body
$("#modal-body").html(html);
$("#myModal").modal();
}
});
}
</script>