2017-03-30 54 views
-2

好吧,我有一個MySQL數據庫,我使用PHP將它輸出到我的瀏覽器在HTML表中。每行都有一個編輯按鈕,並且我能夠將一個mysql值(lead_id)傳遞給模態,但無法弄清楚如何獲取其餘數據並能夠在模態內進行CRUD。我已閱讀了很多關於此的不同文章和論壇,並且他們似乎都在jQuery中使用某種形式的.ajax。我已經嘗試了所有這些jQuery函數,但都不成功。也許這不適用於3.1.1? IDK。將MySQL行數據傳遞到引導模式

如果有人可以幫助我與.ajax調用和jQuery部分,這似乎是我最大的掙扎。我也很好用PHP,但我不知道什麼PHP文件將看起來像.ajax調用。

以下是我的代碼。

<?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">&times;</span></button> 
    <h4 class="modal-title">Modal title</h4> 
    </div> 
    <div class="modal-body" id="thebody"> 
    <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 --> 

這是我覺得我的問題是:

$('#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 出於某種原因,導致數不及格的模式現在

當我註釋掉jQuery中,模式確實加載了像這張圖片顯示的引導編號。 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) 

}) 
+0

什麼問題?任何錯誤? – Tony

+0

你不應該使用'mysqli_fetch_assoc()'兩次。 –

+0

你沒有問過這個http://stackoverflow.com/q/43011591/1415724並接受了答案?與這個有什麼不同? –

回答

0

我看不到,除了你已經錯過了任何問題「;」在

var modal = $(this) 
modal.find('.modal-title').text('Lead Number ' + id) 
    modal.find('.modal-body input').val(id) 

...和一些右括號。你有什麼錯誤嗎?您可以分享截圖或結果。

+0

沒有錯誤。你有什麼想法我應該如何構建「selecta.php」?我必須使用JSON嗎?也是「;」需要? –

+0

[你知道JS會自動假設分號應該放在某些地方嗎?分號雖然通常是一個好主意,但並不是JS所必需的。](http://stackoverflow.com/a/4002248/1011527) –