我想使用ajax基于组合框（下拉列表）的值显示记录。根据考试显示考生列表。救命。我是PHP和AJAX的新手。
我想使用ajax基于组合框（下拉列表）的值显示记录。根据考试显示考生列表。救命。我是PHP和AJAX的新手。 我想使用ajax基于组合框（下拉列表）的值显示记录。根据考试显示考生列表。救命。我是PHP和AJAX的新手。
<?php
include 'configuration.php';
$queryselect = mysql_query("SELECT examdateno, examdate from tbl_examdate ORDER BY examdate DESC");
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="onclick edit jquery php, grid in php, onclick change text box in jquery, onclick edit table row, insert update delete using jquery ajax, simple php data grid" />
<meta name="description" content="This article is about simple grid system using PHP, jQuery. Insert a new record to the table using by normal Ajax PHP. It will show the editable textbox when user clicks on the label." />
<link rel="stylesheet" type="text/css" href="css/grid.css" />
<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">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
// Function for load the grid
function LoadGrid(dte) {
var gridder = $('#as_gridder');
var UrlToPass = 'action=load';
var value = $('#examdate').val();
gridder.html('loading..');
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass,
success: function (responseText) {
gridder.html(responseText);
}
});
}
// Seperate Function for datepiker() to save the value
function ForDatePiker(ThisElement) {
ThisElement.prev('span').html(ThisElement.val()).prop('title', ThisElement.val());
var UrlToPass = 'action=update&value=' + ThisElement.val() + '&crypto=' + ThisElement.prop('name');
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass
});
}
LoadGrid(); // Load the grid on page loads
// Execute datepiker() for date fields
$("body").delegate("input[type=text].datepicker", "focusin", function () {
var ThisElement = $(this);
$(this).datepicker({
dateFormat: 'yy/mm/dd',
onSelect: function () {
setTimeout(ForDatePiker(ThisElement), 500);
}
});
});
// Show the text box on click
$('body').delegate('.editable', 'click', function () {
var ThisElement = $(this);
ThisElement.find('span').hide();
ThisElement.find('.gridder_input').show().focus();
});
// Pass and save the textbox values on blur function
$('body').delegate('.gridder_input', 'blur', function () {
var ThisElement = $(this);
ThisElement.hide();
ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
var UrlToPass = 'action=update&value=' + ThisElement.val() + '&crypto=' + ThisElement.prop('name');
if (ThisElement.hasClass('datepicker')) {
return false;
}
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass
});
});
// Same as the above blur() when user hits the 'Enter' key
$('body').delegate('.gridder_input', 'keypress', function (e) {
if (e.keyCode == '13') {
var ThisElement = $(this);
ThisElement.hide();
ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
var UrlToPass = 'action=update&value=' + ThisElement.val() + '&crypto=' + ThisElement.prop('name');
if (ThisElement.hasClass('datepicker')) {
return false;
}
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass
});
}
});
// Function for delete the record
$('body').delegate('.gridder_delete', 'click', function () {
var conf = confirm('Are you sure want to delete this record?');
if (!conf) {
return false;
}
var ThisElement = $(this);
var UrlToPass = 'action=delete&value=' + ThisElement.attr('href');
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass,
success: function () {
LoadGrid();
}
});
return false;
});
// Add new record
// Add new record when the table is empty
$('body').delegate('.gridder_insert', 'click', function () {
$('#norecords').hide();
$('#addnew').slideDown();
return false;
});
// Add new record when the table in non-empty
$('body').delegate('.gridder_addnew', 'click', function () {
$('html, body').animate({scrollTop: $('.as_gridder').offset().top}, 250); // Scroll to top gridder table
$('#addnew').slideDown();
return false;
});
// Cancel the insertion
$('body').delegate('.gridder_cancel', 'click', function () {
LoadGrid()
return false;
});
// For datepiker
$("body").delegate(".gridder_add.datepiker", "focusin", function () {
var ThisElement = $(this);
$(this).datepicker({
dateFormat: 'yy/mm/dd'
});
});
// Pass the values to ajax page to add the values
$('body').delegate('#gridder_addrecord', 'click', function () {
// Do insert vaidation here
if ($('#fname').val() == '') {
$('#fname').focus();
alert('Enter the First Name');
return false;
}
if ($('#lname').val() == '') {
$('#lname').focus();
alert('Enter the Last Name');
return false;
}
if ($('#age').val() == '') {
$('#age').focus();
alert('Enter the Age');
return false;
}
if ($('#profession').val() == '') {
$('#profession').focus();
alert('Select the Profession');
return false;
}
if ($('#date').val() == '') {
$('#date').focus();
alert('Select the Date');
return false;
}
// Pass the form data to the ajax page
var data = $('#gridder_addform').serialize();
$.ajax({
url: 'ajax.php',
type: 'POST',
data: data,
success: function () {
LoadGrid();
}
});
return false;
});
});
</script>
</head>
<body>
<header>
<img src="images/qes_logob.png" alt="logo">
<button class="hamburger">☰</button>
<button class="cross">˟</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>
$(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>
<form>
<h1>Exam Dates</>
<select name="examdate" id="examDate" onchange="LoadGrid(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 class="as_wrapper">
<div class="as_grid_container">
<div class="as_gridder" id="as_gridder"></div> <!-- GRID LOADER -->
</div>
</div>
</body>
</html>
AJAX
<?php
include 'configuration.php';
include 'functions/functions.php';
$action = $_REQUEST['action'];
$q = intval($_POST['q']);
switch($action) {
case "load":
$query = 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");
$count = mysql_num_rows($query);
if($count > 0) {
while($fetch = mysql_fetch_array($query)) {
$record[] = $fetch;
}
}
$department = array('Software Architect', 'Inventor', 'Programmer', 'Entrepreneur');
?>
<table class="as_gridder_table">
<tr class="grid_header">
<td><div class="grid_heading">Sno</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">Age</div></td>
<td><div class="grid_heading">Profession</div></td>
<td><div class="grid_heading">Date</div></td>
<td><div class="grid_heading">Actions</div></td>
</tr>
<tr id="addnew">
<td> </td>
<td colspan="6">
<form id="gridder_addform" method="post">
<input type="hidden" name="action" value="addnew" />
<table width="100%">
<tr>
<td><input type="text" name="fname" id="fname" class="gridder_add" /></td>
<td><input type="text" name="lname" id="lname" class="gridder_add" /></td>
<td><input type="text" name="age" id="age" class="gridder_add" /></td>
<td><select name="profession" id="profession" class="gridder_add select">
<option value="">SELECT</option>
<?php foreach($department as $departments) { ?>
<option value="<?php echo $departments; ?>"><?php echo $departments; ?></option>
<?php } ?>
</select></td>
<td><input type="text" name="date" id="date" class="gridder_add datepiker" /></td>
<td>
<input type="submit" id="gridder_addrecord" value="" class="gridder_addrecord_button" title="Add" />
<a href="cancel" id="gridder_cancel" class="gridder_cancel"><img src="images/delete.png" alt="Cancel" title="Cancel" /></a></td>
</tr>
</table>
</form>
</tr>
<?php
if($count <= 0) {
?>
<tr id="norecords">
<td colspan="7" align="center">No records found <a href="addnew" id="gridder_insert" class="gridder_insert"><img src="images/insert.png" alt="Add New" title="Add New" /></a></td>
</tr>
<?php } else {
$i = 0;
foreach($record as $records) {
$i = $i + 1;
?>
<tr class="<?php if($i%2 == 0) { echo 'even'; } else { echo 'odd'; } ?>">
<td><div class="grid_content sno"><span><?php echo $i; ?></span></div></td>
<td><div class="grid_content editable"><span><?php echo $records['fname']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("fname|".$records['id']); ?>" value="<?php echo $records['fname']; ?>" /></div></td>
<td><div class="grid_content editable"><span><?php echo $records['lname']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("lname|".$records['id']); ?>" value="<?php echo $records['lname']; ?>" /></div></td>
<td><div class="grid_content editable"><span><?php echo $records['age']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("age|".$records['id']); ?>" value="<?php echo $records['age']; ?>" /></div></td>
<td><div class="grid_content editable"><span><?php echo $records['profession']; ?></span>
<select class="gridder_input select" name="<?php echo encrypt("profession|".$records['id']); ?>">
<?php foreach($department as $departments) { ?>
<option value="<?php echo $departments; ?>" <?php if($departments == $records['profession']) { echo 'selected="selected"'; } ?>><?php echo $departments; ?></option>
<?php } ?>
</select>
</div></td>
<td><div class="grid_content editable"><span><?php echo date("Y/m/d", strtotime($records['posted_date'])); ?></span><input type="text" class="gridder_input datepicker" name="<?php echo encrypt("posted_date|".$records['id']); ?>" value="<?php echo date("Y/m/d", strtotime($records['posted_date'])); ?>" /></div></td>
<td>
<a href="gridder_addnew" id="gridder_addnew" class="gridder_addnew"><img src="images/insert.png" alt="Add New" title="Add New" /></a>
<a href="<?php echo encrypt($records['id']); ?>" class="gridder_delete"><img src="images/delete.png" alt="Delete" title="Delete" /></a></td>
</tr>
<?php
}
}
?>
</table>
<?php
break;
case "addnew":
$fname = isset($_POST['fname']) ? mysql_real_escape_string($_POST['fname']) : '';
$lname = isset($_POST['lname']) ? mysql_real_escape_string($_POST['lname']) : '';
$age = isset($_POST['age']) ? mysql_real_escape_string($_POST['age']) : '';
$profession = isset($_POST['profession']) ? mysql_real_escape_string($_POST['profession']) : '';
$date = isset($_POST['date']) ? mysql_real_escape_string($_POST['date']) : '';
mysql_query("INSERT INTO `grid` (fname, lname, age, profession, posted_date) VALUES ('$fname', '$lname', '$age', '$profession', '$date')");
break;
case "update":
$value = $_POST['value'];
$crypto = decrypt($_POST['crypto']);
$explode = explode('|', $crypto);
$columnName = $explode[0];
$rowId = $explode[1];
if($columnName == 'posted_date') { // Check the column is 'date', if yes convert it to date format
$datevalue = $value;
$value = date('Y-m-d', strtotime($datevalue));
}
$query = mysql_query("UPDATE `grid` SET `$columnName` = '$value' WHERE id = '$rowId' ");
break;
case "delete":
$value = decrypt($_POST['value']);
$query = mysql_query("DELETE FROM `grid` WHERE id = '$value' ");
break;
}
?>
答案 0 :(得分：0)
您没有在ajax中通过考试日期，q，但您在$_POST中使用该考试日期，因此请将ajax中的值传递给您的文件。
function LoadGrid(dte) {
var gridder = $('#as_gridder');
var UrlToPass = 'action=load';
var value = $('#examdate').val();
gridder.html('loading..');
$.ajax({
url: 'ajax.php',
type: 'POST',
data: {action:"load",q:dte}, <----- this line.
success: function (responseText) {
gridder.html(responseText);
}
});
}