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.
Rispondi quotando