JavaScript - Xmlhttprequest Ready State 4 Never Reached ?

Hi there. I want to slide in (jquery) a link in the bottom right when the page loads that offers the user to be pushed back to the top of the page.

So far all is well. I have it appearing at width 1024 or bigger. With a media query set in order for it not to appear for smaller devices:

#totop {
position: fixed;
bottom: 0;
right: 10px;
background: #FFF;
color: #000;
padding: 10px;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
display:block;
-moz-box-shadow: 10px 10px 5px #000;
-webkit-box-shadow: 10px 10px 5px #000;
box-shadow: 10px 10px 5px #000;

}



@media screen and (max-width: 1023px) {

#totop {
display: none; /* Remove to top button */
}


Now I understand I want an if statement checking whether the css is to display block or none. Or if this doesn't work have an if statement checking the screen width itself rather than media queries.

So far I have this:

$(document).ready(function() {
if( $('#totop').is(':visible') ) {
("#totop").slideDown("slow");
} else {
("#totop").hide();
}
});

Please help!

In Jquery, there are following two concepts

1. Document.ready
2. Window.onload

How can i get to know when document is ready to use using pure javascript?

Hi,
I used this link fader script on my website: http://www.javascriptkit.com/script/...inkfader.shtml.

The browser activates this script when I move my mouse over the link - that's understood. But unlikely the browser needs 1 or 2 seconds to activated it (to read it) so the whole effect is delayed - it happens every first time I use the links after loading the page.

Question: is there a way to make the browser "read and remember" the script before I use the link so no delays appear? Any onLoad formula?

Thanks

All,
I currently have this code to make a post to my database:
Code:

var $dataString = 'name='+ $name + '&black_white=' + $black_white + '&color=' + $color + '&color=' + $other + '&other_text=' + $text; 
$.post("save_edits.php", {image_save_string: $dataString}, function(result) { 
$("#multiple_images").hide(); 
$("#result_success").html("<font color='red'>We've successfully saved your photo edits!</font><br><br>"); 
$("#image_divs").html(result); 
});

Within the result I'm actually recreating the form for them to use if they want. I have a decent amount of jQuery that got initialized when the original page was loaded. Once I get my new form it doesn't work because it wasn't originally included in the page initialization. Is there a way just to call the document.ready function again to have it reinitialize my form elements again? Thanks in advance.

I have a website which includes stories with multiple chapters. These chapters have a set of clickable arrows at top and bottom to take you forwards and back through the chapters, including a "last chapter" arrow.

When a story is in progress, the URL of the last chapter changes with each chapter added. Rather than having to go back into every previous chapter and change the URL of the last chapter by hand, I set them up so that the "last chapter" arrow is actually in an inline frame. That way, I only have to change the URL once, in the file go_end.htm which is the source for the frame. So both the picture of the arrow and its hyperlink are being accessed from outside.

My web pages are also set up to run on all major browsers and to detect the window width and resize all the artwork to fit, regardless of the browser and whether or not it accepts percentage sizes. Go_end.htm is no exception - it contains Javascript code which resizes the arrow so it is the same size as the ones which are actually in the parent page, outside the frame.

This setup works perfectly in IE and Netscape, but Google Chrome either fails to display the arrow or makes it huge so it doesn't fit the frame. This seems to be because their superfast new Javascript editor is *too* fast. If I bung an alert command into go_end.htm, asking it to say the value of picWidth (the variable which sets the width of the arrow) as it loadfs, what happens is this.

Google Chrome displays an alert saying that picWidth is zero, then loads the first instance of the inline frame with no got-to-end arrow. Then it displays an alert giving a proper value for picWidth and loads the second inline frame with the arrow correctly displayed and sized. If I take out the alerts, it doesn't load the arrow in *either* frame. It's obvious that inserting the alert command somehow forces it to recognise the value of the variable which it then retains for long enough to load the arrow on the second pass.

