Ok, was ich habe, ist eine MySQL-Datenbank und ich benutze PHP, um es in einer HTML-Tabelle zu meinem Browser auszugeben. Jede Zeile hat eine Bearbeitungsschaltfläche, und ich konnte einen mysql-Wert (lead_id) an das Modal übergeben, kann aber nicht herausfinden, wie der Rest der Daten abgerufen werden kann und ob CRUD innerhalb des Modales möglich ist. Ich habe viele verschiedene Artikel und Foren darüber gelesen und sie alle scheinen eine Art von .ajax in der jQuery zu verwenden. Ich habe alle diese jQuery-Funktionen versucht, aber waren erfolglos. Vielleicht funktioniert das nicht mit 3.1.1? IDK.Übergeben Sie MySQL-Zeilendaten zum Bootstrap-Modal
Wenn mir jemand mit dem .ajax Call und dem JQuery Teil helfen könnte, dann scheint das mein größter Kampf zu sein. Ich bin auch in Ordnung mit PHP, aber ich bin mir nicht sicher, wie die PHP-Datei für den .ajax Aufruf aussehen würde.
Unten ist mein Code.
<?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"] ."\" id=\"". $row["lead_id"] ."\">Edit</button></td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
</div>
</div>
</div>
</div>
</section>
</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-->
<!-- 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">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="thebody">
<p>One fine body…</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 -->
Dies ist, wo ich mein Problem des Gefühl ist:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data('id');
var modal = $(this)
$.ajax({
type: "POST",
url: "selecta.php",
data: {id:id},
success: function(data){
$('.modal-body').html();
$('#myModal').modal("show");// this triggers y
modal.find('.modal-title').text('Lead Number ' + id)
modal.find('.modal-body input').val(id)
})
})
})
</script>
</body>
</html>
This is the result I get when the jQuery $.ajax function is run Aus irgendeinem Grunde die Führung Nummer an den modalen nicht
Nun, wenn ich den Kommentar aus geben jQuery, das Modal lädt mit der Lead-Nummer, wie dieses Bild zeigt. enter image description here
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data('id');
var modal = $(this);
/*$.ajax({
type: "POST",
url: "selecta.php",
data: {id:id},
success: function(data){
$('.modal-body').html();
$('#myModal').modal("show");// this triggers y*/
modal.find('.modal-title').text('Lead Number ' + id)
modal.find('.modal-body input').val(id)
})
Was ist das Problem? Irgendwelche Fehler? – Tony
sollten Sie 'mysqli_fetch_assoc()' nicht zweimal verwenden. –
hast du das schon http://stackoverflow.com/q/43011591/1415724 gefragt und eine Antwort angenommen? was ist anders als dieser? –