Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    65
    Thanks
    4
    Thanked 4 Times in 4 Posts

    Exclamation Confounding Issue With My Script!

    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.
    MICHAEL GRIFFIN
    MWGRIFFIN.COM

  • #2
    New Coder
    Join Date
    Mar 2009
    Posts
    65
    Thanks
    4
    Thanked 4 Times in 4 Posts

    Figured it out.

    I figured out the issue. I realized that I needed to put the refreshDir() function in the status checking section of the deleteTheFile() function. That way it runs once it's done, instead of trying to make multiple ajax requests at the same time and tripping over itself. At least that what I believe is the reason.
    MICHAEL GRIFFIN
    MWGRIFFIN.COM


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •