Übergabe von Daten * an Bootstrap Modal

Ich habe die vielen Suchergebnisse für die Übergabe von Daten an ein Modal gesehen, alle mit möglichen, aber unterschiedlichen Lösungen. Ich habe eine MySql DB mit einer sehr einfachen einzelnen Tabelle. Ich verwende PHP Echo, um die Daten in eine HTML-Tabelle zu übertragen. Die letzte <td> ist eine Bootstrap-Taste, um ein Modal auszulösen. Ich bin nicht in der Lage, den eingeschlossenen Code zu erhalten, um die Zeilendaten im Modal anzuzeigen.Übergabe von Daten * an Bootstrap Modal

Es gibt eine Menge Kommentare hier, während ich lerne.

<?php 
/* mysql connect info */ 
$mysqlhost = ''; 
$mysqlusername = ''; 
$mysqlpassword = ''; 
$mysqldb = ''; 
?> 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Website | Login</title> 
<link href="css/bootstrap.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet"> 

<?php  
$mysqli = new mysqli($mysqlhost, $mysqlusername, $mysqlpassword, $mysqldb); 

if (mysqli_connect_errno()) 
{ 
echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 

$sql="SELECT * FROM leads"; 
$result=mysqli_query($mysqli,$sql); 

// Associative array 
$row=mysqli_fetch_assoc($result); 
?> 

<nav class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <h1> 
    <a class="navbar-brand" href="#"> 
    <span class="glyphicon glyphicon-th-list" aria-hidden="true"> 
    </a> 
    </h1> 
</div> 
</div> 
</nav> 

<header id="header"> 
<div class="container-fluid"> 
<div class="row"> 
    <div class="col-md-12"> 
    </div> 
</div> 
</div> 
</header> 

<!-- Beginning of Sections --> 
<section id="main"> 
<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-12"> 
<div class="container"> 

<table class="table table-striped"> 
<thead> 
    <tr> 
    <!--<th>Lead Number</th>--> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Moving Date</th> 
    <th>eMail</th> 
    <th>Phone</th> 
    <th>From</th> 
    <th>To</th> 
    <th>Moving Size</th> 
    <!--<th>IP Address</th>--> 
    <!--<th>Source</th>--> 
    <th>Submission Time</th> 
    <th>Actions</th> 
    </tr> 
    </thead> 
    <tbody> 


<?php 
while($row=mysqli_fetch_assoc($result)) 
{ 
echo "<tr>"; 
/*echo "<td>" . $row["lead_id"] ."<td>";*/ 
echo "<td>" . $row["customer_first_name"] ."</td>"; 
echo "<td>" . $row["customer_last_name"] ."</td>"; 
echo "<td>" . $row["moving_date"] ."</td>"; 
echo "<td>" . $row["customer_email"] ."</td>"; 
echo "<td>" . $row["customer_phone"] ."</td>"; 
echo "<td>" . $row["customer_from_zip"] ."</td>"; 
echo "<td>" . $row["customer_to_zip"] ."</td>"; 
echo "<td>" . $row["customer_moving_size"] ."</td>"; 
/*echo "<td>" . $row["customer_ip_address"] ."<td>";*/ 
/*echo "<td>" . $row["lead_handle"] ."</td>";*/ 
echo "<td>" . $row["sent_date"] ."</td>"; 
echo "<td> <button type=\"button\" class=\"btn btn-primary btn-sm\ data-toggle=\"modal\" data-target=\"#myModal\" data-id=\"". $row["lead_id"]."\">Edit</button></td>"; 
echo "</tr>"; } 
echo "</tbody>"; 
echo "</table>"; 

?> 


<!-- Button trigger modal --> 

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


</section> 



<footer id="footerindex"> 
<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12">  
    </div> 
</div> 
</footer> 

</div> 









<!-- Bootstrap core JavaScript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<!-- this is google jquery library--> 

<script src="js/jquery-3.1.1.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/my.js"></script> 
<!-- This is the functionality of the login screen --> 

<!-- at one point the drop down was not working because we did not include the bootstrap.js which much come after the initial include to the jquery library--> 

<script type="text/javascript" src="/js/jquery-3.1.1.js"> 

$('#myModal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) 
    var id = button.data('id') 
    var modal = $(this) 
    modal.find('.modal-title').text('Lead Number ' + id) 
    modal.find('.modal-body input').val(recipient) 
}) 

</script> 



<!-- MODAL BEGIND --> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"> 
<div class="modal-dialog" role="document"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title">Modal title</h4> 
    </div> 
    <div class="modal-body1"> 
    <p>One fine body&hellip;</p> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

</body> 
</html>

Auch können Sie mir mitteilen, wenn Sie jQuery-Skripte innerhalb des html hinzufügen können und überschreiben sie die andere Jquery für das die modale aktiviert?

Quelle

2017-03-25 Chris W.

Es ist gut, den Code durch Verwendung von Einzug gut sauberer zu halten.
<script ~~> ist auch ein Tag wie div, p, h1 aber es hat display: none. So können Sie natürlich <script> Tag in HTML-Datei hinzufügen. Es ist in Ordnung.
Wenn der Browser die <script src = "jquery.js"> erfüllt, erhält der Browser den jquery.js-Code vom Server (in diesem Fall Ihr Server). Also, Sie können anderen js-Code nicht überschreiben. Es ist nur zweimal die Arbeit für den Browser, und der Jquery-Code wird zweimal gelesen.
Ich kann nicht verstehen, was Sie tun, insbesondere die <script type="text/javascript" src="/js/jquery-3.1.1.js"> Code. Sie haben jquery-3.1.1.js bereits oben eingeschlossen! warum machen Sie das?
Wie auch immer, der Browser kann #myModal nicht im Timing (oder in der Zeit?) Finden, in dem der Code $ ('# myModal') eingelesen wurde ('show.bs.modal', function (event) {~~. so sollte der Code sein unter das Modell div.

Be Happy Coding ^^.

Quelle

2017-03-25 02:24:09 RPF

Danke. ich die Antwort zu schätzen und helfen. Sie haben mein Problem zu lösen. das Problem, das ich hatte mit den Einrückungen ist, wenn ich den Code kopieren/einfügen - ich musste 4 Leerzeichen auf jeder Zeile setzen, damit es als Code für die Frage erscheint ein besserer Weg, dies zu tun? Danke noch einmal. –

Es ist von Fall zu Fall, welche Gedanken Sie verwenden. Aber normalerweise 4 Gedanken oder 2 Gedanken! . – RPF

Übergabe von Daten * an Bootstrap Modal

Antwort

Verwandte Themen