2015-10-28 4 views
0

ИдеиPHP AJAX Update не работает

  1. Пользователь выбирает дату экзамена из выпадающего списка, который заполняется данными из базы данных.
  2. После выбора даты система отобразит список экзаменаторов на основе выбранной даты.
  3. Пользователь может теперь кодировать оценки для каждого учащегося.
  4. После кодирования оценки пользователь нажмет кнопку «Сохранить», которую система сохранит в базе данных. (Multiple update)

Это код, в котором пользователь выбирает дату экзамена.

<?php 
include '../configuration.php'; 

$queryselect = mysql_query("SELECT examdateno, examdate from tbl_examdate ORDER BY examdate DESC"); 
?> 
<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>SPORT Qualifying Exam System</title> 
    <link rel="stylesheet" type="text/css" href="../css/style.css"> 
    <link rel="stylesheet" type="text/css" href="../css/component.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>   
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 

    <script> 
     function showUser(str) { 
      if (str == "") { 
       document.getElementById("txtHint").innerHTML = ""; 
       return; 
      } else { 
       if (window.XMLHttpRequest) { 
        // code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp = new XMLHttpRequest(); 
       } else { 
        // code for IE6, IE5 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       xmlhttp.onreadystatechange = function() { 
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
         document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
        } 
       }      
       xmlhttp.open("GET", "encodeinterviewajax.php?q=" + str, true); 
       xmlhttp.send(); 

      } 
     } 
    </script> 
</head> 
<body> 
    <header> 
     <img src="../images/qes_logob.png" alt="logo"> 
     <button class="hamburger">&#9776;</button> 
     <button class="cross">&#735;</button> 
    </header> 
    <div class="menu"> 
     <ul> 
      <a href="encodeinterview.php"> 
       <li>Encode Grades</li> 
      </a> 
      <a href="viewinterview.php"> 
       <li>View Grades</li> 
      </a>    
      <a href="../index.php"> 
       <li>Logout</li> 
      </a> 
     </ul> 
    </div> 


    <script> 
     $(".cross").hide(); 
     $(".menu").hide(); 
     $(".hamburger").click(function() { 
      $(".menu").slideToggle("slow", function() { 
       $(".hamburger").hide(); 
       $(".cross").show(); 
      }); 
     }); 

     $(".cross").click(function() { 
      $(".menu").slideToggle("slow", function() { 
       $(".cross").hide(); 
       $(".hamburger").show(); 
      }); 
     }); 
    </script> 

    <div id="content"> 
     <form> 
       <h1>Exam Dates</> 
        <select name="examdate" id="examDate" onchange="showUser(this.value)"> 
         <option>Select Exam Date</option> 
         <?php 
         while ($row = mysql_fetch_array($queryselect)) { 
          echo "<option value={$row['examdateno']}>{$row['examdate']}</option>\n"; 
         } 
         ?> 
        </select> 
      </form> 
     </div> 
      <div id="txtHint">Examinees will be listed here</div> 


</body> 
</html> 

Здесь отображается отображение и обновление.

<?php 
include '../configuration.php'; 
?> 
<!DOCTYPE html> 

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="../css/component.css" /> 
<link rel="stylesheet" type="text/css" href="../css/style.css"> 
<link rel="stylesheet" type="text/css" href="../css/grid.css"> 
</head> 
<body> 

<?php 
$q = intval($_GET['q']); 


$sql = mysql_query("select s.sno, s.fname, s.lname, s.examdate, s.interviewgrade, s.gwa from student s inner join tbl_examdate e on s.examdate=e.examdate where e.examdateno=$q"); 


