I have a web page with a small form in it.
HTML code for the page.
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body id="body_services">
<?php
include_once 'DatabaseHandler.php';
$db = DatabaseHandler::getInstance();
//loading taxi service names for updating combobox
$queryLoadSids = $db->prepare("SELECT * FROM taxi_services ORDER BY SID");
$queryLoadSids->execute();
$dropdown = "<select name='serviceID'>";
while ($row = $queryLoadSids->fetch(PDO::FETCH_ASSOC))
{
$dropdown .= "\r\n<option value='{$row['SID']}'>{$row['Name']}</option>";
}
$dropdown .= "\r\n</select>";
?>
<div id="tasks">
<ul>
<li><a id="add" href="#">Add a new taxi service</a></li>
<li><a id="update" href="#">Update a taxi service</a></li>
<li><a id="delete" href="#">Delete a taxi service</a></li>
<li><a id="view" href="#">View taxi services</a></li>
</ul>
</div>
<form id="cmbServiceIDs" name="sids">
<table width="380" border="0">
<tr>
<td><label for="serviceId">Select the Service ID</label></td>
<td><?php echo $dropdown; ?></td>
<td><input id="load" type="submit" value="Load" name="btnload" /></td>
</tr>
</table>
</form>
<form id="frmUpdateService" name="Update" action="" method="post">
<table width="300" border="0">
<tr>
<td><label for="sid">Service ID</label></td>
<td><input type="text" name="sid" value="" style="text-align:right" /></td>
</tr>
<tr>
<td><label for="name">Name</label></td>
<td><input type="text" name="name" value="" /></td>
</tr>
<tr>
<td><label for="cost">Cost</label></td>
<td><input type="text" name="cost" value="" /></td>
</tr>
<tr>
<td><label for="active">Active</label></td>
<td><input type="checkbox" name="active" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="reset" value="Cancel" /> <input type="submit" value="Update" name="update" /></td>
</tr>
</table>
</form>
</body>
</html>
When the Load button is clicked, it should run a query against a DB, return the results to populate the textboxes in the form. I'm using jQuery AJAX for this task.
$(function()
{
$("#frmUpdateService").hide();
$("#cmbServiceIDs").hide();
$("#update").click(function()
{
$("#cmbServiceIDs").slideDown("slow");
$("#frmUpdateService").hide();
});
$("#cmbServiceIDs").submit(function(e)
{
$("#frmUpdateService").fadeIn("slow");
e.preventDefault();
$.ajax(
{
type : 'GET',
url : 'request.php',
data : {'serviceID' : $("#serviceID").val()},
dataType : 'json',
success : function(response)
{
var loadedSID = response[0];
var loadedName = response[1];
var loadedCost = response[2];
var loadedActive = response[3];
$("#sid").append(loadedSID);
$("#name").append(loadedName);
$("#cost").append(loadedCost);
$("#active").append(loadedActive);
}
});
});
});
This is the request.php page.
<?php
include_once 'DatabaseHandler.php';
$db = DatabaseHandler::getInstance();
$param = $_GET['serviceID'];
$queryLoadToUpdate = $db->prepare("SELECT * FROM taxi_services WHERE SID = :serviceID");
$queryLoadToUpdate->bindParam(':serviceID', $param, PDO::PARAM_STR);
$queryLoadToUpdate->execute();
$results = $queryLoadToUpdate->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($results);
?>
But when I run the page and click on the Load button, nothing appears in the textboxes. I looked into the response using Firebug and it shows an empty response. I checked the SQL query as well. No errors there either.
I have no idea what I should check or do next. Can anyone give any suggestions as to why its not working properly here?
Thank you.