如何从php中的动态表加载模态窗口上的动态数据库

时间:2016-03-28 06:27:03

标签: php mysql ajax twitter-bootstrap modal-dialog

您好我想通过使用基于模态窗口的MySQL数据库显示动态数据,请给我一些演示。我试图在桌子上显示动态数据,当我点击任何记录的按钮时,它必须显示模态窗口上的动态数据

1 个答案:

答案 0 :(得分:0)

这是我试过的



    
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("mymodalbody").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("mymodalbody").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", "show.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
<script>
  function getPage(id) {
	$('#output').html('<img src="LoaderIcon.gif" />');
	jQuery.ajax({
		url: "get_page.php",
		data:'id='+id,
		type: "POST",
		success:function(data){$('#output').html(data);}
	});
}
</script>
&#13;
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content" >
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 class="modal-title" style="text-align:center;">Information</h3>
        </div>
        <div class="modal-body" id="mymodalbody">
		
		  <?php ?>
          
          
		</div>
        
        <div class="modal-footer">
          <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
        </div>
				
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

<div class="container" >
	<div class="row">
	<div class="col-lg-12 ">
    
          <table class="table table-bordered " style="text-align:center;">
            <thead >
              <tr style="background-color:#FFF;" >
                <th style="text-align:center;">Sr.</th>
                <th style="text-align:center;">Name</th>
                <th style="text-align:center;">Email</th>
                <th style="text-align:center;">Mobile No</th>
                <th style="text-align:center;">View</th>
              </tr>
            </thead>
            <tbody>
		<?php
			$i=1;
			$sql=mysql_query("select * from staff order by id asc") or die(mysql_error());
			while($row=mysql_fetch_array($sql))
			{
		?>
              <tr>
                <td><?php echo $i; ?></td>
                <td><?php echo $row['name'];?></td>
                <td><?php echo $row['email'];?></td>
                <td><?php echo $row['mobile'];?></td>
                <td><a data-toggle="modal" data-target="#myModal" value="<?php echo $row['id']; ?>" onclick="showHint(this.value)" ><i class="fa fa-eye"></i></a>
                </td>
              </tr>
		<?php
				$i++;
			}
		?>
		    </tbody>
          </table>
        <!--end green board -->
    </div>
    </div>
    <ul class="pagination" >
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>`
</div>
&#13;
&#13;
&#13;