|
JavaScript - Javascript Won't Work On On Data Retrieved By 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");
}
}
});
Similar TutorialsHello everybody, I have the following problem: I have a form in a page in which you have multiple choices on how you would like the data from an XML file to appear. What I want is that when I pick the subsequent selections they be displayed in the next page. For example (you have chosen cyan, and a range from 10-50, etc) i want the xml to appear on a third page in the way that i selected it, generating at the same time automatically the respective xsl file. record from xml Code: <myxml> <record> <id>1</id> <football_team>Aberdeen</football_team> <position>28</position> <ddd>Mbira</ddd> <www>833.48</www> <ball>Aberdeen</ball> <bin>42</bin> <bat>Jew's harp</bat> <bend>10</bend> </record> </myxml> (the xml created from a db using php ) I have been stuck with this problem for over a week now and I'm going crazy. Thank you for your help in advance. If you need further info please tell me to post it. 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, I have searched and searched... Is there a way of using the Ajax httpRequest cross domain? thanks 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? 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 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");
}
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! Hello There, I have form which submitted data by checkbox checked, the checkbox as looks: PHP Code: <input type="checkbox" name="agree" value="1" checked="checked" onclick="document.getElementById('parentTable').className,processForm() = this.checked ? 'vehicleOn' : 'vehicleOff'" /><label for="agree">Agree</label> and the Ajax as following Code: function processForm() {
$.ajax({
type: 'POST',
url: '<?php echo $send; ?>',
data: 'opt1=' + encodeURIComponent($('input[name=\'opt1\']:checked').val() ? $('input[name=\'opt1\']:checked').val() : '') + '&opt2=' + encodeURIComponent($('input[name=\'opt2\']:checked').val() ? $('input[name=\'opt2\']:checked').val() : '') + '&comment=' + encodeURIComponent($('textarea=[name=\'comment\']').val()) + '&agree=' + encodeURIComponent($('input[name=\'agree\']:checked').val() ? $('input[name=\'agree\']:checked').val() : ''),
beforeSend: function() {
$('.success, .warning').remove();
$('#confirm_button').attr('disabled', 'disabled');
$('#confirm_title').after('<div class="wait"><img src="mage/loading_1.gif" alt="" /> <?php echo $text_wait; ?></div>');
},
complete: function() {
$('#confirm_button').attr('disabled', '');
$('.wait').remove();
},
success: function(data) {
if (data.error) {
$('#confirm_title').after('<div class="warning">' + data.error + '</div>');
}
if (data.success) {
$('#confirm_title').after('<div class="success">' + data.success + '</div>');
$('input[name=\'opt1\']:checked').attr('checked', '');
$('input[name=\'opt2\']:checked').attr('checked', '');
$('input[name=\'agree\']:checked').attr('checked', '');
}
}
});
}
The Problem is won't work with IE only, I tested it with IE 6, Anyone could suggest me what I could do? any pointers, samples or links I would be appreciate and Thanks a lot. Code: function dimensions(){
$('.resource-container').css("width",($(window).width() - 306) + 'px');
$('.resource-title').css("width",($(window).width() - 366) + 'px');
$('.resource-container').css("height",($(window).height() - 250) + 'px');
$('.resource-content ul').css("height",($(window).height() - 292) + 'px');
$('.resource-iframe').css("width",($(window).width() - 306) + 'px');
$('.resource-iframe').css("height",($(window).height() - 275) + 'px');
}
function resourcego(id){
$.ajax({
url: "http://glynit.co.cc/resource.php?id=" + id + "&item=list&part=name",
cache: false,
success: function(data){
name = data;
$.ajax({
url: "http://glynit.co.cc/resource.php?id=" + id + "&item=list&part=list",
cache: false,
success: function(data){
list = data;
$('.resource-toolbar').html('<div id="resource-title" class="resource-title">' + name + '</div>');
$('.resource-content').html('<div class="resource-list"><ul>' + list + '</ul></div>');
dimensions();
}
});
}
});
}
function viewresource(id,ref){
$.ajax({
url: "http://glynit.co.cc/resource.php?id=" + id + "&content=name",
cache: false,
success: function(data){
name = data;
$('.resource-toolbar').html('<div id="resource-back" class="resource-back" onclick="resourcego(' + ref + ');">Back</div><div id="resource-title" class="resource-title">' + name + '</div><div id="resource-print" class="resource-print">Print</div>');
$('.resource-content').html('<iframe id="resource-iframe" class="resource-iframe" src="http://glynit.co.cc/resource.php?id=' + id + '&content=content"></iframe>');
dimensions();
}
});
}
$(window).load(function() {dimensions();});
$(window).resize(function() {dimensions();});
The webiste is http://www.glynit.co.cc/ and the login is guest:guest And the page is the resources page and it is the links on the left of that page that do not work. 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). How to make request "rtsp://localhost:554/sample_100kbit.mp4"? (in HTML5 or Javascript) I want to access video streaming data which source is present on Darwin server
Hi there How to send data from a text feild in GET method using an AJAX call... I already have codes working Code: to = "interfaces/add_department.jsp";
parm = "name="+name.value+
"&name2="+name2.value;
alert(parm)
post(to,parm,callBackFunctionForAddDepartment);
Here the variable name may have "me&you" or "me you" like that.... so how do i encode it so that it reaches properly? Scenario: Client Side : Simple functions that have events tied to different elements. Each time an event is triggered the function begins an Ajax call to an external server side page filled with JS functions. Server Side : Our client side AJAX call sends the name of the function we want to call out on this file. Once called and performed, it returns DOM edits that could be fired once our client side page receives the data back from Ajax. I know that data being returned from Ajax is always a string. But would it be possible? I mean could the server side file send out commands or rather DOM edits that the client side could pick up on and perform? I am almost 100% certain the answer is no due to JS needing to be cached in the browser and what not, but I figured I would ask the experts anyways. BTW: objective is to move sensitive core JS functions to prevent online application theft... without Flex or Air. I am doing a project and I have a problem. I have retrieved data from a json file using ajax and the xmlhttprequest, but I am not able to put the content I retrieve into the dojo content pane. The content pane is inside a border container. I have tried the following, but it does not work. The HTMLPage4.html has the json data inside. please help me really urgent to me!!!!!!!as soon as possible Code: function getInfoContent(graphic)
{
function ajaxRequests()
{
var activexmodes = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i = 0; i < activexmodes.length; i++) {
try {
return new ActiveXObject(activexmodes[i])
}
catch (e) {
//suppress error
}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
return new XMLHttpRequest()
else
return false
}
var mygetrequests = new ajaxRequests()
mygetrequests.onreadystatechange = function() {
if (mygetrequests.readyState == 4) {
if (mygetrequests.status == 200 || window.location.href.indexOf("http") == -1) {
var bookss = eval("(" + mygetrequests.responseText + ")") //retrieve result as an JavaScript object
var rssent = bookss.infos.info
for (var i = 0; i < rssent.length; i++) {
// alert(mygetrequests.responseText);
var placeImg = ""
var txt = ""
// placeImg += rssent[i].descImg
txt += rssent[i].desc
var shorttxt = ""
shorttxt += txt.substring(0, 30);
var bc = new dijit.layout.BorderContainer({ style: "font-size: 11pt; height: 574px; width:739px; border:0px;" });
var c1 = new dijit.layout.ContentPane({
region: "top",
style: "height: 11.5%; width: 100%; color: black; background-color: transparent; border:0px;",
content: "<table><div id = \"mydiv\">" + shorttxt + "<font color = '#0000FF' size = '1'><a onclick='showmore();'><u> More...</u></a></div></td></table>"
});
bc.addChild(c1);
}
}
else {
alert("An error has occured making the request")
}
}
return bc.domNode;
}
mygetrequests.open("GET", "HTMLPage4.htm", true)
mygetrequests.send(null)
}
Hi, I have a problem with sending data from a form to a php script with AJAX. To test if it works, I try to send data from the form, print it in the php with "echo", and then put it back in the initial html file. My Javascript code is: Code: function registerPrivateUser()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var postData="firstName="+ document.getElementById("txtFirstName").value;
var url="classes/users/checkRegistration.php";
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("POST",url,true);
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send(postData);
}
The function stateChanged, basically says: Code: if (xmlhttp.readyState==4)
{
var strResponse;
strResponse=xmlhttp.responseText;
alert('Response:' + xmlhttp.responseText);
}
checkRegistration.php looks like this: PHP Code: <? session_start(); $firstName=$_POST['firstName']; echo($firstName); ?> The problem is that the response is empty, but I don't know why. I have checked the input data and the postData variable says "firstName="+input (e.g. "firstName=Robert"), so that's not the error. I have read several forum posts here, but still haven't figured out what I'm doing wrong. If anyone could please tell me, I would appreciate it alot. I'm writing a web app and so far: - the user enters some information on the web page - user data is submitted to a PHP script (using AJAX, so w/o a page refresh) which processes the data and generates a list of items that need to be returned to the user Now, I need to return the data -- preferably in the form of a list, where each returned item has a check box (so the user can choose which items in this list the subsequent operations will affect). However, can a PHP script effectively add/remove contents from such a checklist, or would this be something done better through Javascript only? For example: this, I think, or something similar. Luckily the PHP script that processes the data is short at this point, so I'd like to know whether I should rewrite it in Javascript (assuming Javascript can deal with REST well) to avoid a hassle. Someone built this application for me. It contained a web page, the user clicked on the detail button to view a detail page, and then clicked on an update button on the detail page to update the database. This type of navigation was unappealing to me. I prefer a free floating form that contains a list, then by clicking on expand, you get to see detail on the specific item, and then click update all within the same free floating form. Is this possible with javascript and ajax? If so, can anyone provide examples? Thanks.
All, I have some code on my page which changes images in a div without reloading the page. This works great, however my problem comes with I go through a couple images and the actual URL is still on the original image. Is there any way to change the URL when I click the image as well?? Thanks in advance. Hello, I am using AJAX and got the output from AJAX like the below line Ajax function Code: if (http_request.readyState == 4) {
if (http_request.status == 200) {
var_output = http_request.responseText;
document.getElementById('result').innerHTML = var_output; //value 100 displayed
}
else
{
alert('There was a problem with the request.');
}
}
In my javascript function, i need to get the value 100 from that innerHTML. Is it possible to get this value? Code: // I tried this way, but not working
var txt = document.getElementById('result').innerHTML;
or Store it in hidden field and get the value from javascript. Please suggest any idea to solve this problem Thanks I have to display a div before firing a sync ajax in javascript div is getting displayed in firefox but not in IE and chrome. I need to basically display a download bar to indicate the user that the request is in progress |
|||||||