Any ideas for some command other than alert which would trick it into not loading the image until it's recognised the variable? If I put a time delay on loading the frame I can't see that that would help - the problem is that from the point at which it starts actually loading the frame it needs to wait for the variable to be set.

I'm starting to learn javascript and trying to get the below code to work with newer browsers. I'm not sure how to implement the below to make it work with XMLHttpRequest. There is a small form that uses this function to allow you to select an xml file to load. Your help is much appreciated. Thanks.

Code:

		function importXML() {
			
			
			if (document.implementation && document.implementation.createDocument) {
				xmlDoc = document.implementation.createDocument("", "", null);
				xmlDoc.onload = createQuiz;
			}
			else if (window.ActiveXObject) {
				xmlDoc = new ActiveXObject("Microsoft.XMLDOM");	
					xmlDoc.onreadystatechange = function () {
						if (xmlDoc.readyState == 4) createQuiz()
					};
			}
			else {
				alert('Your browser cannot handle this script');
				return;
			}
			xmlDoc.load(document.getElementById('file').value);
		}

Ok, so I have built a website using galleryCMS, a pre-built CMS for images, which outputs XML via php to an address of:

http://www.granitesupermarket.ca/login.php/view/xml

Firefox and Chrome can pull the XML from the webpage using my code, however IE does nothing with it at all. I have found that if I use a page with a proper xml extension then the code works fine (ie test.xml); however, without the .xml it seems like IE does nothing??

I am not the most advanced user, so tampering with the CMS is not the best option for me... is there any workaround that I might be able to employ? Maybe a way I could take the xml I get from "login.php/view/xml" and save it to gallery.xml on the same server? Any help or ideas would be helpful.

Code:

<html>
<head>
<title></title>
<head>
<body>
<script type="text/javascript">

// Get XML function
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}

// XML source
xmlDoc=loadXMLDoc("login.php/view/xml")

t=xmlDoc.getElementsByTagName("thumbnail");

// TEST THAT XML IS WORKING
document.write(""+ t[0].childNodes[0].nodeValue + "");


</script>

</body>

</html>

Hi there,

Im looking for a general function which would work for most browsers when using the xmlhttprequest() I am just trying to send input data to the server store it and send back a response.

I have one that works for both ie and ff, however when using ff the function does not return the text from the request to the server, but does with ie no problems.

Any help would be much appreciated.

Thanks

Code:

/* get response http request */
function getData(cURL) {
	var xmlHttp = null;
	xmlHttp = new XMLHttpRequest();
	/* branch logic for ff or ie */
	if (navigator.appName=='Netscape')
		lSynch = true;
	else
		lSynch = false;
	xmlHttp.open( "POST", cURL, lSynch );
	xmlHttp.send( null );
	var info = xmlHttp.responseText;
	return info;
}

I tried posting this same thread under AJAX and I didn't get a single response. I am wondering if it may be in the wrong section so I decided to try here. If this is bad posting etiquette, I apologize.

Hello. I am trying to use a form to submit values to MySQL and then
have a Google map returned that has certain parameters. I have modeled this code after an example I found on w3schools. I believe that this is strictly a javascript coding problem. This is the code
that I am using:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0px; padding: 0px }
#filter {
       height: 5%;
       width: 73%;
       margin-top: 5px;
       margin-left: 2%;
       border: 3px solid black;
       padding: 1%;
       overflow: auto }
#txtHint {
       height: 20%;
       width: 73%;
       margin-top: 5px;
       margin-left: 2%;
       border: 3px solid black;
       padding: 1%;
       overflow: auto
       }
#maplist {
   height: 60%;
   width: 75%;
   margin-top: 5px;
   margin-left: 2%;
   border: 3px solid black }

</style>

<script type="text/javascript">

function showTrail(str)
{
if (str=="")
{
document.getElementById("maplist").innerHTML="";
return;
}
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)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","traillist2.php?q="+str,true);
xmlhttp.send();
}

