Hey there! This code I am posting is used for some tests I'm doing with PHP and AJAX. What I find absolutely confusing is that when I add the refreshDir() function to any of the other functions, so that it runs once they have done their buisness, it absolutely screws up what-ever function I have it in. For instance if I have it running in the deleteTheFile() function. It prevents it from deleting the file. That function works perfectly fine when the refreshDir() function is not in it. Any hints or solutions? Please let me know if you'd like to see any of my other code. I'm posting the page's code along with the JS file and the Delete the file php page that deletes the files (there are other php files that create and read files). This whole thing was meant to be a simple exercise, but I am entirely confused as to why the refeshDir() function is screwing up everything. I don't think that the issue is related to anything else other than the javascript / ajax. Thanks for your help!
Here is the JS file:
Code:
if (window.XMLHttpRequest){
ajaxRequest=new XMLHttpRequest();
}
else{
alert('Try again gold star!');
}
var createResponse = 'Created Successfully';
var deleteResponse = 'Deleted Successfully';
var i = 0;
function refreshDir(){
ajaxRequest.onreadystatechange = function(){
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
document.getElementById('directory').innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open('GET', 'theReadDir.php', true);
ajaxRequest.send();
}
function createTheFile(file){
var file = document.getElementById(file).value;
var textInput = document.getElementById('toBeInserted').value;
ajaxRequest.onreadystatechange=function(){
if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
document.getElementById('responseCreated').innerHTML = " " + createResponse;
}
}
ajaxRequest.open("POST", "theCreator.php", true);
ajaxRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');
ajaxRequest.send("inserted=" + textInput + '&file=' + file);
// refreshDir();
}
function readTheFile(file){
var file = document.getElementById(file).innerHTML;
ajaxRequest.onreadystatechange=function(){
if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
document.getElementById('responseRead').innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open('GET', 'theReader.php?file=' + file, true);
ajaxRequest.send();
}
function readTheFileEntered(file){
var file = document.getElementById(file).value;
ajaxRequest.onreadystatechange = function(){
if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
document.getElementById('responseRead').innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open('GET', 'theReader.php?file=' + file + '&dir=', true);
ajaxRequest.send();
}
function deleteTheFile(file){
var file = document.getElementById(file).value;
alert(file);
ajaxRequest.onreadystatechange = function(){
alert(0);
if (ajaxRequest.readyState == 1 && ajaxRequest.status == 200){
alert(1);
}
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
document.getElementById('responseDeleted').innerHTML = ' ' + deleteResponse;
document.getElementById('responseDeleted').innerHTML = ' ' + ajaxRequest.responseText;
}
}
alert(2);
ajaxRequest.open('GET', 'theDeleter.php?file=' + file, true);
alert(3);
ajaxRequest.send();
alert(4);
refreshDir();
}
function resetFeedback(response){
document.getElementById(response).innerHTML = '';
}
/*function removeAlert(){
var t = setTimeout("resetFeedback('responseDeleted')", 2000);
}
function updateSatus(){
document.getElementById('createButton').innerHTML = 'Update';
i += 1;
if (i > 1) createResponse = 'Updated Successfully';
var t = setTimeout("resetFeedback('responseCreated')", 2000);
}
*/
Here is the main page code:
Code:
<html>
<head>
<script type="text/javascript" src="operations.js"></script>
<style type='text/css'>
.niceboy{
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #fff;
text-align: center;
text-shadow: 0px 1px 0px #B7B7B7;
background-image: -webkit-linear-gradient(top,#D1D1D1,#c9c9c9);
border-color: #BABABA;
border-style: solid;
border-radius: 12px;
border-width: 1px;
padding-left: 8px;
padding-right: 8px;
line-height: 24px;
display: inline-block;
cursor: pointer;
}
.listing{
margin: 4px;
width: 200px;
padding-left: 15px;
cursor: pointer;
}
.listingfile{
background-color:#f0f0f0;
}
.listingdir{
background-color:#e3e3e3;
}
#directory{
margin: 20px;
}
</style>
</head>
<body onLoad="refreshDir();">
File Name: <input type='text' id='file' />
<br />
<br />
File Contents: <input type='text' id='toBeInserted' />
<br />
<br />
<br />
<div class='niceboy' id='createButton' onclick='createTheFile("file");'>
Create
</div>
<span id='responseCreated'></span>
<br />
<br />
<div class='niceboy' onclick='readTheFileEntered("file")'>
Read
</div>
<span id="responseRead"></span>
<br />
<br />
<div class='niceboy' onclick='deleteTheFile("file");'>
Delete
</div>
<span id = 'responseDeleted'></span>
<br />
<br />
<div class='niceboy' onClick='refreshDir();'>
Refresh
</div>
<div id='directory'>
</div>
<br />
<br />
</html>
</body>
Here's the theDeleter.php file:
PHP Code:
<?php
$file = $_GET['file'];
//$file = 'created-files/'. $file;
echo $file;
function delete($file){
unlink($file);
echo 'Deleted Successfully';
}
if (file_exists($file) && is_file($file)) delete($file);
else echo 'whoa bro that file doesn\'t exist!';
?>
And here's the theReadDir.php:
PHP Code:
<?php
$dir = new DirectoryIterator('/wamp/www/phpAjaxTest/');
foreach($dir as $file){
if (!$dir->isDot()){
$ft = filetype($file);
if ($ft == 'dir'){
$format = '<div class=\'listing listing' . $ft . '\' id = \'' . $file . '\' onClick = "readTheFile(\'' . $file . '\'); refreshDir();">' . $file . '</div>';
echo $format;
}
else{
$format = '<div class=\'listing listing' . $ft . '\' id = \'' . $file . '\' onClick = "readTheFile(\'' . $file . '\');">' . $file . '</div>';
echo $format;
}
}
}
?>
Basically any of the other function's (the only one's that I'd want refreshDir() to run in would be the creating and deleting functions) break when I add the refreshDir() function.
Before you post, read our: 
Confounding Issue With My Script!
