JavaScript - Problem Including Files From An Ajax.request

I'm using jquery right now but I sort of understand what the problem is. I'm making a file manager and when you click on an li tag it will do some action depending on if it's a file type or a folder type. There are 3 important files you should know about.

1. filemanager.php (Where the file managing takes place. Starts by including filemanager_getfile.php and including filemanager.js in the head).

2. filemanager_getfile.php (Information that receives information from the ajax request [the directory to be read] and prints the new file list in <li> tags)

3. filemanager.js (Jquery that processes li clicks)

The problem is, when you click on a folder (and it loads the new information from the ajax request) the jquery doesn't check the new li tags when clicked (I'm guessing when you first link the javascript file it has to compile all of the current li information?).

Try it for yourself-
[removed]

Instruction (if it's not already obvious):

-Clicking a file selects if. If files are selected and you click the arrow in the file options it will transfer it (not really, but it will later).

-Clicking a folder will send an ajax request with the new directory information to be checked and return the html

-Clicking the '?' in the file options will display the pages html (I implemented it to debug).

I have tried linking the js page every time I include the new directory information, but the js stacks on each other. So if I click on 3 folders and hit the '?' button it will display the page html 3 times. And if I select the index.php li and click transfer, it will "transfer" 3 times.

filemanager.php
Code:

<div id="goldenSub">
        <div class="title">Golden Subdomain</div>
        <div class="files" id="goldenSubFiles">
            <?
                include("filemanager_getfiles.php");
            ?>
        </div>
        <div id="history" visited="goldensub/"></div>;
        <div class="fileOptions"><img src="images/question.png" title='HTML Information' id="ask"><img src="images/transferto.png" title='Copy File To' id="transferTo"></div>
    </div>

filemanager_getfiles.php
PHP Code:
<?
    $path = $_REQUEST["dir"];
    if($path == "" || $path == null)
    {
        $path = 'goldensub/';
    }
    
    echo "\n<div class='path'>$path</div>\n<ul>\n";
    $handler = opendir($path);
    
    //We need to organize the results. Be default, all files and folders will be
    //located by alphabetical order. But we want to list all folders first, followed
    //by files. By adding the results to arrays first we can decide to print our
    //results in the order we want.
    
    $folderArray = array();
    $fileArray = array();
    
    $folderCount = 0;
    $fileCount = 0;
    
    while(false !==($file=readdir($handler)))
    {    
        if($file != "" && $file != null && $file != "." && $file != "..")
        {
            
            $extensionLocation = strrpos($file, ".");
            
            //Is this a folder or a file?
            if($extensionLocation == null && $extensionLocation == "")
            {
                //This is a folder unless it's the error_log file.
                if($file != "error_log")
                {
                    //Nope, it's definitly a folder. Add it to the folder array.
                    $folderCount++;
                    $folderArray[$folderCount] = $file;
                }
            }
            else
            {
                //This is a file. Add it to the file array.
                $fileCount++;
                $fileArray[$fileCount] = $file;
            }
        }
    }
    
    if($path != 'goldensub/')
    {
        echo "\t<li title='goldensub/' type='folder'>\n\t\t<img src='images/up.png'> goldensub\n\t</li>\n";
    }
    
    for($i = 1; $i<=$folderCount; $i++)
    {
        $newPath = $path.$folderArray[$i].'/';
        echo "\t<li title='$newPath' type='folder'>\n\t\t<img src='images/folderOpen.png'> $folderArray[$i]\n\t</li>\n";
    }
    
    for($i = 1; $i<=$fileCount; $i++)
    {
        $extensionLocation = strrpos($fileArray[$i], ".");
        $nameLength = strlen($fileArray[$i]);
        $extensionLength = $nameLength-$extensionLocation;
        $nameClean = substr($fileArray[$i], 0, $extensionLocation);
        $extension = substr($fileArray[$i], $extensionLocation+1, $nameLength);
        echo "\t<li title='$fileArray[$i]' type='file' extension='$extension'>\n\t\t\n\t<img src='images/$extension.png'> $nameClean\n\t</li>\n";
    }
    echo "</ul>";
?>

filemanager.js
Code:

    $("li").click(function(){
        var type = $(this).attr("type");
        //This is a folder
        if(type == "folder")
        {
            //Path to new directory
            var newPath = $(this).attr("title");
            //Ajax request to filemanager_getfiles.php
            $("#goldenSubFiles").load("filemanager_getfiles.php", { dir: newPath }, function(data){
                //Update log
                newLog("Directory changed to <i><b>"+newPath+"</b></i>");
            });
        }
        //This is a file
        else
        {
            if($(this).hasClass("selected"))
            {
                //It's already selected - deselect it.
                $(this).removeClass("selected");
            }
            else
            {
                //Select it
                $(this).addClass("selected");
            }
        }
    });

Could somebody help me please to explain what I'm doing wrong....
a have this html file with references to some javascripts (datagrid from http://www.datatables.net) and this html file work ok..I mean javascripts a css styling works with table...
but when I call this page by ajax and callback (this html page) is forward back into another div , table doesn't work ....just data from page but now functionality from javascript and css styling...
how should I force callback result to use javascript and css?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
		
		
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico">
		<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
		
		<style type="text/css" media="screen">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "http://www.datatables.net/media/css/site_jui.ccss";
			@import "media/css/demo_table_jui.css";
			@import "media/css/themes/base/jquery-ui.css";
			@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
			/*
			 * Override styles needed due to the mix of three different CSS sources! For proper examples
			 * please see the themes example in the 'Examples' section of this site
			 */
			.dataTables_info { padding-top: 0; }
			.dataTables_paginate { padding-top: 0; }
			.css_right { float: right; }
			#example_wrapper .fg-toolbar { font-size: 0.8em }
			#theme_links span { float: left; padding: 2px 10px; }
		</style>

		
		<script type="text/javascript" src="media/js/complete.js"></script>
		<script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="media/js/jquery.dataTables.editable.js"></script>
		<script src="media/js/jquery.jeditable.js" type="text/javascript"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.validate.js" type="text/javascript"></script>

		<script type="text/javascript" charset="utf-8">
			$(document).ready( function () {
				$('#example').dataTable().makeEditable({
                    							sUpdateURL: "update.php",
												sDeleteURL: "delete.php"

                    							
										});
				
			} );
		</script>

        
	</head>
   <body id="index" class="grid_2_3">

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        
        <thead>
        <tr>
        <th>
        ID</th>
        <th>
        user</th>
        <th>
        password</th>
        <th>
        first</th>
        <th>
        last</th>
        <th>
        company</th>
        </tr>
        
            </thead>
        
            <tbody>
        <tr class="even_gradeA" id="1">
        <td>
        1
        </td>
        <td>
        XY
        </td>
        <td>
        passwoed
        </td>
        <td>
        Ja
        </td>
        <td>
        jajovic
        </td>
        <td>
        2
        </td>
        </tr>
        <tr class="even_gradeA" id="2">
        <td>
        2
        </td>
        <td>
        jojo
        </td>
        <td>
        fa25af5301e2dda1fddea740200aa10ab6c70d86
        </td>
        <td>
        jojo
        </td>
        <td>
        jojovicko
        </td>
        <td>
        2
        </td>
        </tr>
        <tr class="even_gradeA" id="3">
        <td>
        3
        </td>
        <td>
        kuk
        </td>
        <td>
        d588aebb93e3adf70eac1fb479d6d53f9dc21816
        </td>
        <td>
        kuk
        </td>
        <td>
        kukovic
        </td>
        <td>
        3
        </td>
        </tr>
        <tr class="even_gradeA" id="10">
        <td>
        10
        </td>
        <td>
        admin
        </td>
        <td>
        f865b53623b121fd34ee5426c792e5c33af8c227
        </td>
        <td>
        admin
        </td>
        <td>
        adminovic
        </td>
        <td>
        3
        </td>
        </tr>
        </tbody>
</table><button id="btnDeleteRow">Delete</button>



</body>
</html>

All

I am using my SOAP API using java script.

this example explain how to send single soap request using js

Code:

var symbol = "MSFT"; 
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "http://www.webservicex.net/stockquote.asmx?op=GetQuote",true);
xmlhttp.onreadystatechange=function() {
 if (xmlhttp.readyState == 4) {
  alert(xmlhttp.responseText);
  // http://www.terracoder.com convert XML to JSON 
  var json = XMLObjectifier.xmlToJSON(xmlhttp.responseXML);
  var result = json.Body[0].GetQuoteResponse[0].GetQuoteResult[0].Text;
  // Result text is escaped XML string, convert string to XML object then convert to JSON object
  json = XMLObjectifier.xmlToJSON(XMLObjectifier.textToXML(result));
  alert(symbol + ' Stock Quote: $' + json.Stock[0].Last[0].Text); 
 }


}
xmlhttp.setRequestHeader("SOAPAction", "http://www.webserviceX.NET/GetQuote");
xmlhttp.setRequestHeader("Content-Type", "text/xml");
var xml = '<?xml version="1.0" encoding="utf-8"?>' +
 '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
                'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +
                'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' + 
   '<soap:Body> ' +
     '<GetQuote xmlns="http://www.webserviceX.NET/"> ' +
       '<symbol>' + symbol + '</symbol> ' +
     '</GetQuote> ' +
   '</soap:Body> ' +
 '</soap:Envelope>';
xmlhttp.send(xml);
// ...Include Google and Terracoder JS code here...

Now i want to send multiple soap request at a time (mean request more than one envelop).

hi everyone..
i am using ajax to change the banner background while pressing on refresh
Note:it must be a background image because i will display data from database...


http://www.graphicano.com/isis/nile_crown2.php

please look at this link...

my problem is:
when i press refresh button in Firefox browser it changes the background and on pressing refresh again the background will change

but in internet explorer 8.0 it changes the background only for the first time and on pressing refresh again the background will not change.

how i can fix this problem ?? i want the user to press refresh at any time and the background will change.. not only for the first time?
at the same time it must be a background image because i will display text from database...

I have the following ajax code:

Quote:
.............
.............
.............
XHR.createXMLHttp();
XHR.open("POST", "/cgi-bin/addpost.cgi", true);
XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XHR.onreadystatechange = function() {
if (XHR.readyState == 4) {
if (XHR.status == 200) {
alert("Operazione effettuata con successo");
}
else {
alert("Operazione non riuscita");
}
}
}
XHR.send(url);
The function send data, but it don't return never alert windows. Where is the problem?

Right i'm having trouble with a Ajax refresh external page script.

Code:

<script type="text/javascript">
	function Ajax()
	{
		var
			$http,
			$self = arguments.callee;
	
		if (window.XMLHttpRequest) {
			$http = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			try {
				$http = new ActiveXObject('Msxml2.XMLHTTP');
			} catch(e) {
				$http = new ActiveXObject('Microsoft.XMLHTTP');
			}
		}
	
		if ($http) {
			$http.onreadystatechange = function()
			{
				if (/4|^complete$/.test($http.readyState)) {
					document.getElementById('ReloadThis').innerHTML = $http.responseText;
					setTimeout(function(){$self();}, 1000);
				}
			};
			$http.open('GET', 'stats.php' + '?' + new Date().getTime(), true);
			$http.send(null);
		}
	
	}
	</script>
	<script type="text/javascript">
		setTimeout(function() {Ajax();}, 1000);
	</script>

<div id="ReloadThis">

Loading....

</div>

That's what i'm currently using, but everytime it refresh's it well, i've got a marquee in the stats.php file & i want it to refresh every second but the marquee jumps back to the right and starts again i want a Ajax script that dont affect the external data that load's like facebook does.

Can anyone help?

Thanks...

I'm a newbie so excuse me if question could be stupid
I have a webpage where i have placed a form html with recaptcha validation
I have grabbed on the net following code :

Code:
Code:

<script type="text/javascript">
function validateCaptcha()
{
    challengeField = $("input#recaptcha_challenge_field").val();
    responseField = $("input#recaptcha_response_field").val();
    //alert(challengeField);
    //alert(responseField);
    //return false;
    var html = $.ajax({
    type: "POST",
    url: "http://mysite.com/script.php",
    data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
    async: false
    }).responseText;
    
    if (html.replace(/^\s+|\s+$/, '') == "success")

    {
		
        $("#show").html("Success. Submitting form.");
		
        return false;
        // Uncomment the following line in your application
        //return true;
    }
    else
    {
        $("#show").html("Your captcha is incorrect. Please try again");
        Recaptcha.reload();
        return false;
    }
}
</script>

and form html:

Code:
Code:

<form action="#"  method="post" onSubmit="return validateCaptcha()">

<p><?php echo recaptcha_get_html($publickey);?></p>
    <p style="color: red;" id="show">&nbsp;</p>
    <input type="submit" name="Submit" value="Submit">

</form>

On the file: script.php i have placed php code:

PHP Code:
PHP Code:
<?php
require_once('controllers/recaptchalib.php');

$privatekey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

# was there a reCAPTCHA response?
{
    $response = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

if (!$response->is_valid) {
  echo 'ERROR: The recaptcha code was not entered correctly or expired.';
  die;

  
    
}

else   
echo "success";
}


?>

the code work but i don't want display in my webpage only messages:
"Your captcha is incorrect. Please try again" if code is incorrect and
"Success. Submitting form." if code is correct.
But if the code is correct i want display under sentence "Success. Submitting form." the content of script.php ie print a table or whatever script contain obviously without reloading webpage or redirect to another page
How to?
thanks

Hello,

Currently, i am working on a website. I need that when the data comes from ajax in the div or span tag, it should take space by moving down the data already present there without overwriting it.

But it doesnot happens. When i get data through ajax, then it overwirtes the previous data which was already present there and doesnot move the previous data downwards.


Any help plz

Firstly I apologize if this is the wrong forum, I wasn't too sure of where to post it as my problem covers several areas.

I have been writing a 'Facebook Application' which is primarily in PHP. It is about the economics of futuristic spaceship production. I have done the bulk of the game mechanics in PHP and have set about making the interface.

I am stuck on a page which can be viewed here where you can employ workers to work in your mines/factories.

Each worker has five skill types (worker, miner, manager etc...) and to be employed he must be offered a contract for one of those skills.

The process of employing someone works like this.

1. You search for the 'type' of worker you want.
2. Search Results are shown.
3. You click on the name of the person you want to employ.
4. A new form appears (under the table) for you to fill in the contract details.
5. The person (PHP function!) rejects or accepts the contract.

If you look at the link above you will see I've made a search box which uses AJAX/html/php to make the table (which I'm quite proud of as I'm a bit of a noob when it comes to javascript/ajax). Ive come unstuck as to how to select which worker to offer a contract to. What needs to happen is:

1. The name or a tick box is selected.
2. It sends some form of unique identifier back to the same page so the form (to offer a contract) knows which person in the table is being referred to *preferably without a page refresh*.

Any help/advice would be greatly appreciated. I'm assuming I'm going to need to use some form of get/post and ajax but i cant figure out how to do it.
I hope all this makes sense.

i have used a an ajax xml ticker script in my webpage
here's the link to the page where i got the script : http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

The problem is as soon as it reaches the end of the content, It does not cycle up to the first news item immediately there is a gap of few seconds before starts showing the items again.

Hi Chaps,

I'm trying to get a AJAX script to work, but am having problems.

I have a page with two dropdown menus, the idea is that the first dropdown [customers] will then filter the options of the second [contacts]:

//DROPDOWN.PHP
PHP Code:
<form method="post" action="">
<select name="customer" onChange="ContactGrab('."'".'ajaxcalling.php?id='."'".'+this.value);">
    <option value="">Select Customer</option>
    <?php
do {  
?>
    <?php echo "<option value=".'"'.$row_rsCustomer['custid'].'" >'.$row_rsCustomer['custname']."</option>";?>
    <?php
} while ($row_rsCustomer = mysql_fetch_assoc($rsCustomer));
  $rows = mysql_num_rows($rsCustomer);
  if($rows > 0) {
      mysql_data_seek($rsCustomer, 0);
      $row_rsCustomer = mysql_fetch_assoc($rsCustomer);
  }
?>
  </select><br />
<div id="details">
  <select name="details">
  <option value="">Select Contact</option>
    <?php
do {  
?>
    <option value="<?php echo $row_rsContact['contactname']?>"><?php echo $row_rsContact['contactname']?></option>
    <?php
} while ($row_rsContact = mysql_fetch_assoc($rsContact));
  $rows = mysql_num_rows($rsContact);
  if($rows > 0) {
      mysql_data_seek($rsContact, 0);
      $row_rsContact = mysql_fetch_assoc($rsContact);
  }
?>
  </select>
  </div>
</form>

The OnChange action should call the AJAXCALLING.PHP page, where the other select options are filtered, by column [FK_custid]

//AJAXCALLING.PHP
PHP Code:
<select name="details">
<option value="">Select Contact</option>
  <?php
do {  
?>
  <option value="<?php echo $row_rsContact['contactid']?>"><?php echo $row_rsContact['contactname']?></option>
  <?php
} while ($row_rsContact = mysql_fetch_assoc($rsContact));
  $rows = mysql_num_rows($rsContact);
  if($rows > 0) {
      mysql_data_seek($rsContact, 0);
      $row_rsContact = mysql_fetch_assoc($rsContact);
  }
?>
</select>

This is powered by the AJAXSCRIPT.JS page
Code:

function CreateXmlHttpObject() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();//creates a new ajax object
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");//this is for IE browser
			}
			catch(e){
				try{
				req = new ActiveXObject("Msxml2.XMLHTTP");//this is for IE browser
				}
				catch(e1){
					xmlhttp=false;//error creating object
				}
			}
		}
		 	
		return xmlhttp;
	}
	

  function CategoryGrab(strURL)
    {         
     var req = CreateXmlHttpObject(); // fuction to get xmlhttp object
     if (req)
     {
      req.onreadystatechange = function()
     {
      if (req.readyState == 4) { //data is retrieved from server
       if (req.status == 200) { // which reprents ok status                    
         document.getElementById('details').innerHTML=req.responseText;//put the results of the requests in or element
      }
      else
      { 
         alert("There was a problem while using XMLHTTP:\n");
      }
      }            
      }        
    req.open("GET", strURL, true); //open url using get method
    req.send(null);//send the results
     }
    }

