Visualizzare tabella all'interno finestra modal

[Luca Ambrosini]

Ciao a tutti,
stasera vorrei porvi questo problema a cui non sono riuscito a dare una soluzione.
Cerco di sviluppare un app web per gestire il magazzino cancelleria della mia azienda.
All'interno dell'applicazione vorrei creare un sezione riservata ai colleghi per la richiesta di materiale di cancelleria
che una volta compilata verrà inviata al magazzino che la gestisce per la consegna del materiale richiesto.
Ho realizzato il database su mysql ed ho creato, al suo interno una tabella "Richieste" ed una tabella "dettaglio_richieste"
Nella prima memorizzo i dati della richiesta (Cognome e nome del richiedente, ufficio di appartenenza, tipologia di materiale).
Nella seconda tabella, invece, memorizzo l'id della richiesta, id_articolo, la q.ta richiesta e l q.ta fornita.
Sono riuscito a realizzare la prima parte, cioè quella dell'inserimento dati della richiesta, ma non riesco a gestire bene, la
seconda parte, cioè quella relativa al dettaglio degli articoli richiesti (in buona sostanza...una sorta di carrello).
Ho provato a realizzare la parte relativa alla sola visualizzazione di una richiesta con i dettagli mediante l'inserimento di
una finestra modal ma il risultato ottenuto è MOLTO deludente ... la tabella non entra nei limiti del modal e
nella tabella non mi vengono visualizzati tutte le righe relative a quella singola richiesta.
vi riporto qui di seguito il codice della finestra modal-detail con una schermata del risultato ottenuto.
Naturalmente ... ho inserito una query INNER JOIN per la selezione degli articoli appartenenti alla richiesta selezionata.

<!-- Detail Model -->

<div class="modal fade bd-example-modal-lg" id="detail<?php echo $row['id']; ?>" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<center><h3 class="modal-title" id="myLargeModalLabel">Visualizza richiesta</h3></center>
</div>

<div class="modal-body">

<?php
$edit=$mysqli->query("select * from richieste where id=".$row['id']);
$erow=$edit->fetch_assoc();
?>
<div class="container-fluid">
<form method="POST" action="update.php?id=<?php echo $erow['id']; ?>"
enctype="multipart/form-data">

<!--blocco corpo 1^ riga-->
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-2" align="left">
<label class="control-label" style="position:relative; top:0px;">Richiesta n.:</label>
</div>
<div class="col-lg-2" align="left">
<?php echo $erow['id']; ?>
</div>

<div class="col-lg-2" >
<label style="position:relative; top:0px;">Tipo richiesta:</label>
</div>
<div class="col-lg-2" >
<?php echo $erow['tipo_richiesta']; ?>
</div>

<div class="col-lg-2" >
<label style="position:relative; top:0px;">Data richiesta:
</div>
<div class="col-lg-2" >
<?php echo $erow['data_richiesta']; ?></label>
</div>
</div>

<!--blocco corpo 2^ riga-->
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-2" align="left">
<label class="control-label" style="position:relative; top:0px;">Data invio:</label>
</div>
<div class="col-lg-2" align="left">
<?php echo $erow['data_invio']; ?>
</div>

<div class="col-lg-2" align="left">
<label class="control-label" style="position:relative; top:0px;">Data chiusura:</label>
</div>
<div class="col-lg-2" align="left">
<?php echo $erow['data_chiusura']; ?>
</div>


<div class="col-lg-2" align="left">
<label class="control-label" style="position:relative; top:0px;">Richiedente:</label>
</div>
<div class="col-lg-2" align="left">
<?php echo $erow['richiedente']; ?>
</div>
</div>

<!--blocco corpo 3^ riga-->
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-2" align="left">
<label class="control-label" style="position:relative; top:0px;">Area:</label>
</div>
<div class="col-lg-2" align="left">
<?php echo $erow['area']; ?>
</div>

<div class="col-lg-2" align="left">
<label class="control-label" style="position:relative; top:0px;">Servizio:</label>
</div>
<div class="col-lg-6" align="left">
<?php echo $erow['servizio']; ?>
</div>
</div>

<!--blocco corpo 4^ riga-->
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-1" align="left">
<label class="control-label" style="position:relative; top:0px;">Unità:</label>
</div>
<div class="col-lg-1" align="left">
<?php echo $erow['uo']; ?>
</div>

<div class="col-lg-1" align="left">
<label class="control-label" style="position:relative; top:0px;">Stato:</label>
</div>
<div class="col-lg-1" align="left">
<?php echo $erow['stato_richiesta']; ?>
</div>

<div class="col-lg-2" align="left">
<label class="control-label" style="position:relative; top:0px;">Note richiesta:</label>
</div>
<div class="col-lg-6" align="left">
<?php echo $erow['note']; ?>
</div>
</div>

<!--body style="margin:0x auto"-->

<div class="container">
<div class="row header col-xs-20" style="text-align:left;"font-family:verdana";"font-size:10px">
<span class="pull-left">
<a href="#addnew" data-toggle="modal" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-plus"></span> Aggiungi richiesta</a></span>
<center><h4 class="text" ><b>LISTA ARTICOLI INSERITI </b></h4></center>
<div style="height:0px;"></div>

