데이터 - *를 부트 스트랩에 전달 Modal

데이터를 모달로 전달하기위한 많은 검색 결과를 보았습니다. 모두 작동하지만 가능한 다른 솔루션이 있습니다. 나는 아주 간단한 단일 테이블과 함께 MySql DB를 가지고 있습니다. PHP echo를 사용하여 데이터를 HTML 테이블에 반향시킵니다. 마지막 <td>은 모달을 시작하는 부트 스트랩 버튼입니다. 모달에 행 데이터를 표시하기 위해 포함 된 코드를 가져올 수 없습니다.데이터 - *를 부트 스트랩에 전달 Modal

내가 배우는 중에 여기에 많은 의견이 있습니다.

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

또한 당신이 HTML 안에 jQuery를 스크립트를 추가 할 수 있으며 그 모달 활성화를 위해 그들이 다른 jQuery를 오버라이드 (override) 할 경우 알려 주시기 수 있습니까?

출처

2017-03-25 Chris W.

들여 쓰기를 사용하면 코드를 더 깨끗하게 유지하는 것이 좋습니다.
<script ~~>은 div, p, h1과 같은 태그이지만 display : none도 있습니다. 물론 <script> 태그를 html 파일에 추가 할 수 있습니다. 괜찮아.
브라우저가 <script src = "jquery.js">을 충족하면 브라우저는 서버 (이 경우 서버)에서 jquery.js 코드를 가져옵니다. 따라서 다른 js 코드를 재정의 할 수 없습니다. 브라우저의 두 배 작업이고 jquery 코드는 두 번 읽습니다.
나는 무엇을하고 있는지, 특히 <script type="text/javascript" src="/js/jquery-3.1.1.js"> 코드를 이해할 수 없습니다. 위 jquery-3.1.1.js가 이미 포함되어 있습니다! 왜 그것을하고 있습니까?
어쨌든, 브라우저는 $ ('# myModal') 코드를 읽는 타이밍 (또는 시간?)에서 #myModal을 찾을 수 없습니다 on ('show.bs.modal', function (event) {~~. 그래서 코드는 모델 사업부에서 을해야합니다.

^^ 코딩 행복하세요.

출처

2017-03-25 02:24:09 RPF

을 주셔서 감사합니다. 나는 당신이 내 문제를 해결했습니다. 응답을 감사하고 도움이됩니다. 내가 가진 문제 들여 쓰기가있는 것은 코드를 복사/붙여 넣을 때입니다. 각 행에 4 개의 공백을 넣어야 문제의 코드로 나타납니다. 이것을하는 더 좋은 방법? 다시 한번 감사드립니다. –

당신이 사용하는 들여 쓰기가 경우에 따라 다릅니다. 그러나, 일반적으로 4 인 덴트 또는 2 인 덴트! . – RPF

데이터 - *를 부트 스트랩에 전달 Modal

답변

관련 문제