My problem is that when I open the dropdown.php page, the browser status says 'Done, but with errors on the page' and the second dropdown isn't filtering. I can get rid of the status warning by removing:
Quote:
...onChange="ContactGrab('."'".'ajaxcalling.php?id='."'".'+this.value);">
But obviously that is something that is needed to pass the [custid] in the URL parameter....
Can anyone help me on this, as I haven't got a clue what I'm missing or where I have gone wrong!

Dear forum guys,
I'm having a problem regarding the POST method with Ajax.
I'm sending form inputs through Ajax by POST method to an ASP file to add them back to a database.
However, what i noticed is that whenever i send the inputs of the form let's say ("username") through Ajax by the POST method, the result is the input "username" however with no spaces.
Why is it that the Ajax POST method ignores the spaces and sends the inputs without the spaces?
I tried it with the GET method and found out that GET doesn't ignore the spaces, it worked. But the application that i'm trying to build requires sending bigger data that the GET method can't send. SO therefore i need the POST method but i ran into the problem of Spaces Being Ignored.

Please, is there a way to send any string that contains spaces through AJAX POST method and not ignore the spaces in the output???

Thank You
David

All,

I am trying to create a page for a application that uses a technique where a page refresh is generated by an ajax call followed by an innerhtml replace on the main page div.