?> 
<div class="as_wrapper">  
    <div class="as_grid_container"> 
     <div class="as_gridder" id="as_gridder"></div> <!-- GRID LOADER --> 
     <form method="post" action=""> 
      <table class="as_gridder_table"> 
       <tr class="grid_header"> 
        <td><div class="grid_heading">Student No.</div></td> 
        <td><div class="grid_heading">First Name</div></td> 
        <td><div class="grid_heading">Last Name</div></td> 
        <td><div class="grid_heading">Exam Date</div></td> 
        <td><div class="grid_heading">Interview Grade</div></td> 
        <td><div class="grid_heading">GWA</div></td> 
       </tr> 

       <?php 
       while ($row = mysql_fetch_array($sql)) { 
        ?> 
        <tr class="<?php 
        $i+=1; 
        if ($i % 2 == 0) { 
         echo 'even'; 
        } else { 
         echo 'odd'; 
        } 
        ?>"> 
         <td><?php $sno[]=$row['sno'];echo $row['sno']; ?></td> 
         <td><?php $fname[]=$row['fname']; echo $row['fname']; ?></td> 
         <td><?php $lname[]=$row['lname'];echo $row['lname']; ?></td> 
         <td><?php echo $row['examdate']; ?></td> 
         <td><input type="text" size="3" maxlength="3" name="interview[]"></td> 
         <td><input type="text" size="3" maxlength="3" name="gwa[]"></td> 
        </tr> 
        <?php 
       } 
       ?> 
       <tr> 
        <td colspan="6"><button id="btnUpdate">Save</button> 
       </tr> 
      </table> 
     </form> 
     <?php 

     if (isset($_POST['btnUpdate'])){ 
      for($i=0;$i<sizeof($sno);$i++){ 
       $interview = $_POST['interview'][$i]; 
       $gwa = $_POST['gwa'][$i]; 
       $sql1= mysql_query("UPDATE student SET gwa='$gwa', interviewgrade='$interview' where fname='$fname[$i]' AND lname='$lname[$i]' "); 
       header('Location: encodeinterview.php'); 
      } 
     }   
     ?> 
    </div> 
</div> 
</body> 

+0

Так что же это именно то, что НЕ работает. Является ли ваш аймакс-вызов PHP неудачным? это работает, но не возвращает то, что вы ожидали? он возвращает то, что ожидается, но не отображается в вашем выходном div?Я знаю, что ваш jQuery скрывать и показывать меню не работает должным образом, но вы не упомянули об этом. И если вы вообще используете jQuery, почему бы не использовать его для вызова ajax. то вам не нужно беспокоиться о кодировании для разных версий IE. Не то чтобы вы все равно должны. IE5 и 6 мертвы. Никто больше их не поддерживает. Microsoft отказывается от поддержки IE8 в январе. –

+0

Фактически обновление записей в базе данных не работает. – RU3

ответ

0

Как я уже упоминал в своем комментарии я не уверен, что именно не работает для вас, но я могу помочь вам пару вещей в том, что я предполагаю, чтобы быть вашим домашнее задание проекта ,

Во-первых, всегда оберните все действия jQuery, которые влияют на элементы DOM, или добавьте EventListeners в элементы DOM в функции document.ready. Эта функция запускается, когда все HTML-страницы страницы загружены в DOM. Добавление прослушивателя событий или попытка «.hide()» и элемент до его загрузки в DOM завершится с ошибкой. Существует длинный путь вызова document.ready функции:

$(document).ready(function(){ 
    .... Code to manipulate the DOM goes here ... 
}); 

и вызова сокращенной функции, которая делает именно то же самое:

$(function(){ 
    .... Code to manipulate the DOM goes here ... 
}); 

Если вам нужно ждать, пока все дополнительные ресурсы (например изображения), вы можете использовать:

$(window).load(function(){ 
    .... Your code goes here .... 
}); 

Эта функция активируется при загрузке всех ресурсов. Поэтому, если вы хотите получить позицию элемента или размера элемента, содержащего изображения, лучше подождать до загрузки изображений. иначе позиция или размер могут измениться после загрузки изображений.

Так что ваш блок JQuery должен завернутые так:

<script> 
    $(function(){ 
     $(".cross").hide(); 
     $(".menu").hide(); 
     $(".hamburger").click(function() { 
      $(".menu").slideToggle("slow", function() { 
       $(".hamburger").hide(); 
       $(".cross").show(); 
      }); 
     }); 

     $(".cross").click(function() { 
      $(".menu").slideToggle("slow", function() { 
       $(".cross").hide(); 
       $(".hamburger").show(); 
      }); 
     }); 
    }); 
</script> 

И ради бога, если вы используете JQuery НИКОГДА типа «document.getElementById». Эквивалент jQuery - $ ('# id'). Обратите внимание на идентификатор «#», где «.» означает CLASS. Он намного короче и создает элемент как объект jQuery, который позволяет вам использовать на нем замечательные функции jQuery.

Если вы все равно используете jQuery. Вы должны использовать его для AJAX. Это намного проще. Вот ваша функция showUser, выполненная с помощью jQuery, включая обработку ошибок для вызова ajax:

function showUser(str) { 
     if (str == "") { 
      $("#txtHint").html(""); 
      return; 
     } else { 
      $.ajax({ 
       url: "encodeinterviewajax.php?q=" + str, 
       type: 'GET', 
       success: function(data){ 
          $('#txtHint').html(data); 
         }, 
       error: function(jqXHR, textStatus, errorThrown){ 
          console.log("Status = " + textStatus); 
          console.log("Error = " + errorThrown); 
         } 
       }); 
     }