I wrote an ajax script that puts an "Available - Click To Schedule" button on the browser. When this button is clicked, an appointment date and time is put into a database, the "Available" button disappears, and a "You Are Scheduled - Click To Cancel" button appears in its place.
When the "You Are Scheduled - Click To Cancel Button is clicked, the data is removed from the database, the "You Are Scheduled - Click To Cancel" button disappears from the screen, and the "Available - Click To Schedule" button reappears in its place.
Testing shows the php side works fine. This means the php script removes data from the database, then returns the word "available" to the javascript.
The word "available" becomes the javascript responseText.
I wrote a javascript if statement, highlighted in
red below, that seems to stop the javascript from responding to the word "available" by removing the "You Are Scheduled" button and replacing it with the "Available - Click To Schedule" button.
The word "available" is spelled correctly and the same in the php and the javascript.
When the if statement is commented out, everything works fine. When the if statement is uncommented, the scripts places the "You Are Scheduled - Click To Cancel" button on the screen successfully, but...
When the "Click To Cancel Button is clicked, the php successfully removes that time from the database, but the "Scheduled - Click To Cancel" button remains on the screen - instead of disappearing and being replaced by the "Available - Click To Schedule button.
I don't know why this if statement stops the script from working at this point in its cycle. Does anyone know what the problem is?
The browser is Firefox
Also, I used the <!-- and //--> tags to prevent the javascript from displaying on the browser. It did anyway. Does anyone know why?
Code:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style type="text/css">
#horizontal ul {
list-style-type: none;
margin: 0;
padding: 0;
}
body {margin: 10em;}
#form {margin: 1em 1em;l}
#answer {
padding: .2em .2em;
margin: .5em 0 .5em 0;
}
#horizontal ul li {
display: inline;
width: 200px;
height: 50px;
background: #ccc;
text-align: center;
padding: .3em;
}
</style>
</head>
<body>
<noscript>Please Enable Javascript</noscript>
<div id=horizontal>
<form >
<ul>
<li><input type="hidden" id="May120128AM" name="apt_time" value="May120128AM"></li>
<li><input type="hidden" name="user_id" id="May120128AM_user_id" value="202020"/></li>
<li>8:00 - 9:00 AM</li>
<li id = 'May120128AM_Schd_Can' style=\"display: inline;
width: 200px;
height: 50px;
background: #ccc;
text-align: center;
padding: .3em;"
></li>
<li id = 'May120128AM_Nt_Avail' style=\"display: inline;
width: 200px;
height: 50px;
background: #ccc;
text-align: center;
padding: .3em;"
></li>
<li id = 'May120128AM_Avail' style=\"display: inline;
width: 200px;
height: 50px;
background: #ccc;
text-align: center;
padding: .3em;"
></li>
</ul>
</form>
</div>
<script type="text/javascript">
<!--
var request;
request = new XMLHttpRequest();
//try { request = new XMLHttpRequest();
//} catch (e) {
//if(request=undefined) alert('e.message');
//}
//if(request)
//{
// alert('Ajax Object Created');
//}
//-->
</script>
<script type="text/javascript">
var apt_time = encodeURIComponent(document.getElementById("May120128AM").value);
var userid = encodeURIComponent(document.getElementById("May120128AM_user_id").value);
//var password = encodeURIComponent(document.getElementById("May120128AM_password").value);
var parameters = "apt_time="+apt_time+"&user_id="+userid
request.open("POST", "/cgi-bin/php_file.php", true);
request.onreadystatechange = function()
{
if(request.readyState == 4)
{
if(request.status == 200)
{
var SchdCan = document.getElementById('May120128AM_Schd_Can');
var NtAvail = document.getElementById('May120128AM_Nt_Avail');
var Avail = document.getElementById('May120128AM_Avail');
if(request.responseText == "available")
{
if(SchdCan.innerHTML == '' &&
NtAvail.innerHTML == '' &&
Avail.innerHTML == '')
{
SchdCan.innerHTL = ''
NtAvail.innerHTML = ''
Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM' onClick='clickToSchedule(); return false'>Click Here To Schedule</button>"
}
if(SchdCan.innerHTML == '' &&
NtAvail.innerHTML == 'not available' &&
Avail.innerHTML == '')
{
SchdCan.innerHTL = ''
NtAvail.innerHTML = ''
Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM' onClick='clickToSchedule(); return false'>Click Here To Schedule</button>"
}
if(SchdCan.innerHTML == '' &&
NtAvail.innerHTML == '' &&
Avail.innerHTML == "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM'>Click Here To Schedule</button>"
)
{
SchdCan.innerHTML = ""
NtAvail.innerHTML = ''
Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM'>Click Here To Schedule</button>"
}
}
if(request.responseText == "you are scheduled")
{
SchdCan.innerHTML = "You Are Scheduled <button id='May120128AM_Click_To_Can' name='apt_time' value='May120128AM' onClick = 'clickToCancel(); return false'>Click Here To Cancel</button>"
}
if(request.responseText == "not available")
{
NtAvail.innerHTML = 'not available'
} //Closing if(responseText == "")
} //Closing if(request.status == 200)
} //Closing if(request.readyState==4)
} //Closing onreadystatechange function
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(parameters);
</script>
<script type="text/javascript"><!--Begin Click To Schedule//-->
<!--
function clickToSchedule()
{
var apt_time = encodeURIComponent(document.getElementById("May120128AM").value);
var userid = encodeURIComponent(document.getElementById("May120128AM_user_id").value);
var parameters = "apt_time="+apt_time+"&user_id="+userid
request.open("POST", "/cgi-bin/php_script.php", true);
//request.onreadystatechange = checkData;
request.onreadystatechange = function()
{
if(request.readyState == 4)
{
if(request.status == 200)
{
var SchdCan = document.getElementById('May120128AM_Schd_Can');
var NtAvail = document.getElementById('May120128AM_Nt_Avail');
var Avail = document.getElementById('May120128AM_Avail');
if(request.responseText == "you are scheduled")
{
SchdCan.innerHTML = "You Are Scheduled <button id='May120128AM_Click_To_Can' name='apt_time' value='May120128AM' onClick='clickToCancel(); return false'>Click Here To Cancel</button>"
NtAvail.innerHTML = ''
Avail.innerHTML = ''
}
if(request.responseText == "not available")
{
SchdCan.innerHTML = ''
NtAvail.innerHTML = 'not available'
Avail.innerHTML = ''
} //Closing if(responseText == "not available")
} //Closing if(request.status == 200)
} //Closing if(request.readyState==4)
} //Closing onreadystatechange function
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(parameters);
}
//-->
</script><!--//End Click To Schedule//-->
<script type="text/javascript"><!--Begin Click To Cancel//-->
<!--
function clickToCancel()
{
var apt_time = encodeURIComponent(document.getElementById("May120128AM_Click_To_Can").value);
var userid = encodeURIComponent(document.getElementById("May120128AM_user_id").value);
var parameters = "apt_time="+apt_time+"&user_id="+userid
request.open("POST", "/cgi-bin/php_script.phpl", true);
//request.onreadystatechange = checkData;
request.onreadystatechange = function()
{
if(request.readyState == 4)
{
if(request.status == 200)
{
var SchdCan = document.getElementById('May120128AM_Schd_Can');
var NtAvail = document.getElementById('May120128AM_Nt_Avail');
var Avail = document.getElementById('May120128AM_Avail');
//if(request.responseText == "available")
//{
SchdCan.innerHTML = ''
NtAvail.innerHTML = ''
Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM' onClick='clickToSchedule(); return false'>Click Here To Schedule</button>"
//}
} //Closing if(request.status == 200)
} //Closing if(request.readyState==4)
} //Closing onreadystatechange function
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(parameters);
}
//-->
</script><!--//End Click To Cancel//-->
</body>
</html>
