Display MySQL inside modal

Question

Display MySQL inside modal

Navigation

#1 by (2 votes)

1

I'm developing a new ordering system in PHP that works as follows:

The user uploads the requests, which are stored in a MySQL table called requests ;
After uploading, the user can change the status of these requests through script in PHP that make the UPDATE of the table requests ;
Each change is saved through a trigger in a table called logs ;
Orders have a unique and unique number that does not repeat.

I could create a link in the request number, for example, that invokes a modal, and within this modal view the changes that are in the logs table only of that number Clicked Order?

displaying MySQL data on the page:

    $result = mysqli_query($connect, "SELECT * FROM 'pedidos'");

    echo "<div style='height: 70%;'><table border='1' id='pedidos' class='table table-responsive'>
    <tr>
    <th><input type='checkbox' name='select-all' id='select-all' /></th>
    <th>Data de emissão</th>
    <th>EMS</th>
    <th>Pedido do  cliente</th>
    <th>Cliente</th>
    <th>Valor do pedido</th>
    <th>Status</th>
    <th>Nota Fiscal</th>
    </tr>";

    while($row = mysqli_fetch_array($result))
    {

    echo "</ul>";
      echo "<tr>";
      echo "<td><input name='checkbox[]' type='checkbox' value=" . $row['id'] . "></td>";
      echo "<td>" . $row['emissaoPed'] . "</td>";
      echo "<td><a data-toggle='modal' href='#myModal'>" . $row['nPedido'] . "</a></td>";
      echo "<td>" . $row['NrPedido'] . "</td>";
      echo "<td>" . $row['nomeAbrev'] . "</td>";
      echo "<td>" . $row['vlr'] . "</td>";
      echo "<td>" . $row['status'] . "</td>";
      echo "</tr>";
    }
    echo "</table>";
    echo "</form></div>";

I made the following query to bring the order by the order number:

$result = mysqli_query($connect, "SELECT * FROM 'logs' where nPedido IN (34366)");

However, I do not know how to replace the order number that is defined in the query with the requested order number.

php mysql html bootstrap

asked by anonymous 27.05.2017 / 03:08

1 answer

Session Error - Permission denied - sites on different ports Problem with Javascript Method Return

score 2 · Accepted Answer

It is possible and simple. For this you will use the $.ajax() function of jQuery.

1 - create a list of the products of the database and link the ID of each product in a link, something like:

    $result = mysqli_query($connect, "SELECT * FROM 'pedidos'");

        echo "<div style='height: 70%;'><table border='1' id='pedidos' class='table table-responsive'>
        <tr>
        <th><input type='checkbox' name='select-all' id='select-all' /></th>
        <th>Data de emissão</th>
        <th>EMS</th>
        <th>Pedido do  cliente</th>
        <th>Cliente</th>
        <th>Valor do pedido</th>
        <th>Status</th>
        <th>Nota Fiscal</th>
        </tr>";

        while($row = mysqli_fetch_array($result))
        {

        echo "</ul>";
          echo "<tr>";
          echo "<td><input name='checkbox[]' type='checkbox' value=" . $row['id'] . "></td>";
          echo "<td>" . $row['emissaoPed'] . "</td>";
          echo "<td><a id='ver_pedido' data-ref=".$row['nPedido']." href='javascript:void(0)'>" . $row['nPedido'] . "</a></td>";
          echo "<td>" . $row['NrPedido'] . "</td>";
          echo "<td>" . $row['nomeAbrev'] . "</td>";
          echo "<td>" . $row['vlr'] . "</td>";
          echo "<td>" . $row['status'] . "</td>";
          echo "</tr>";
        }
        echo "</table>";
        echo "</form></div>";

2 - Get the clicked link ID:

jQuery

$('a#ver_pedido').click(function(){

    let id_pedido = $(this).attr('data-ref');

    $.ajax({
        url: 'pagina_detalhada.php',
        data: {id: id_pedido},
        type: 'POST',

        success: function(response){

            $('#div_dentro_modal').empty();
            $('#div_dentro_modal').html(response);
            $('#abremodal').click();
        }
    });
});

3 - Create a link with the settings to open the modal (you can place this link in any part of HTML except in PHP loops):

<a data-toggle='modal' id="abremodal" href='#myModal'></a>

4 - Within your modal, create a div and put the same ID you put in the success function of jQuery, in my case:

<div id="div_dentro_modal"></div>

5 - Create the page you passed in the parameter url of $.ajax() and in it, get the request ID clicked and mount an HTML to display in the modal, something like:

page_detail.php

<?php
$id_pedido = $_POST['id'];
$result = mysqli_query($connect, "SELECT * FROM 'logs' where nPedido IN ('".$id_pedido."')");

//.... Restante do código, após obter o resultado de um "echo" para enviar ao modal

NOTE: Do not forget step 4, it is very important to display information in the modal