<table class="table table-striped table-bordered table-responsive table-hover"
id="empTable">
<thead>
<!--th><center>Id</center></th-->
<th><center>Id</center></th>
<th><center>richiesta</center></th>
<th><center>Articolo</center></th>
<th><center>q.ta rich</center></th>
<th><center>q.ta forn</center></th>
<!--th><center>Note richiesta</center></th-->
<th><center>Azione</center></th>
</thead>
<tbody>
<?php
include('database.php');
$result=$mysqli->query("SELECT * FROM dettaglio_richieste
INNER JOIN richieste ON dettaglio_richieste.id_richiesta=richieste.id ");
while($row=$result->fetch_assoc()){
?>
<tr>
<!--td> <img src='<?php echo $img ?>' height="50px" width="70px" /></td-->
<td><font size = 2><?php echo $row['id']; ?></font></td>
<td><font size = 2><?php echo $row['id_richiesta']; ?></font></td>
<td><font size = 2><?php echo $row['id_articolo']; ?></font></td>
<td><font size = 2><?php echo $row['qta_richiesta']; ?></font></td>
<td><font size = 2><?php echo $row['qta_fornita']; ?></font></td>
<!--td><font size = 2><?php echo $row['dettaglio_richieste.note']; ?></font></td-->

<td>
<!--
<a href="#detail<?php echo $row['id']; ?>"
data-toggle="modal" class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-search">
</span></a>&nbsp;

<a href="#edit<?php echo $row['id']; ?>"
data-toggle="modal" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-pencil">
</span> </a>&nbsp;
-->
<a href="#del<?php echo $row['id']; ?>"
data-toggle="modal" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash">
</span> </a>

<!-- include edit modal -->
<?php include('show_detail_modal.php'); ?>
<!-- End -->
<!-- include edit modal -->
<?php include('show_edit_modal.php'); ?>
<!-- End -->
<!-- include delete modal -->
<?php include('show_delete_modal.php'); ?>
<!-- End -->
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- include insert modal -->
<?php include('show_add_modal.php'); ?>
<!-- End -->
</div>
<!--/body-->



<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Annulla</button>

 
</div>
</form>
</div>
</div>
</div>
<!-- /.modal -->

Chiedo a voi di darmi una mano per risolvere il problema e proseguire nel lavoro di completamento del mio progetto.
Un grazie anticipato a tutti coloro che vogliono/possono dare una mano.
Luca

 

[marino51]

nel codice sotto riportato, i tag sono posizionati male,
rivedi il tuo codice organizzandolo meglio per capire dove ci possono essere problemi

                <div class="col-lg-2" >
                  <label style="position:relative; top:0px;">Tipo richiesta:</label>
                </div>
                <div class="col-lg-2" ><?php echo $erow['tipo_richiesta']; ?></div>

                <div class="col-lg-2" >
                  <label style="position:relative; top:0px;">Data richiesta:
                </div>
                <div class="col-lg-2" >
<?php echo $erow['data_richiesta']; ?></label>
</div>
</div>

<!--blocco corpo 2^ riga-->

mi sono fermato qui con il controllo, se dovessi avere ancora problemi, posta anche il css

 

[Luca Ambrosini]

nel codice sotto riportato, i tag sono posizionati male,
rivedi il tuo codice organizzandolo meglio per capire dove ci possono essere problemi
....
mi sono fermato qui con il controllo, se dovessi avere ancora problemi, posta anche il css

Ciao Marino51 e grazie di aver risposto al mio post.
Ho seguito il tuo consiglio ed ho riorganizzato il codice postato prima.
Spero che adesso sia più leggibile, così potrai analizzarlo e consigliarmi cosa correggere_
ecco il codice riorganizzato:
-allego file php supera il 10000 caratteri.

Ti allego una immagine dei css che utilizzo.
Grazie ancora Marino51
Luca

 

[marino51]

nella posizione che ti ho segnalato, ci sono dei tag posizionati male,
nello zip sono ancora posizionati male
sistemali e verifica se la visualizzazione funziona

 

[Luca Ambrosini]

nella posizione che ti ho segnalato, ci sono dei tag posizionati male,
nello zip sono ancora posizionati male
sistemali e verifica se la visualizzazione funziona

Ciao Marino51
forse non ho inteso cosa intendi per "riorganizzare" il codice:
forse in questo modo?:

                        <!--blocco corpo 1^ riga-->
                        <div style="height:10px;"></div>
                        <div class="row">
                            <div class="col-lg-2" align="left">
                                <label class="control-label" style="position:relative; top:0px;">Richiesta n.:</label>
                            </div>
                            <div class="col-lg-2" align="left">
                        <?php echo $erow['id']; ?>
                            </div>

                            <div class="col-lg-2" >
                                <label style="position:relative; top:0px;">Tipo richiesta:</label>
                            </div>
                            <div class="col-lg-2" >
                        <?php echo $erow['tipo_richiesta']; ?>
                            </div>

                            <div class="col-lg-2" >
                                <label style="position:relative; top:0px;">Data richiesta:
                            </div>
                            <div class="col-lg-2" >
                        <?php echo $erow['data_richiesta']; ?></label>
                            </div>
                        </div>

                        <!--blocco corpo 2^ riga-->

Ciao e grazie ancora per il tuo aiuto
Luca
PS: Sono un principiante nella programmazione, quindi ti chiedo, cortesemente, di avere pazienza .... voglio imparare ... naturalmente sbattendo il muso contro il muro !