Bootstrap Modal Con scorrimento di campi di database errato.

**Timely** · 11-06-2019, 10:48

Ciao a tutti. Sto cercando di creare un modal bootstrap con uno scorrimento dei campi del database. Lo scorrimento della tabella funziona, ma quando vado a richiamare il modal con i rispettivi bottoni lo scorrimento fallisce.
Ecco il codice php e html usato:
<?
session_start();
require ('stage_header2.php');
?>

<html>
<head>
<title>Elenco stagisti</title>
</head>
<body>
<?
/* dichiariamo alcune importanti variabili per collegarci al database */
$DBhost = "localhost";
$DBuser = "root";
$DBpass = "devprato";
$DBName = "stage";
/* specifichiamo il nome della nostra tabella */
$table = "studente";
/* Connettiamoci al database */
mysql_connect($DBhost,$DBuser,$DBpass) or die("Impossibile collegarsi al server");
@mysql_select_db("$DBName") or die("Impossibile connettersi al database $DBName");
/* impostiamo la query */
$sqlquery = "SELECT * FROM $table ORDER BY id ";
$result = @mysql_query($sqlquery);
$number = mysql_num_rows($result);

mysql_close();
?>
<table align="right">
<td>
<img src="bomba.jpg" border=0 /><a href='exportStagisti.php'>Esporta Dati in Excel</a>
</td>
</table>
</br>
<html>
<head>
<link href="/rubricaPA/table.css" rel="stylesheet" type="text/css">

<head>
<title>Home - Stagisti</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/boot...tstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/lib...n.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/boot...n.js"></script>
<script type="text/javascript" src="/lib/javascript/calendario/ts_picker.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/boot...tstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/lib...n.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/boot...n.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/boot...tstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/lib...n.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/boot...n.js"></script>
<script src="js/tether.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/boot...tstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/c...tstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/responsiv...tstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 40spx;
border-radius: 0;
}

/* Remove the jumbotron's default bottom margin */
.jumbotron {
background-image: url("prova2.jpg");
width:100%;
background-size: cover;
background-repeat:no-repeat;
margin:auto;
text-align:centre;
margin-bottom: 0;
height:320px;
}

/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
#sfondo{

width:50%;
margin:auto;
background-color:lightblue;
border-radius:10px;
opacity: 0.8;color: black;

}
input[type=text] {
width: 150px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}