</script>

</head>
<body>
<div id="filter">
<form name="filterform">
<select id="scenery" onchange="">
<option value="">Select Scenery Rating:</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="f">F</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="length" onchange="">
<option value="">Select Trail Length</option>
<option value="g">Less than 1</option>
<option value="h">1-2.9</option>
<option value="i">3-4.9</option>
<option value="j">5-6.9</option>
<option value="k">7-8.9</option>
<option value="l">More than 9</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="difficulty" onchange="">
<option value="">Select Trail Difficulty</option>
<option value="m">Easy</option>
<option value="n">Moderate</option>
<option value="o">Strenuous</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="combined" type="button" value="      Find Trail!
"onclick="showTrail(this.form['scenery'].value +
this.form['length'].value + this.form['difficulty'].value)"/>
</form>
</div>
<div id="maplist"></div>
</body>
</html>

The code is designed to drop the map into the "maplist" div. In the
code above, you see that I have the line


"alert(xmlhttp.responseText);"



which was originally:


document.getElementById("txtHint").innerHTML=xmlhttp.responseText;"


I wrote the php page so it would return code as shown below. This is the actual responseText received from the alert.

Code:

script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(34.65, -83.9);
var options = {
   zoom: 9,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.TERRAIN
   };
var infoWindow = new google.maps.InfoWindow;
var html;
var map = new google.maps.Map(document.getElementById('map_canvas'),
options);
var point = new google.maps.LatLng(
parseFloat(34.558350),
parseFloat(-84.250122));
var marker = new google.maps.Marker({
  position : point,
  map : map,
  icon : 'http://labs.google.com/ridefinder/images/mm_20_red.png'
});
var html = '<div><br><b>Amicalola Falls State Park - Creek Trail</
b><br><br><b>Trail Length:&nbsp;&nbsp;</b>0.5 miles<br><b>Scenery
Rating:&nbsp;&nbsp;</b>C<br><b>Difficulty Rating:&nbsp;&nbsp;</
b>Easy<br><b>Trail Features:&nbsp;&nbsp;</b>Stream<br><br><font
size:large><font face="Tahoma, Geneva, sans-serif" size="1"
color="#000071"><strong><a href="http://www.digitaltrailguide.com/
amicalolafallsstateparkcreekmountainlaurelspringtrails.aspx">View This
Trail</a></strong></font></div>';
bindInfoWindow(marker, map, infoWindow, html);
function bindInfoWindow(marker, map, infoWindow, html) {
     google.maps.event.addListener(marker, 'click', function() {
       infoWindow.setContent(html);
       infoWindow.open(map, marker);
     });
   }
}
function loadScript() {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "http://maps.google.com/maps/api/js?
sensor=false&callback=initialize";
   document.body.appendChild(script);
 }
 window.onload = loadScript;
</script>I thought that this code would be dropped into the div and

I'm trying to create a script that will call a flickr rest method and output its XML. I have written the following code, but it seems to not work. I am stumped, and was wondering what I am doing wrong.

I have uploaded my code to http://www.sfu.ca/~jca41/stuph/blahh/example.html

Code:

function foo() {
	//var url = "http://flickr.com/services/rest/?method=flickr.photos.geo.getLocation&api_key=aa9b622e629e51d3fcda1f967c429237&photo_id=6174355034";
	alert(loadXMLDoc(url));
}

