Auffüllen Bootstrap modal w/ sql aus der Tabelle Zeile klicken
Habe ich schon die ganze Woche und schließlich aufgegeben und beschlossen, zu Fragen, völlig. Was ich habe, ist eine Liste der offenen Aufträge in einer bootstrap-Tabelle wird aufgefüllt, über eine mysql-Abfrage. Wenn eine Zeile angeklickt wird, ein Modell erscheint und zeigt die details des Auftrags. Die Benutzeroberfläche funktioniert einwandfrei, aber jetzt, dass ich versucht habe, um die richtigen Daten zu zeigen, die in der modal, bin ich ratlos.
Von dem, was ich gelesen habe, scheint die Lösung in der Verwendung von AJAX, dem habe ich null Erfahrung mit. Ich kann nicht scheinen, um herauszufinden, von Lesen durch andere Lösungen und tutorials, wenn ich meine modale Informationen, sql-Abfrage, oder beide werden auf einer separaten Seite. Hier ist mein Ausgangscode:
jobs.php
<table class="table table-hover" data-link="row">
<thead>
<tr>
<th>Job #</th>
<th>Quote #</th>
<th>Date Started</th>
<th>Customer Name</th>
<th>Description</th>
<th>Amount</th>
<th>Date Completed</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysqli_fetch_array($jobs)) {
//Print out the contents of the entry
echo '<tr>';
echo '<td><a href="" data-toggle="modal" data-target="#jobModal" ></a>' . $row['id'] . '</td>';
echo '<td>' . $row['quote'] . '</td>';
echo '<td>' . $row['started'] . '</td>';
echo '<td>' . $row['customer'] . '</td>';
echo '<td>' . $row['description'] . '</td>';
echo '<td>$' . $row['amt'] . '</td>';
echo '<td>' . $row['status'] . '</td>';
echo '</tr>';
}
?>
</tbody>
</table>Modal - Auch in jobs.php (ignorieren Sie den Platzhalter, Sie wird ersetzt werden durch php-Variablen, wenn ich Dinge, die Arbeits -)
<div class="modal fade" id="jobModal" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="jobModalLabel"><strong>Job <?php echo $row['id']; ?></strong></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-2">
Quote #
</div>
<div class="col-lg-2">
PO # 1234567
</div>
<div class="col-lg-4">
Status: In Progress
</div>
<div class="col-lg-4 text-right">
Customer Name
</div>
</div>
<div class="row">
<div class="col-lg-4">
<br/>
Started: 03/01/2015
</div>
<div class="col-lg-4">
<br/>
Completed:
</div>
<div class="col-lg-4 text-right">
Primary Contact
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6 text-center">
<strong>PUMP SPECS</strong><br/><br/>
</div>
<div class="col-lg-6 text-center">
<strong>MOTOR SPECS</strong>
</div>
</div>
<div class="row">
<div class="col-lg-3">
Mfg: Taco
<br/><br/>
Size: 6x4
</div>
<div class="col-lg-3">
Mod: 54654856daf5
<br/><br/>
S/N: 54654856daf5
</div>
<div class="col-lg-2 border-left">
Mfg: Baldor
<br/><br/>
Frame: 215T
</div>
<div class="col-lg-2">
HP: 50
<br/><br/>
Encl: TEFC
</div>
<div class="col-lg-2">
RPM: 1800
<br/><br/>
Volts: 100
</div>
</div>
<div class="row"></div>
<div class="col-lg-2 col-lg-offset-6 border-left">
<br/>
Amps: 240/360
</div>
<div class="col-lg-4">
<br/>
S/N: 54654856daf5
</div>
<hr>
<div class="row">
<div class="col-lg-12">
<strong>Job Description:</strong>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Edit Job</button>
</div>
</div>
</div>
</div>Ab diesem Punkt, ist es trotzdem kann ich die id zu kommen, die durch den modal-Seite, so kann ich füllen Sie den rest der Informationen mit Hilfe von php, wie ich mit der original-Tabelle? Wenn ich tun müssen, um ajax verwenden, was ist der richtige Weg, um über das tun so gehen?
Wenn Sie möchten, speichern Sie die änderungen im modal, sollten Sie einen
form, die beginnt, bevor der erste input und Ende nach der button, dass durch die Art und Weise sollte type="submit" wenn Sie möchten, das Formular zu senden..Richtig, das modale sollte pop-up mit nur die Daten für die id. Keine änderungen vorgenommen werden müssen, um die Daten in der modal.
InformationsquelleAutor Andrea Stringham | 2015-03-06
Du musst angemeldet sein, um einen Kommentar abzugeben.
[BEARBEITET]
Wenn Sie versuchen, dies dann?
TABELLE ZU ÖFFNEN MODALS
MODALS
data-targetim link für den modalen Suche nach der ID (muss eindeutig sein), daher sollte man die$row['id']im modal-id (und Daten-Ziel), um anzugeben, welche modal, die Sie öffnen möchten. Am Ende haben Sie ein modal/Zeile aus der Datenbank. Wenn es gibt eine Menge von Zeilen, die Seite wird nehmen eine Menge Zeit zu laden. In diesem Fall sollten Sie verwendenAJAX. Denken Sie daran, dass die modals sind immer noch da, aber versteckt.Das macht sehr viel Sinn für mich, aber ich kann immer noch nicht Recht bekommen es richtig. Wenn ich kopiere deinen code, es sagt mir es ist ein Fehler mit der Tabelle, die Zeile, die Sie Gaben. Die Anführungszeichen um die id zu sein scheinen, dass einige Frage, und ich bin immer der Fehler: Parse error: syntax error, unexpected 'id' (T_STRING), expecting ',' or ';'
Ich schaffte es, eine Lösung zu finden ziehen die modalen Daten auf einer separaten Seite, die ich aufgefüllt, indem die job-id an die url, und verwenden Sie eine get-variable. Jedoch, ich glaube wirklich, dass deine Antwort funktioniert hätte, und es war genau das, was ich suchte, als ich gepostet. Vielen Dank für Ihre Hilfe.
PS: auch nicht optimal, wenn die Tabelle 1000 Zeilen, erzeugen 1000 modals? Nein, ich bin zu lernen, Datenbindung -wie knockoutjs - und Sie sollten auch diesen Weg gehen
wenn Sie 1000 Zeilen, Sie könnten eine einfache Seite-Funktion, die mit SQL
limitoder Sie erhalten die Daten, wenn der Benutzer fragt nach dem modal. Ich bevorzuge normalerweise zur Begrenzung der Zeilen, je nachdem, wie oft die modals verwendet werden und auch, wie wichtig es ist zu zeigen, alle Zeilen auf der gleichen Seite. Wenn Sie sich für eine bestimmte Zeile, kombinieren der page-Funktion mit einer einfachen Suche-Funktion mit SQL aswell? Weniger Arbeit und wahrscheinlich einfacher, den code zu Lesen.InformationsquelleAutor SebHallin