</style>
<SCRIPT TYPE="text/javascript">
$(document).ready(function() {
$.datepicker.setDefaults($.datepicker.regional["it"]);
var currentDate = new Date();
$("#DataNascita").datepicker({dateFormat: "dd-mm-yy", showOn: "both", buttonImage: "images/cal.gif", buttonImageOnly: true, buttonText: "Apri Calendario"});
$("#DataNascita").datepicker("setDate",currentDate );
</SCRIPT>

</head>

</head>
<body>
<div class="container">
<div class="main">
<h2>Elenco Stagisti</h2>
</br>
<form id="form1" name="form1" method="post" action="ricerca.php?" style="border-radius:10px;">
<input type="text" name="search" placeholder="Ricerca ">
</form>
</br>
<div class="container">

<table class="table table-striped">
<thead>
<tr>
<th>Nome</th>
<th>Cognome</th>
</tr>
</thead>
<tbody>
<tr>
<?php
if($number<1){
print "<center><p>La ricerca non ha prodotto nessun risultato</p></center>";
}else{
$i = 0;
while ($number > $i ) {
$Nome = mysql_result($result,$i,"Nome");
$Cognome = mysql_result($result,$i,"Cognome");

?>
<td> <?php echo $Nome; ?></td>
<td> <?php echo $Cognome;?></td>

<td> <button onclick="document.getElementById('2').style.displa y='block'" class="btn btn-success"data-toggle="modal" data-target="#myModal"> Visualizza <? echo $Nome1;?></button></td>
<td> <button onclick="document.getElementById('2').style.displa y='block'" class="btn btn-warning"data-toggle="modal" data-target="#myModal">Modifica</button></td>
<td> <button onclick="document.getElementById('2').style.displa y='block'" class="btn btn-danger"data-toggle="modal" data-target="#myModal">Elimina</button></td>

</tr>

<div id="2"class="w3-modal" >
<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:400px">
<div style="width:80%;margin:auto;padding:10px;">
<div class="w3-center"><br>
<span onclick="document.getElementById('2').style.displa y='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">×</span>
<img src="img_avatar4.png" alt="Avatar" style="width:25%" class="w3-circle w3-margin-top">
</div>

<div class="w3-section">
<label><b>Nome <?php echo $Nome; ?></b></label>
</br>
<label><b>Cognome <?php echo $Cognome; ?></b></label>

<button class="w3-button w3-block w3-green w3-section w3-padding" type="submit">Login</button>
</div>
</div>
</div>
</div>

<?
$i++;
}
}
?>

</tbody>
</table>
</div>

</div>
<br><br><br>

<div id="footer">
<p id="legal">©2018 Intranet della Prefettura di Prato. All Rights Reserved. | Designed by Ufficio Informatico</p>
</div>
</div>
</body>
</html>

In allegato gli screenshot del risultato finale.
Perché non funziona?

Grazie in anticipo per un eventuale risposta.

**Vincent.Zeno** · 12-06-2019, 10:06

ciao timely e benvenuto,
in questo contesto ci interessa solo in codice html.

mi sembra ci siano errori gravi di marcatura ma, per essere sicuri, posta nuovamente il codice che viene effettivamente mandato al client (non tutto il codice del file in questione).

quando posti codice sul forum ricorda di inserirlo nel tag CODE (vedi tasto cancelletto).

**Timely** · 12-06-2019, 11:19

Originariamente inviata da Vincent.Zeno

ciao timely e benvenuto,
in questo contesto ci interessa solo in codice html.

mi sembra ci siano errori gravi di marcatura ma, per essere sicuri, posta nuovamente il codice che viene effettivamente mandato al client (non tutto il codice del file in questione).

quando posti codice sul forum ricorda di inserirlo nel tag CODE (vedi tasto asterisco).

Chiedo scusa...è il primo post che faccio e non sapevo bene dove inserirlo.
Non ho capito cosa devo postare?
Errori di marcatura? In che senso

**Vincent.Zeno** · 12-06-2019, 11:25

Originariamente inviata da Timely

Chiedo scusa...è il primo post che faccio e non sapevo bene dove inserirlo.
Non ho capito cosa devo postare?
Errori di marcatura? In che senso

la sezione è corretta
il codice che spedisci al browser, solo quello (cioè quello che vedi leggendo l'html di una pagina sul browser)
nel senso che la marcatura è (mi pare) sbagliata, vedi HyperText Markup Language

**Timely** · 12-06-2019, 11:31

codice:

<div class="container">
 <div class="main">
  <h2>Elenco Stagisti</h2>
  </br>
  <input class="form-control" id="myInput" type="text" placeholder="Ricerca..">
  </br>
 <div class="container">
           
  <table class="table table-striped">
   <thead>
    <tr>
     <th>Nome</th>
     <th>Cognome</th>
     <th></th>
     <th></th>
     <th><button class="button button5" style="float:right" onclick="document.getElementById('3').style.display='block'">+</button></th>
    </tr>
   </thead>
  <tbody id="myTable">
    <tr>
     <?php
      if($number<1){
      print "<center><p>La ricerca non ha prodotto nessun risultato</p></center>";
      }else{
       $i = 0;
       while ($number > $i ) {
       $Nome = mysql_result($result,$i,"Nome");
       $Cognome = mysql_result($result,$i,"Cognome");
       $Eta = mysql_result($result,$i,"Eta");
       $DataNascita = mysql_result($result,$i,"DataNascita");
       $Sesso = mysql_result($result,$i,"Sesso");
       $CodFisc = mysql_result($result,$i,"CodiceFiscale");
       $IndCiv = mysql_result($result,$i,"IndirizzoCivico");
       $NumCiv = mysql_result($result,$i,"NumeroCivico");
       $Telefono = mysql_result($result,$i,"Telefono");
       $Cell = mysql_result($result,$i,"Cellulare");
       $Email = mysql_result($result,$i,"Email");
       $Scuola = mysql_result($result,$i,"Scuola");
       $Special = mysql_result($result,$i,"Specializzazione");
       $Classe = mysql_result($result,$i,"Classe");
     ?>
     
     
     <td>  <?php echo $Nome; ?></td>       <!--Stampo nome e cognome dal database per ogni riga della tabella--> 
     <td>  <?php echo $Cognome;?></td>        
 <!----------------------------------------------------------BOTTONI CHE RICHIAMANO IL MODAL----------------------------------------------------------------->
     <td>  <button onclick="document.getElementById('2').style.display='block'" class="btn btn-success">Visualizza</button></td>
     <td> <button onclick="document.getElementById('2').style.display='block'" class="btn btn-warning">Modifica</button></td>
     <td>  <button onclick="document.getElementById('2').style.display='block'" class="btn btn-danger">Elimina</button></td>
        
 
    </tr>
 <!----------------------------------------------------------MODAL----------------------------------------------------------------->

  <div id="2" class="w3-modal">
    <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:600px">
      <header class="w3-container w3-light-green"> 
        <span onclick="document.getElementById('2').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2><?php echo $Nome; ?> <?php echo $Cognome;?> </h2>
      </header>
      <div class="w3-container w3-padding-16">
        <p>Nome: <?php echo $Nome; ?></p>
        <p>Cognome:  <?php echo $Cognome; ?></p>
  <p>Eta:  <?php echo $Eta; ?></p>
  <p>Data di nascita:  <?php echo $DataNascita; ?></p>
  <p>Sesso:  <?php echo $Sesso; ?></p>
  <p>Codice fiscale:  <?php echo $CodFisc; ?></p>
  <p>Indirizzo civico:  <?php echo $IndCiv; ?></p>
  <p>Numero civico:  <?php echo $NumCiv; ?></p>
  <p>Telefono:  <?php echo $Telefono; ?></p>
  <p>Cellulare:  <?php echo $Cell; ?></p>
  <p>E-mail:  <?php echo $Email; ?></p>
  <p>Scuola:  <?php echo $Scuola; ?></p>
  <p>Specializzazione:  <?php echo $Special; ?></p>
  <p>Classe:  <?php echo $Classe; ?></p>
      </div>
      <footer class="w3-container w3-border-top w3-padding-16 w3-light-grey">
        <button onclick="document.getElementById('2').style.display='none'" type="button" class="w3-button w3-red">Cancel</button>
      </footer>
    </div>
  </div>
</div>
  <?
  $i++;
  }
  }
  ?>
</div>
  </tbody>
  </table>
 </div>
<!----------------------------------------------------------FINE TABELLA----------------------------------------------------------------->

 <!----------------------------------------------------------TOP----------------------------------------------------------------->
   <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

 
 </div>
 <br><br><br>
 <!----------------------------------------------------------FINE PAGINA----------------------------------------------------------------->
 
</div>

**Vincent.Zeno** · 12-06-2019, 12:32

ci riprovo:
serve vedere, solo ed esclusivamente, il codice HTML completo inviato al browser.
compreso le istanze del doctype, html, head, body.
solo quello e nient'altro.

**Timely** · 12-06-2019, 13:55

Abbiamo risolto. Bastava inserire il valore <?=$i;?> nell'id del modal.
Grazie lo stesso

Discussione: Bootstrap Modal Con scorrimento di campi di database errato.

Strumenti discussione

Ricerca discussione

Visualizza

Bootstrap Modal Con scorrimento di campi di database errato.

Permessi di invio