function loadXMLDoc(dname) {
	if (window.XMLHttpRequest) {
		xhttp=new XMLHttpRequest();
	} else {
		xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xhttp.open("GET",dname,false);
	xhttp.send("");
	return xhttp.responseText;
}
</script>

This question hovers between PHP and JavaScript, but I think it fits here a little better.

I've got a web app that does a lot of asynchronous calls to various PHP pages. I'm familiar with using an iFrame or div to hold a controller, then making forms post to that controller so you can see the output. However, I'm not doing a lot of submitting forms. Typically, I utilize the onclick event of various elements to initiate an XmlHttpRequest that jumps over to a PHP page and back.

I'm looking for a way to easily debug my PHP code. Right now I'm using Firebug (on Firefox) to look at the HTTP requests. I can see the post data and response and all that, which is good. However, it requires a good amount of clicking and time to get to that data.

Is there an easier way to do this? Ideally I'd love to include some sort of debug window that displays all of the PHP controller errors and things that I echo out.

Hi,
because i need to get rid off Code:

<iframe src="my.php">

in my html page, i have decided to replace it with javascript function which will get data from the server and will insert it into div section.But i dont know how can i obtain html page from my.php script... I know there is function XMLHttpRequest, but does it use current session from the browser ( my.php is protected - it does check the $_SESSION variable ) ? And does work this function in Mozilla ?

Hi,

I am trying to create a script that would output two variables - X Controllers and Y Pilots.

Basically, I would need to capture the contents of the following webpage and extract those two numbers from the second line of text.
http://66.109.25.244/

I think this may involve XMLHttpRequest but I am not sure.

If anyone can help me do this, I would greatly appreciate it.

Thanks in advance!

hello all,

I am trying to see if the w3schools example works on my site with a collapsible panel. here is what I have: Code:

<script type="text/javascript">
function getXMLcontent() {
if (window.XMLHttpRequest)
  
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  	document.getElementById('CollapsiblePanel1').style.visibility = 'visible';
	document.getElementById("CollapsiblePanelContent").innerHTML=xmlhttp.responseText;
  	xmlhttp.open("GET","showfunction.php?fname=" + document.getElementById('functions').value, true);
	xmlhttp.send();
	alert("showfunction.php?fname=" + document.getElementById('functions').value);
}
</script>

the panel shows up as a thin grey line because no text is being thrown into it from the 'responsetext' property. I don't really know anything about what I'm doing. Just trying to copy and paste what the website example is. is there anything else I should know about what I'm doing, that would at least tell me why I'm not getting the data back out of the server like I should be?

the 'functions' element on the page is a dropdown box, but it is not inside of a form tag. does that make a difference since I am using 'GET'??

thanks!

I've been working for some time trying to get XMLHTTPRequests to work. Nothing doing. The code seems simple enough, but I can't duplicate it on my own. I have two pages on the same PC. Code to follow. Please help me see the problem:

Page One - Originator
<code>
<html>

<head>

<title>Origination</title>
<script type='text/javascript'>
function ajaxRequest(){
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;
}

//Usage:
//new ajaxRequest()

function getStuff() {
var getdata = new ajaxRequest();
if (getdata.readyState==4){
if (getdata.status==200){
var htmldata=getdata.responseText
var txtfields = htmldata.getElementsByTagName('input');
alert(txtfields);
}
else{
alert('An error has occured making the request');
}
}
getdata.open('POST', 'test.html', true);
getdata.send(null);
}

</script>
</head>

<body>
<h5>Origination</h5>
<form <form action="file:///test.html" method="post" enctype="text/plain">
<input type='text' name='homepage' value=''/>
<input type='button' name='getit' value='GetSome' onclick='getStuff()'/>
</form>
</body>

</html>
</code>

Page Two - The Target Page:
<code>
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/>
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"/>

<style type="text/css">
html {font-family: arial; font-size: 0.8em; }

</style>
</head>
<body>
<div id="wrapper">
<form action="file:///eyec.html" method="post" enctype="text/plain">
<input type='text' name='first' value='First Field'/>
<input type='text' name='second' value='Second Field'/>
<input type='text' name='third' value='Thrird Field'/>
<input type='text' name='fourth value='Fourth Field'/>
</form>
</div> <!-- wrapper -->
</body>
</html>
</code>

I'd deeply appreciate correction. Thanks.