2017-03-21 10 views
0

いいえ私はphpコードで忙しいです。挿入ボタンをクリックすると、ページをリロードせずに値を表示します。SQLクエリは値を挿入し、ページを再読み込みせずに表示します

<?php 
$connection = mysqli_connect('localhost', 'root', '', 'universitynew'); 


$sql="SELECT * FROM tblstudent"; 
$student_records=mysqli_query($connection,$sql); 


?> 
<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" type='text/css' href="bootstrap.min.css" /> 
     <script type='text/javascript' src="bootstrap.min.js"></script> 
     <script type='text/javascript' src="jquery.min.js"></script> 
    </head> 
<body> 
    <a href="Student.php"class="btn btn-primary active" role="button">Student table</a> 
    <a href="Degree.php"class="btn btn-primary" role="button">Degree table</a> 
    <a href="Subject.php"class="btn btn-primary" role="button">Subject table</a> 
    <a href="assessment.php"class="btn btn-primary" role="button">Assessment table</a> 
    <a href="student_assessments.php"class="btn btn-primary" role="button">Student Assessment table</a> 
    <a href="Degree_student.php" class="btn btn-primary" role="button">Student Degree table</a> 
    <a href="Student_Subject.php"class="btn btn-primary" role="button">Student Subject table</a> 
    <hr></hr> 
    <table width="800" border="1" cellpadding="1" cellspacing="1"> 
    <input type="button" name="insertrecords" id="insertrecords" value="Insert Records" /> 
    <span id="success" style="display: none">Successfully Inserted</span> 
    <div id="response"></div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#insertrecords").click(function() { 
       $("#success").show(); 
       $.ajax({ 
        url: "insert_student.php", 
        type: 'POST', 
        data: {'action':'submit'}, 
        dataType: 'json', 
        success: function (data) { 
         $("#success").hide(); 
         if(data.status=="true"){ 
          $("#response").html(data.universitynew); 
         }else{ 
          $("#response").html("Error in db query"); 
         } 
        } 
       }); 

      }); 
     }); 
    </script> 
    <h1><a href="insert_student.php".php" class="btn btn-info" role="button">Delete Students</a></h1> 
    <h1><a href="insert_student.php".php" class="btn btn-info" role="button">Update Students</a></h1> 

    <tr> 
    <th>Student ID</th> 
    <th>Student number</th> 
    <th>Student name </th> 
    <th>Student surname</th> 
    <th>Student course</th> 
    </tr> 
    <?php 
    while ($student=mysqli_fetch_assoc($student_records)){ 
     echo"<tr>"; 
     echo"<td>".$student['student_id']."</td>"; 
     echo"<td>".$student['student_number']."</td>"; 
     echo"<td>".$student['student_name']."</td>"; 
     echo"<td>".$student['student_surname']."</td>"; 
     echo"<td>".$student['student_course']."</td>"; 
     echo"</tr>"; 


    } 


    ?> 

は、私が正常に挿入表示するボタンのためのいくつかのjqueryとAjaxを行うために管理し、それは私の問題は、ページをリロードせずにテーブルを表示することで発生する私のデータベースに挿入しない: はここに私のコードです。誰も私を助けることができますか?

+0

jクエリコード? –

+0

@Ilyaskarim私はボタンのためにしましたが、更新された結果を表示するためのjQueryの記述方法はわかりません。 –

答えて

0

あなたはjQueryのでshow機能でそれを行うことができます。詳細なガイドについては

$('#success').show(); 

これをチェック:http://api.jquery.com/show/

編集: はちょうどあなたが機能を使用していることを見て、あなたの問題があることです要求が成功するたびにhideを使用していますが、失敗した場合は、それを使用する必要があります。

$("#insertrecords").click(function() { 
    var request = $.ajax({ 
     url: "insert_student.php", 
     type: 'POST', 
     data: {'action':'submit'}, 
     dataType: 'json' 
    }); 
    request.done(function(data){ 
    $("#success").show(); 
    $("#response").html(data.universitynew); 
    }); 
    request.fail(function(error){ 
    $("#response").html("Error in db query"); 
    }); 
} 
0

Ajaxはあなたが#success element.The要素が値noneとCSSのdisplayプロパティを通じて隠されて表示する必要が完了取得します。あなたは、単にblockに表示プロパティを変更することができますので、それはAJAXの成功の上に表示されます:あなたはまた、jqueryのshow()機能により要素を表示することができます

$('#success').css("display","block"); 

$('#success').show(); 

あなたはここで詳細を見つけることができます:http://api.jquery.com/css/

編集:

$.ajax({ 
    url: '/path/to/file', 
    type: 'default GET (Other values: POST)', 
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)', 
    data: {param1: 'value1'}, 
}) 
.done(function() { 
    $("#success").show(); // this will show the message 
    ... 
}) 
.fail(function() { 
    ... 
}); 
関連する問題