Unfortunately this strange way of refreshing pages is leading to an issue with an image I am trying to display. Every time it refreshes the images flashes off and then is redisplayed, there are other elements on the page( smaller images, text etc... ) and they do not seem to be affected.

The image is not large, only 23 k, but it is the only one affected. If I run the page on firefox I do not encounter this issue which makes me think that is a lovely IE feature that forces the image to be retrived from the server on every innerhtml replace instead of from the cache.

I am using IE8 to test this, any suggestions are greatly appreciated as I have been trying to fix this for a while.

Thanks,
N

hello, can anyone help me with a javascript-php-ajax problem?

I have created a table with checkboxes and whenever an ajax function is called to refresh, the checkboxes that were highlighted and checked get reset, here is my javascript for the check function:

$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);

//To Highlight
if ($(this).attr("checked") == true)
{

//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
$("#policy").find('tr:not(#chkrow)').css("background-color","#FC9A01");
}
else
{

//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
$("#policy").find('tr:not(#chkrow)').css("background-color","#FFF");
$("#policy").find('tr.alt:not(#chkrow)').css("background-color","#EAF2D3");
}

});

$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
{
$("#checkall").attr('checked',false);
$(this).closest('tr').css("background-color","#ffffff");
}
if(this.checked == true)
{
$(this).closest('tr').css("background-color","#FC9A01");
CheckSelectAll();
}
if(this.checked == false)
{
$(this).closest('tr').css("background-color","#ffffff");
$(this).closest('tr.alt').css("background-color","#EAF2D3");
}
});

function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}

});

Edit: Nevermind