2017-02-18 5 views
0

PHPを使用して、データを取得してブートストラップモーダルを使用して表示しようとしています。ブートストラップをモーダルにすることはできません。 PHPを使用してデータを取得し、それをモーダルで表示

ブートストラップモーダルを開くことができません。

私のPHPコードはサーバーとデータベースに接続して情報を返しますが、モーダルは機能しないため、受け取ったデータを表示することはできません。

JavaScriptを使用してモーダルをアクティブにしようとしましたが、それでも動作しませんでした。 「ブートストラップのJavaScriptは、jQueryのバージョン1.9.1以降が必要ですが、バージョン3より低い」ため

<html lang="en"> 
<div id="head"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" 
      integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
      integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <link rel="icon" href="/favicon.ico" type="image/x-icon"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"> 
    <title> IUC Alumni Connect </title> 
    <div class="container"> 
     <div class="jumbotron"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <a href="http://www.aci.k12.tr" target="_blank"><img id="JLogo" src="ACILogo.png" alt=""></a> 
       </div> 
       <div class="col-md-7"> 
        <h1 id="JTitle" class="greeting"><b> Welcome to the IUC Reachout Page </b></h1> 
        <p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p> 
       </div> 
       <div class="col-md-1"></div> 
      </div> 
     </div> 
    </div> 
    <style> 
     .modal-header, h4, .close { 
      background-color: #5cb85c; 
      color: white !important; 
      text-align: center; 
      font-size: 30px; 
     } 

     .modal-footer { 
      background-color: #f9f9f9; 
     } 
    </style> 
</div> 
<body> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header" style="padding:35px 50px;"> 
        <h4><span class="glyphicon glyphicon-search"></span>Results</h4> 
       </div> 
       <div class="modal-body" style="padding:40px 50px;"> 
        <?php 
        if($_SERVER["REQUEST_METHOD"]="GET"){ 
        if (isset($_GET['uni_name']) && is_string($_GET['uni_name'])) { 
        $uname = $_GET['uni_name']; 
        } else { 
        $uname = ""; 
        } 
        } 

        $con = mysqli_connect('', '', '', ''); 

        if ($con->connect_errno) { 
        echo " 
        <script> alert('We are experiencing problems.') </script>"; 
        exit; 
        } 

        $sql = "SELECT * FROM students WHERE university like '%".$uname."%'"; 

        if (!$result = $con->query($sql)) { 
        echo " 
        <script> alert('Sorry, the website is experiencing problems.') </script>"; 
        exit; 
        } 
        if ($result->num_rows === 0) { 
        echo " 
        <script> alert('We could not find a match for ID ".$uname.", sorry about that. Please attempt again.') </script>"; 
        exit; 
        } else { 
        echo "<ul> 
         "; 
         while($row = $result->fetch_assoc()){ 
         echo sprintf(" 
         <li>%s %s - %s</li>", $row["firstName"], $row["lastName"], $row["university"]); 
         //echo sprintf(" 
         <li>%s</li>", $row["lastName"]); 
         //echo sprintf(" 
         <li>%s</li>", $row["university"]); 
         } 
         echo " 
        </ul>"; 
        } 

        $result->free(); 
        $con->close(); 
        ?> 
       </div> 
       <div class="modal-footer"> 
        <button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 
+0

'onclickの=" graduateYearPage .html "これは(そして複数の理由で)失敗しています。ファイルではなく、そのための関数を呼び出す必要があります。そのモーダルに内容を '.load() 'することもできます。これを行うにはあまりにも多くの方法があります。 –

答えて

0

それが機能していない主な理由は次のとおりです。

は、ここに私のコードです。その後、あなた自身の言葉で "javascriptを使ってそれを活性化する"(jQuery)ことができます。

あり、あなたのHTMLと間違って多くも同様だが、jQueryの1.12.4には違いが例えば使用して、所定の位置にそれを残しながらも(あなたのPHPを除外):

<html lang="en"> 
    <div id="head"> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
     integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" 
     integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
     integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
     <link rel="icon" href="/favicon.ico" type="image/x-icon"> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
     <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"> 
     <title> IUC Alumni Connect </title> 
     <div class="container"> 
      <div class="jumbotron"> 
       <div class="row"> 
        <div class="col-md-4"> 
         <a href="http://www.aci.k12.tr" target="_blank"><img id="JLogo" src="ACILogo.png" alt=""></a> 
        </div> 
        <div class="col-md-7"> 
         <h1 id="JTitle" class="greeting" ><b> Welcome to the IUC Reachout Page </b></h1> 
         <p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p> 
        </div> 
        <div class="col-md-1"></div> 
       </div> 
      </div> 
     </div> 
     <style> 
      .modal-header, h4, .close { 
       background-color: #5cb85c; 
       color:white !important; 
       text-align: center; 
       font-size: 30px; 
      } 
      .modal-footer { 
       background-color: #f9f9f9; 
      } 
     </style> 
    </div> 
    <body> 
     <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header" style="padding:35px 50px;"> 
        <h4><span class="glyphicon glyphicon-search"></span>Results</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Put your php code here</p> 
       </div> 
       <div class="modal-footer"> 
        <button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#myModal').modal(); 
     }); 
    </script> 
    </body> 
</html>