The Idea
User will select examination date from dropdown list which is populated with data from the database.
After selecting the date, the system will display the list of examiners based on the selected date.
The user can now encode grades per student.
After encoding the grade, the user will click the 'save' button which the system will save to the database. (Multiple update)
This is the code where the user selects the exam date.
<?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">☰</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>
$(".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>
This is where the displaying and the update should happen.
<?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>
As I mentioned in my comment I'm not sure what exactly is not working for you but I can help you with a couple of things in what I'm guessing to be your homework project.
First, always wrap all jQuery actions that affect DOM elements or add EventListeners to DOM elements in a document.ready function. This function is triggered when all the HTML of the page has been loaded to the DOM. Adding an event listener or trying to ".hide()" and element before it is loaded to the DOM will fail. There is the long way of calling the document.ready function:
$(document).ready(function(){
.... Code to manipulate the DOM goes here ...
});
and the shorthand function call that does exactly the same thing:
$(function(){
.... Code to manipulate the DOM goes here ...
});
If you need to wait until all the additional resources (e.g. images) are loaded you can use:
$(window).load(function(){
.... Your code goes here ....
});
This function is triggered when all resources are loaded. So if you're looking to get the position of an element or size of an element that contains images it's best to wait until the images are loaded. otherwise the position or size may well change once the images are loaded.
So your jQuery block needs to wrapped like this:
<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>
And for goodness sake if your using jQuery NEVER type 'document.getElementById'. The jQuery equivalent is $('#id'). Note the '#' means ID where the '.' means CLASS. It's much shorter and it creates the element as a jQuery object which allows you to use all of jQuery's wonderful functions on it.
If you're using jQuery anyway. You should use it for AJAX. It's much easier. Here's your same showUser function done with jQuery including error handling for the ajax call:
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);
}
});
}
Related
I have html table create by a php, I want to sort this table, but no success.
If I create the table inside the html the sort work.
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container mb-3 mt-3" id="inicio">
</div>
<script>
$(document).ready(function(){
load_list();
$('.mydatatable').DataTable();
function load_list()
{
var action = "data";
$.ajax({
url: "teste.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#inicio').html(data);
}
})
}
});
</script>
</body>
</html>
Example of table from php:
<?php
if(isset($_POST["action"]))
{
if($_POST["action"]=="data")
{
$output = '
<table class="table table-striped table-bordered mydatatable" style="width: 100%">
<thead>
<tr>
<th>Tittle</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
<tr>
<td>date2</td>
</tr>
</tbody>
</table>
';
echo $output;
}
?>
I think the $('.mydatatable').DataTable(); is in the wrong place, I tried my options but only work if the table is inside the html page. Anyone can help me?
As first A in ajax means asynchronous, then your call to $('.mydatatable').DataTable(); happens before real data is loaded via ajax. You should move call to DataTable to success callback:
success:function(data)
{
// note the order - first you load `html`
$('#inicio').html(data);
// after that you have a `.mydatatable` selector available
$('.mydatatable').DataTable();
}
Table html is not there when you initialize your Datatable.
$(document).ready(function(){
load_list();
function load_list()
{
var action = "data";
$.ajax({
url: "teste.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#inicio').html(data);
//move this to here
$('.mydatatable').DataTable();
}
})
}
I am getting user data by passing the id in url and using the select statement where it matches the id in url and display result
But I want this by using ajax. Please help me
<div id="show_data">
<?php
$id=$_GET['id'];
$category=$_GET['category'];
if ($category==Hosted) {
$result = $wpdb->get_results ("SELECT * FROM wp_user_host WHERE user_id=$id");
foreach ( $result as $print ){
?>
<table>
<tr>
<td>Name: <?php echo $print->drive_name;?</td>
<td>Date: <?php echo $print->drive_date;?</td>
</tr>
</table>
<?php
}
}
?>
</div>
<a href="page.php?id=2&category=Hosted:>VIEW DATA</a>
lets say i have an index file like follow
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
<button id="testDom">click to load dom</button>
<p id="domOutput"></p>
<script>
document.getElementById("testDom").addEventListener('click', function(){
loadAjax();
});
function loadAjax(){
var xmlHttp = new XMLHttpRequest();
var requestUrl = 'test.php';
xmlHttp.onreadystatechange = function(){
if( this.readyState == 4 && ( this.status > 200 || this.status < 300 ) ){
console.log("ok");
document.getElementById("domOutput").innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open('GET', requestUrl);
xmlHttp.send();
}
</script>
</body>
lets say if u click the button ajax call made to the php file called test.php
<?php
echo "php file loaded";
ouput will printed in the index.html on p tag.
I'm trying to build a website for school project. I want the schoolResponse() function to happen after clicking the Submit button. If I remove the jQuery function it works but then it shows a default value when I load the page.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>NHG</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/resposive.css"/>
</head>
<body>
<header>
<div id="main-head">
<h2 id="main-heading">sKoolBook</h2>
</div>
</header>
<section>
<div id="container">
<div id="wrapper">
<form method="POST">
<select name="school">
<option value="none" name="none">Please Select a School...</option>
<option value="NHG">New Horizon Gurukul</option>
</select>
<input type="submit" class="button"/>
<?php
error_reporting(0);
$school = $_POST['school'];
function schoolResponse() {
if ($_POST['school'] == 'none'){
echo 'nothing';
} else {
echo 'something';
}
}
?>
<script>
$('.button').click(
function(
<?php schoolResponse(); ?>
);
);
</script>
</form>
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>
You should use jQuery/AJAX to do this.
<script>
$('.button').click(
$.ajax({
url: 'yoururl.php',
data: $("form").serialize(), //Better to put an ID to the form or something
success: function(data){
//DO something with your data
}
})
);
</script>
There are other functions you should check to properly use ajax requests.
In yoururl.php you should do something like
$school = $_POST['school'];
function schoolResponse() {
if ($_POST['school'] == 'none'){
echo 'nothing';
} else {
echo 'something';
}
}
You can't achieve it like this. Here is one solution:
<?php
error_reporting(0);
$school = $_POST['school'];
function schoolResponse() {
if ($_POST['school'] == 'none'){
echo 'nothing';
} else {
echo 'something';
}
}
if($_POST['school']) schoolResponse();
?>
It would be better if you replace error_reporting(0); with error_reporting(E_ALL); for example, because otherwise php errors will be disabled.
And remove this part:
<script>
$('.button').click(
function(
<?php schoolResponse(); ?>
);
);
</script>
But it is very very basic example.
My application asks the user to select the date from the drop down list. After selecting the date, it will display the list of students who took the exam on that date. The user will then can encode grades then save it. But the saving part is not working.
Here is the code.
$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>
<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>
$(".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>
This is the php file
<?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>
</html>
My implementation is at : http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/list_view.html
The first entry is when the list is hardcoded. Second and third ones are when they are extracted from the server using xmlhttp object. I am unable to understand why in the 2nd & 3rd list the formatting is different.
Original HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
lastRecord=0;
function loadNews(){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var x = document.getElementById("sample");
x.innerHTML = "hello";
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var news = document.getElementById("news_mesgs");
news.innerHTML += xmlhttp.responseText;
$("news_mesgs").enhanceWithin();
}
}
xmlhttp.open("GET", "queryNews.php?lastRecord="+lastRecord,true);
xmlhttp.send();
}
</script>
</head>
<body onload="loadNews()">
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<ul data-role="listview" data-inset="true" id="news_mesgs">
<li>
<a href="#">
<img src="http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/suicide-panel.jpg">
<h2> HKU identifies a new strategy to protect flowers from freezing stress </h2>
<p> sample description </p>
</a>
</li>
</ul>
</div>
</div>
<div id="sample"></div>
</body>
</html>
Updated HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
lastRecord=0;
function loadNews(){
$('#sample').html( 'hello' );
$.get(
"queryNews.php?lastRecord="+lastRecord,
function( data ) {
$('#news_mesgs').append( data )
.enhanceWithin();
}
);
}
</script>
</head>
<body onload="loadNews()">
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<ul data-role="listview" data-inset="true" id="news_mesgs">
<li>
<a href="#">
<img src="http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/suicide-panel.jpg">
<h2> HKU identifies a new strategy to protect flowers from freezing stress </h2>
<p> sample description </p>
</a>
</li>
</ul>
</div>
</div>
<div id="sample"></div>
</body>
</html>
PHP
<?
...
mysql_connect($host,$username,$password);
mysql_select_db($database) or die( "Unable to select database");
$query = "SELECT * FROM News_Info";
$result = mysql_query($query) or die( "Unable to execute query");
while ($row = mysql_fetch_array($result)){
print "<li>";
print "<h2>".$row['Title']."</h2>";
print "<p>sample description is here</p>";
print "</a>";
print "</li>";
}
?>
The second and third are added after the widget has been initialized. You therefore have to re-enhance (refresh) the widget each time you make an update to it. And you can do that using the $(parent_of_new_content).listview('refresh'). In your case you would have to call the following:
$('#news_mesgs').listview( 'refresh' );
Just out of curiosity, is there any particular reason why you're using plain vanilla JS for your ajax call? If you were to use jQuery (recommended) your function would be:
lastRecord=0;
function loadNews(){
$('#sample').html( 'hello' );
$.get(
"queryNews.php?lastRecord="+lastRecord,
function( data ) {
$('#news_mesgs').append( data )
.listview( 'refresh' );
}
);
}
EDIT
Please note that in the above code .enhanceWithin() has been replaced with .listview('refresh')
JS FIDDLE DEMO