2016-11-04 29 views
1

我想按下按鈕時,顯示一個模式「Věžírezolvare」顯示自舉動態模式

enter image description here

我有按鈕的下面的代碼:

<div class="col-md-4 text-center patrat-block"> 
       <div class="thumbnail"> 
        <img class="img-responsive" src="img/LogoProbleme/pg1logo-v2.jpg" alt=""> 
        <div class="caption"> 
         <h3>Problema 1<br> 
         <small>Gradina</small> 
        </h3> 
         <p>Află dimensiunile grădinii</p> 
         <ul class="list-inline"> 
          <li> 
           <a href="probleme.php?id=1&category=g"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Problema"><span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare </button></a> 
          </li> 

         </ul> 
        </div> 
       </div> 
      </div> 

而modal content + php:

<?php 
     if(isset($_GET['id'])&&isset($_GET['category'])) 
     { 
      $id=$_GET['id']; 
      $category=$_GET['category']; 
      $sql = "SELECT cerinta, rezolvare FROM probleme WHERE id='".$id."'AND category='".$category."'";  
      $result = $conn->query($sql); 
      if ($result->num_rows > 0) { 

      while($row = $result->fetch_assoc()) 
      { 
       $cerinta=$row["cerinta"]; 
       $rezolvare=$row["rezolvare"]; 
      } 
       $_SESSION["cerinta"]=$cerinta; 
       $_SESSION["rezolvare"]=$rezolvare; 
     } 
     } 
     ?> 
     <div id="Problema" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Problema</h4> 
        </div> 
        <div class="modal-body"> 
         <h4>Cerinta</h4> 
         <div class="well"> 
          <?php echo $cerinta;?> 
         </div> 

         <h4>Rezolvare</h4> 
         <div class="well"> 
          <?php echo $rezolvare;?> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Inchide fereastra</button> 
        </div> 
       </div> 

      </div> 
     </div> 

這是試圖完成的是顯示在我的數據庫中有一些信息的模式。我檢查了這些值併成功存儲在$ cerinta和$ rezolvare中。

看起來好像當按鈕被按下時,快速淡入淡出,我被重定向到頁面的頂部,而不顯示模式。我把一個<a href="probleme.php?id=1&category=g">,所以我知道什麼按鈕被按下,但它似乎刷新頁面和模態不顯示。我怎樣才能讓模態顯示?

+0

您確保這不會有任何與'WHERE ID = ' 「的$ id。」' 和'? - 如果它是你的實際代碼,會讀取像'WHERE id = 123AND'這樣的語法錯誤。 –

+0

php代碼功能正常。我試圖回顯$ cerinta和$ rezolvare,並顯示數據庫中的值。問題在於模態。我不知道任何存儲按鈕的方法,而不使用href ='probleme.php?id = 1&category = g'。我認爲模式沒有顯示,因爲每次按下按鈕時,頁面都會重新加載。 – MCM

回答

1

achor <a>中嵌套<button>是無效的html語法,因爲它無法分辨哪個被點擊。此外,該主播還有一個href與「#」不同,因此它只是將您重定向到probleme.php?id=1&category=g。您可以按如下修改代碼(未測試)

  1. 從錨點刪除按鈕,改變錨:
<a href="probleme.php?id=1&category=g" class="btn btn-primary" 
    data-toggle="modal" data-target="#Problema"> 
    <span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare 
</a> 
  • 將模板的模板放在您html的某處:
  • <div id="Problema" class="modal fade" role="dialog"> 
        <div class="modal-dialog"> 
         <!-- Modal content--> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <h4 class="modal-title">Problema</h4> 
          </div> 
          <div class="modal-body"> 
           Some fine body 
          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal"> 
            Inchide fereastra 
           </button> 
          </div> 
         </div> 
        </div> 
    </div> 
    
  • 修改您的PHP只返回模態的主體:
  • <?php 
        // Some good php 
        echo(" 
         <h4>Cerinta</h4> 
         <div class=\"well\"> 
          {$cerinta)} 
         </div> 
         <h4>Rezolvare</h4> 
         <div class=\"well\"> 
          {$rezolvare} 
         </div>"); 
    // The modal body is returned by php 
    ?> 
    
  • 使用ajax檢索模態體並隨後打開模態。東西的線路:
  • $(document).ready(function() { 
        // Assign some id to the anchor say id="myAnchor" 
        $('#myAnchor1').click(function(e) { 
         e.preventDefault(); 
         // get the modal 
         var modal = $($(this).data("data-target")); 
         var url = $(this).attr("href"); 
         var request = $.get(url); 
         request.done(function(response) { 
          // get modal 
          modal.find(".modal-body").html(response); 
          modal.modal("show"); 
         }); 
        }); 
    });