2017-03-30 25 views
-2

私が持っているものはMySQLデータベースで、PHPを使ってHTMLテーブルのブラウザに出力しています。各行には編集ボタンがあり、私は1つのmysql値(lead_id)をモーダルに渡すことができましたが、残りのデータを取得し、モーダル内でCRUDを実行する方法を理解することはできません。私はこれに関する多くの記事とフォーラムを読んできました。それらはすべてjQueryで何らかの形の.ajaxを使用しているようです。私はこれらのjQuery関数のすべてを試しましたが、失敗しました。たぶん3.1.1で動作しないのでしょうか? IDK。MySQLの行データをブートストラップモーダルに渡す

誰かが.ajaxコールとjqueryパートで私を助けてくれるのであれば、私の最大の闘争と思われます。私もPHPで大丈夫ですが、私はPHPファイルが.ajax呼び出しのように見えるか分かりません。

以下は私のコードです。私がコメントアウトしたときに、リード数は今モーダル

に合格しないいくつかの理由

$('#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 :私は私の問題があると感じ場所です

<?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 --> 

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()を2回使用しないでください。 –

+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) –

関連する問題