|
JavaScript - Allow Ajax Request Cross Domain?
Hi,
I have searched and searched... Is there a way of using the Ajax httpRequest cross domain? thanks Similar TutorialsHi All, I'm writing this post as there are alot of questions about Cross Domain AJAX request so i'm going to give an overview of the different ways and the best practices Ok so there are 2 systems for this the key difference is how much control you have. If you control the Requested site you can use Javascript Safe calling to that server, this is all done via a few Headers so to do this all you have to do is send some headers from the page your requesting. The first is tell the browser that the site the AJAX call is coming from is allowed this is done with "Access-Control-Allow-Origin: " Now this can be set to a wild card and allow all sites to access the page "Access-Control-Allow-Origin: *" Or you can say only a set server can "Access-Control-Allow-Origin: mydomain.com" This header allows GET requests but what if you need to post data to the site well you need to tell the browser that POST data is allowed to be sent Access-Control-Allow-Headers: GET,POST Now we run into the problem that sending post data the browser will send the header Content-Type but your server has not told the browser its allowed to send that header so Access-Control-Allow-Methods: Content-Type Will allow the header to be sent if you wish to send any other custom headers you have to make your server tell the browser its allowed to send them this is done by adding them as a comma delimited list via the "Access-Control-Allow-Headers" header Now if you dont have control well then your back to using a script that is local to the AJAX script then sending the data via cURL or another connection method to the remote server Please note i will be uploading examples in php later. Example Scripts Remote Server PHP Code: header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: GET,POST"); header("Access-Control-Allow-Methods: Content-Type"); $output = array( 'response' => 'hello world!', '_GET' => $_GET, '_POST' => $_POST, ); echo json_encode($output); Client Script -- please note built for Google Chrome PHP Code: var getExample = new XMLHttpRequest(); getExample.open("GET", "http://www.test.com/remote.php?test=set", true); getExample.onreadystatechange = function(requestHandle){ console.debug(requestHandle); } getExample.send(null); var postExample = new XMLHttpRequest(); postExample.open("POST", "http://www.test.com/remote.php?test=set", true); postExample.onreadystatechange = function(requestHandle){ console.debug(requestHandle); } postExample.setRequestHeader("Content-Type", "x-www-urlencoded-data");// this is sent to prevent the requested server not saving post data postExample.send("?set=test"); If you are unable to Edit files on the remote server you can use the link provided by Kor http://www.troywolf.com/articles/ This will give you all the information you require to use php to talk to the remote server (basic proxy in effect) Hello, I am trying to create an imageuploader for my forum hosted on domain forum.com (fictional domain name) The image uploader is hosted on domain uploader.com (fictional domain name) When the uploader is done i want info to be passed from the uploader to the texteditor on the forum using javascript. I tried everything i could think of with document.getElementById but to no avail. The element on the forum is clickableEditor.textarea Is it possible and if so, can someone please help me out? JavaScript code is not traversing via Iframe with Cross Domain. Actually i was assigned with a project, to grab the top page URL, which has many Iframes, which are coming from different domains. The final sub domain has the JavaScript code, which has to grab the top page URL. Can anyone help me out in this???? Hi guys. I want to create login form similar like facebook login which web owner can put the script and it will become login for their web and also it will auto register at their web. I believe it need to use javascript because javascript is cross platform. Can someone give me a clue for me to start on? hi, my working project (needs a proxy): http://www.mypubspace.com/dashtest/order.html currently working through this tutorial, I have setup a proxy and saved it as proxy.php http://www.wait-till-i.com/2010/01/1...query-and-yql/ I just need to put this piece of code in my JavaScript but not sure where?! Code: var url = $(this).attr('href');
if(url.match('^http')){
url = 'proxy.php?url=' + url;
}
here is my project code Code: <html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var townRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
townRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
townRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
townRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
townRequest.onreadystatechange = function(){
if(townRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = townRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
townRequest.open("GET", "http://www.mypubspace.com/dashtest/townpubs.php" + queryString, true);
townRequest.send(null);
}
function countyFunction(){
var countyRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
countyRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
countyRequest.onreadystatechange = function(){
if(countyRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = countyRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
countyRequest.open("GET", "http://www.mypubspace.com/dashtest/countypubs.php" + queryString, true);
countyRequest.send(null);
}
function townlistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxTownlist');
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
ajaxRequest.send(null);
}
function countylistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxCountylist');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
ajaxRequest.send(null);
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<input type='hidden' id='name' />
<input type='hidden' id='county' />
<input type='hidden' id='town' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>
please help?! hi, in my page he http://www.mypubspace.com/dashtest/order.html I would like this working Cross Domain and output in JSON? Can anyone please help me? thanks code: Code: <html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var townRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
townRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
townRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
townRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
townRequest.onreadystatechange = function(){
if(townRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = townRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
townRequest.open("GET", "http://www.mypubspace.com/dashtest/townpubs.php" + queryString, true);
townRequest.send(null);
}
function countyFunction(){
var countyRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
countyRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
countyRequest.onreadystatechange = function(){
if(countyRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = countyRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
countyRequest.open("GET", "http://www.mypubspace.com/dashtest/countypubs.php" + queryString, true);
countyRequest.send(null);
}
function townlistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxTownlist');
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
ajaxRequest.send(null);
}
function countylistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxCountylist');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
ajaxRequest.send(null);
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<input type='hidden' id='name' />
<input type='hidden' id='county' />
<input type='hidden' id='town' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>
Anyone know if there is a way to get the title string from an iframe src coming from another domain?
I read the "http://bodybrowser.googlelabs.com/body.html" page into an Iframe on my page. I now need to print the "viewcontainer" DIV that resides in the iframe. Accessing divs in an iframe is an issue with cross domain sources. Can anyone help me with a workaround or different idea? Thanks in advance!! Hi, I'm currently developing an application (in php) for a website that is to be integrated into their website using iframe. It's imperative that it's done using iframe as I am placing the application on my own server. In short, the iframe element appears on my customer's website (lets say customer.com) - something like this: <iframe width="440" height="500" frameborder="0" scrolling="no" src="http://www.myserver.com/index.php"></iframe> However, it's quite imperative that my application (i.e. what's located at myserver.com/index.php) only can be shown in iframe elements placed at customer.com. That is: I want to make sure that a similar iframe element from another web server (lets say anothercompany.com) has the possibility to iframe my application located at myserver.com. My first idea was to check this using php in my application: by looking at HTTP_REFERER, I can get the location of the page containing the iframe element. That solution seems to work fine. However, as is well known, it is possible to spoof and even hide the http_referer server variable. Still, as I only want to make sure that no other server accesses the application through an iframe object, it should perhaps be an okay solution - if someone wants to access the application from their own browser, and spoofing the HTTP_REFERER variable, I'm fine with that. (I just want to make sure that only customer.com, and not anothercompany.com, can integrate the application with an iframe). The other thought I had was to use javascript and DOM stuff. The idea is then to use javascript to check that the application has a parent frame and that its location is at customer.com. However, as we are dealing with two different domains here, I'm having a lot of problems getting the document.parent.location variable - it's not allowed! Any solutions on how to do this in javascript? Any way to bypass the obstacle above? Or perhaps javascript isn't the best way? My guess is that there is a solution out there somewhere - I guess there are a lot of ads that are integrated into various websites using iframe, and where the actual content (i.e. what's inside the iframe element) can check which server is embedding the ad through an iframe element. I've been working on a site where the content is displayed in an iframe. The iframe content is on a different domain than the iframe itself. I've already got around the cross-domain problems by creating a file on the parent domain that the iframe content references via another iframe. (which uses parent.parent to skip the permissions issue) That was all fine and pressing back and forward in the browser navigated back and forward in the iframe (at least in FF, not 100% sure about other browsers) Then the client wasn't happy that the url in the browser didn't change and pages couldn't be bookmarked. So I created a solution where the parent.parent.location.href was changed to be domain.com/#/path/to/iframecontent.php so that pages could be bookmarked, that works fine but now back and forward don't work, or more specifically the url changes correctly but the iframe content doesn't go back. I'm wondering if anyone out there has a jquery solution to using an iframe that automatically adjusts it's height of the child and also works cross domain. Any help would be greatly appreciated. I'm facing an issue with fetching the page URL from an IFRAME with cross domain. Is there any approach/ any ways to achieve this? Hi, I have an ajax script that I would like to use to retrieve a password hint from a database. Both the ajax script and the php retrieval script are stored on the same domain (we'll call it domain1.com), but the ajax script runs on another domain (domain2.com). All the scripts are working fine, individually, but when I try to integrate them, I'm getting a ready state of 4, but an HTTP status of 0. I've traced the code flow and the retrieval script is being called by the ajax script OK and it's echoing all the right stuff, but it's just not getting back to calling ajax routine. I've read that an ajax routine can only call a script that resides on the same domain that it runs on. Is this correct and, if so, does anyone know of a work around, because I really need to be able to store the ajax script on domain1 and run it on domain2? If not, then can anyone suggest why I'm getting an HTTP status of 0, when all the individual components are working fine? Debbie Hello all, I am building a service that other developers will use. As part of this, they need to embed a form on their website. This form will be hosted on my server, be updated periodically, etc. We'd been trying to create a Javascript file that would use JQuery to load the form, but we're running into issues from the Same Origin Policy, where Ajax requests cannot be made across different domains. Does anyone have an idea of how to fix this? We thought about using an iframe, but that solution will not suffice. Thanks! hi, I had a doubt... here is a simple ajax program to return the length of the string entered in the input html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src="grade.js" > </script>
<title>Untitled Document</title>
</head>
<body>
<form action="fallbackpage.php" method="post">
<p>Welcome, student. Please enter your essay he </p>
<p>
<textarea name="essay" id="essay">
</textarea>
</p>
<p>
<input type="submit" name="submit" value="Submit" onclick="
grade(this.form.essay.value);" />
</p>
</form>
</body>
</html>
Java script Code: // JavaScript Document
function grade(essay) {
// Mozilla version
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
// IE version
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
essay=encodeURIComponent(essay);
xhr.open("POST","grade.php");
xhr.setRequestHeader(
'Content-Type',
'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send(essay);
xhr.onreadystatechange=function() {
if (xhr.readyState==4) {
grade = xhr.responseText;
alert(grade);
}
}
}
php: PHP Code: <?php function grade_essay($essay) { return strlen($essay); } $essay = urldecode(implode(file('php://input'))); $grade = grade_essay($essay); echo $grade; ?> I just use an alert box to alert the length. The script works properly ONLY when the AJAX request is able to outrace the submit request.... which doesnt happen. I have included the action="" part as a fallback option incase JS is disabled What am i doing wrong here? I am learning JS now in the free time... Also i did notice this... when i change the submit button in html to the following code i get 2 alert box..1st one's undefined(i know why) but second one's i will get proper answer Quote: <input type="submit" name="submit" value="Submit" onclick="alert(grade(this.form.essay.value));" /> PS: This is a tutorial here http://www.webmonkey.com/2010/02/aja...ners/#more-775 Hi there, I am trying to make a view that stacks images on top of one another. As the user uses mouseup or mousedown (+ LMB click) the user can scroll through the images. I am trying to use Ajax to load the new image when the user mousesup. RIght now nothing happens on mouseup. Can someone tell me what I am doing wrong please? thank you. FYI: no errors on Firebug, hence I am posting here. Code: $("#filmviewer").mouseup(function(){
alert("t");
});
html Code: <div id="filmviewer" style="width:400px;"> <img src="pic_1.jpg" /> </div> The problem is when I click and mouseup over the image the alert("t") does not fire. what am I doing wrong? Could someone help me figure out why this AJAX request is not completed in Internet Explorer. Thanks. Code: function openmanagegraphs() {
document.getElementById('managegraphs').style.display = 'block';
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "PHP/mgon.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
CurrentRun;
xmlhttp.send("mgon=true");
}
I am using this code... simplified for example Code: [
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"
<div id="content"></div>
Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks Hey, as the subject says... I'm struggling to call other external files from within a file, requested by an Ajax.Request. It's bascically a request to call a file that updates a mysql database, and I want to include my database connection php file so I don't have to keep repeating my connection settings. here is the request: Code: new Ajax.Request('tools/server_reorder_list.php', options);
and within that file I'm trying to do something like this: Code: include ("../config/dbconnect.php");
$i=1;
foreach($_POST['item_list'] as $key=>$value) {
mysql_query("UPDATE `cs_pages` SET `position`='".$i."' WHERE id_page ='".$value."'");
$i++;
}
I've tried all kinds of ways to include the files, from the above, to typing the entire path. The only way I can get this request to work is by actually typing my connection settings in the requested file. Any help greatly appreciated. Thanks! 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");
}
}
});
|
|||||||