Re: [CODE4LIB] httpRequest javascript.... grrr
Hi Eric,
Have you considered using a Javascript Library to handle these details? I
would recommend that you refactor your code to use one so that you can
concentrate on what you actually want to do instead. This way you can also
avoid having browser incompatabilities that are already solved if you use a
Javascript Library. Try checking out Prototype at
http://www.prototypejs.org/
Best regards,
Jesse
On Nov 29, 2007 10:21 PM, Eric Lease Morgan [EMAIL PROTECTED] wrote:
Why doesn't my httpRequest Javascript function return unless I add an
alert? Grrr.
I am writing my first AJAX-y function called add_tag. This is how it
is suppose to work:
1. define a username
2. create an httpRequest object
3. define what it is suppose to happen when it gets a response
4. open a connection to the server
5. send the request
When the response it is complete is simply echos the username. I know
the remote CGI script works because the following URL works correctly:
http://mylibrary.library.nd.edu/demos/tagging/?
cmd=add_tagusername=fkilgour
My Javascript is below, and it works IF I retain the alert
( 'Grrr!' ) line. Once I take the alert out of the picture I get a
Javascript error xmldoc has no properties. Here's my code:
function add_tag() {
// define username
var username = 'fkilgour';
// create an httpRequest
var httpRequest;
if ( window.XMLHttpRequest ) { httpRequest = new XMLHttpRequest(); }
else if ( window.ActiveXObject ) { httpRequest = new ActiveXObject
( Microsoft.XMLHTTP ); }
// give the httpRequest some characteristics and send it off
httpRequest.onreadystatechange = function() {
if ( httpRequest.readyState == 4 ) {
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName( 'root' ).item( 0 );
alert ( root_node.firstChild.data );
}
};
httpRequest.open( 'GET', './index.cgi?cmd=add_tagusername=' +
username, true );
httpRequest.send( '' );
alert ( 'Grrr!' );
}
What am I doing wrong? Why do I seem to need a pause at the end of my
add_tag function? I know the anonymous function -- function() -- is
getting executed because I can insert other httpRequest.readyState
checks into the function and they return. Grrr.
--
Eric Lease Morgan
University Libraries of Notre Dame
(574) 631-8604
Re: [CODE4LIB] httpRequest javascript.... grrr
You're using IE, which means you need to issue the open() before
adding the onreadystatechange handler.
Otherwise, open will trigger a call to your handler, and IE's
implementation won't have reset the readyState to 0.
In either event, you should double-check that the status of the
request is 200 before accessing the result.
- Godmar
On Nov 29, 2007 9:21 AM, Eric Lease Morgan [EMAIL PROTECTED] wrote:
Why doesn't my httpRequest Javascript function return unless I add an
alert? Grrr.
I am writing my first AJAX-y function called add_tag. This is how it
is suppose to work:
1. define a username
2. create an httpRequest object
3. define what it is suppose to happen when it gets a response
4. open a connection to the server
5. send the request
When the response it is complete is simply echos the username. I know
the remote CGI script works because the following URL works correctly:
http://mylibrary.library.nd.edu/demos/tagging/?
cmd=add_tagusername=fkilgour
My Javascript is below, and it works IF I retain the alert
( 'Grrr!' ) line. Once I take the alert out of the picture I get a
Javascript error xmldoc has no properties. Here's my code:
function add_tag() {
// define username
var username = 'fkilgour';
// create an httpRequest
var httpRequest;
if ( window.XMLHttpRequest ) { httpRequest = new XMLHttpRequest(); }
else if ( window.ActiveXObject ) { httpRequest = new ActiveXObject
( Microsoft.XMLHTTP ); }
// give the httpRequest some characteristics and send it off
httpRequest.onreadystatechange = function() {
if ( httpRequest.readyState == 4 ) {
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName( 'root' ).item( 0 );
alert ( root_node.firstChild.data );
}
};
httpRequest.open( 'GET', './index.cgi?cmd=add_tagusername=' +
username, true );
httpRequest.send( '' );
alert ( 'Grrr!' );
}
What am I doing wrong? Why do I seem to need a pause at the end of my
add_tag function? I know the anonymous function -- function() -- is
getting executed because I can insert other httpRequest.readyState
checks into the function and they return. Grrr.
--
Eric Lease Morgan
University Libraries of Notre Dame
(574) 631-8604
[CODE4LIB] httpRequest javascript.... grrr
Why doesn't my httpRequest Javascript function return unless I add an
alert? Grrr.
I am writing my first AJAX-y function called add_tag. This is how it
is suppose to work:
1. define a username
2. create an httpRequest object
3. define what it is suppose to happen when it gets a response
4. open a connection to the server
5. send the request
When the response it is complete is simply echos the username. I know
the remote CGI script works because the following URL works correctly:
http://mylibrary.library.nd.edu/demos/tagging/?
cmd=add_tagusername=fkilgour
My Javascript is below, and it works IF I retain the alert
( 'Grrr!' ) line. Once I take the alert out of the picture I get a
Javascript error xmldoc has no properties. Here's my code:
function add_tag() {
// define username
var username = 'fkilgour';
// create an httpRequest
var httpRequest;
if ( window.XMLHttpRequest ) { httpRequest = new XMLHttpRequest(); }
else if ( window.ActiveXObject ) { httpRequest = new ActiveXObject
( Microsoft.XMLHTTP ); }
// give the httpRequest some characteristics and send it off
httpRequest.onreadystatechange = function() {
if ( httpRequest.readyState == 4 ) {
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName( 'root' ).item( 0 );
alert ( root_node.firstChild.data );
}
};
httpRequest.open( 'GET', './index.cgi?cmd=add_tagusername=' +
username, true );
httpRequest.send( '' );
alert ( 'Grrr!' );
}
What am I doing wrong? Why do I seem to need a pause at the end of my
add_tag function? I know the anonymous function -- function() -- is
getting executed because I can insert other httpRequest.readyState
checks into the function and they return. Grrr.
--
Eric Lease Morgan
University Libraries of Notre Dame
(574) 631-8604
Re: [CODE4LIB] httpRequest javascript.... grrr
To point out why the use of a Javascript framework is important, let me
put your code into jQuery (http://jquery.com)
$.get('index.cgi', {cmd:'add_tag', username:'username'}, function(html) {
// do whatever you want here
})
PrototypeJS has a similar, easy to use construct. In the end, using any
framework is more important than the specific choice of framework.
Why doesn't my httpRequest Javascript function return unless I add an
alert? Grrr.
I am writing my first AJAX-y function called add_tag. This is how it
is suppose to work:
1. define a username
2. create an httpRequest object
3. define what it is suppose to happen when it gets a response
4. open a connection to the server
5. send the request
When the response it is complete is simply echos the username. I know
the remote CGI script works because the following URL works correctly:
http://mylibrary.library.nd.edu/demos/tagging/?
cmd=add_tagusername=fkilgour
My Javascript is below, and it works IF I retain the alert
( 'Grrr!' ) line. Once I take the alert out of the picture I get a
Javascript error xmldoc has no properties. Here's my code:
function add_tag() {
// define username
var username = 'fkilgour';
// create an httpRequest
var httpRequest;
if ( window.XMLHttpRequest ) { httpRequest = new XMLHttpRequest(); }
else if ( window.ActiveXObject ) { httpRequest = new ActiveXObject
( Microsoft.XMLHTTP ); }
// give the httpRequest some characteristics and send it off
httpRequest.onreadystatechange = function() {
if ( httpRequest.readyState == 4 ) {
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName( 'root' ).item( 0 );
alert ( root_node.firstChild.data );
}
};
httpRequest.open( 'GET', './index.cgi?cmd=add_tagusername=' +
username, true );
httpRequest.send( '' );
alert ( 'Grrr!' );
}
What am I doing wrong? Why do I seem to need a pause at the end of my
add_tag function? I know the anonymous function -- function() -- is
getting executed because I can insert other httpRequest.readyState
checks into the function and they return. Grrr.
--
Eric Lease Morgan
University Libraries of Notre Dame
(574) 631-8604
Re: [CODE4LIB] httpRequest javascript.... grrr
Eric - Have a look at some of the ajax functions I wronte for VuFind - there
are some almost identical function calls that work just fine.
http://vufind.svn.sourceforge.net/viewvc/*checkout*/vufind/web/services/Record/ajax.js?revision=106
See function SaveTag
Also - You might want to consider using the Yahoo YUI Connection Manager or the
Prototype AJAX toolkit. They both work great and you don't need to spend time
debugging. I also find firebug (firefox plugin) to be an awesome ajax debugger.
Just by looking at your function real quick - you are calling
httpRequest.send('') at the end of your function. I think I read somewhere
that you should send null and not an empty string. Maybe that will solve it?
Not really sure.
Andrew
-Original Message-
From: Code for Libraries [mailto:[EMAIL PROTECTED] On Behalf Of
Eric Lease Morgan
Sent: Thursday, November 29, 2007 9:22 AM
To: CODE4LIB@listserv.nd.edu
Subject: [CODE4LIB] httpRequest javascript grrr
Why doesn't my httpRequest Javascript function return unless I add an
alert? Grrr.
I am writing my first AJAX-y function called add_tag. This is how it
is suppose to work:
1. define a username
2. create an httpRequest object
3. define what it is suppose to happen when it gets a response
4. open a connection to the server
5. send the request
When the response it is complete is simply echos the username. I know
the remote CGI script works because the following URL works correctly:
http://mylibrary.library.nd.edu/demos/tagging/?
cmd=add_tagusername=fkilgour
My Javascript is below, and it works IF I retain the alert
( 'Grrr!' ) line. Once I take the alert out of the picture I get a
Javascript error xmldoc has no properties. Here's my code:
function add_tag() {
// define username
var username = 'fkilgour';
// create an httpRequest
var httpRequest;
if ( window.XMLHttpRequest ) { httpRequest = new XMLHttpRequest();
}
else if ( window.ActiveXObject ) { httpRequest = new ActiveXObject
( Microsoft.XMLHTTP ); }
// give the httpRequest some characteristics and send it off
httpRequest.onreadystatechange = function() {
if ( httpRequest.readyState == 4 ) {
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName( 'root' ).item( 0 );
alert ( root_node.firstChild.data );
}
};
httpRequest.open( 'GET', './index.cgi?cmd=add_tagusername=' +
username, true );
httpRequest.send( '' );
alert ( 'Grrr!' );
}
What am I doing wrong? Why do I seem to need a pause at the end of my
add_tag function? I know the anonymous function -- function() -- is
getting executed because I can insert other httpRequest.readyState
checks into the function and they return. Grrr.
--
Eric Lease Morgan
University Libraries of Notre Dame
(574) 631-8604
Re: [CODE4LIB] httpRequest javascript.... grrr
jQuery++
I like to do things from scratch, but have never regretted moving to
jQuery. Whatever time it takes you to check it out will be paid back
a thousand times, at least.
Keith
On 11/29/07, Ewout Van Troostenberghe [EMAIL PROTECTED] wrote:
To point out why the use of a Javascript framework is important, let me
put your code into jQuery (http://jquery.com)
$.get('index.cgi', {cmd:'add_tag', username:'username'}, function(html) {
// do whatever you want here
})
Re: [CODE4LIB] httpRequest javascript.... grrr
Don't leave out the Yahoo YUI library as something to consider. Whats nice is
that you don't have to load the entire library as one big huge js file - you
can pick and choose what libraries you want to include in your page minimizing
the javascript filesize. If you want to have one little js widget on you page
- the browser doesn't need to download and process a 150kb prototype js file.
Andrew
-Original Message-
From: Code for Libraries [mailto:[EMAIL PROTECTED] On Behalf Of
Jonathan Rochkind
Sent: Thursday, November 29, 2007 10:24 AM
To: CODE4LIB@listserv.nd.edu
Subject: Re: [CODE4LIB] httpRequest javascript grrr
These days I think jquery seems more generally popular than prototype.
But both are options. I definitely would use one or the other, instead
of doing it myself from scratch. They take care of a lot of weird
cross-browser-compatibility stuff, among other conveniences.
Jonathan
Jesse Prabawa wrote:
Hi Eric,
Have you considered using a Javascript Library to handle these
details? I
would recommend that you refactor your code to use one so that you
can
concentrate on what you actually want to do instead. This way you can
also
avoid having browser incompatabilities that are already solved if you
use a
Javascript Library. Try checking out Prototype at
http://www.prototypejs.org/
Best regards,
Jesse
On Nov 29, 2007 10:21 PM, Eric Lease Morgan [EMAIL PROTECTED] wrote:
Why doesn't my httpRequest Javascript function return unless I add
an
alert? Grrr.
I am writing my first AJAX-y function called add_tag. This is how it
is suppose to work:
1. define a username
2. create an httpRequest object
3. define what it is suppose to happen when it gets a response
4. open a connection to the server
5. send the request
When the response it is complete is simply echos the username. I
know
the remote CGI script works because the following URL works
correctly:
http://mylibrary.library.nd.edu/demos/tagging/?
cmd=add_tagusername=fkilgour
My Javascript is below, and it works IF I retain the alert
( 'Grrr!' ) line. Once I take the alert out of the picture I get a
Javascript error xmldoc has no properties. Here's my code:
function add_tag() {
// define username
var username = 'fkilgour';
// create an httpRequest
var httpRequest;
if ( window.XMLHttpRequest ) { httpRequest = new
XMLHttpRequest(); }
else if ( window.ActiveXObject ) { httpRequest = new
ActiveXObject
( Microsoft.XMLHTTP ); }
// give the httpRequest some characteristics and send it off
httpRequest.onreadystatechange = function() {
if ( httpRequest.readyState == 4 ) {
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName( 'root' ).item( 0
);
alert ( root_node.firstChild.data );
}
};
httpRequest.open( 'GET', './index.cgi?cmd=add_tagusername=' +
username, true );
httpRequest.send( '' );
alert ( 'Grrr!' );
}
What am I doing wrong? Why do I seem to need a pause at the end of
my
add_tag function? I know the anonymous function -- function() -- is
getting executed because I can insert other httpRequest.readyState
checks into the function and they return. Grrr.
--
Eric Lease Morgan
University Libraries of Notre Dame
(574) 631-8604
--
Jonathan Rochkind
Digital Services Software Engineer
The Sheridan Libraries
Johns Hopkins University
410.516.8886
rochkind (at) jhu.edu
Re: [CODE4LIB] httpRequest javascript.... grrr [resolved]
On Nov 29, 2007, at 9:21 AM, Eric Lease Morgan wrote:
Why doesn't my httpRequest Javascript function return unless I add
an alert? Grrr.
I have resolved my problem, but I'm not exactly sure how.
First of all, my httpRequest (XMLHttpRequest) code was just fine. I
made no significant changes to it. Instead, I separated my form input/
validation routine from the httpRequest functionality and the problem
disappeared. Don't ask my why. I don't know. This makes for better
modular programing though. javascript--
BTW, I appreciate the links to various Javascript libraries, but
since I am really only starting out in this regard I think I need to
get my hands dirtier before I lean on someone else's code.
Finally, for posterity's sake, I have included my resulting code in
an attachment to this message. I don't know whether or not the list
will accept attachments.
--
Eric Lease Morgan
University Libraries of Notre Dame
(574) 631-8604
function add_tag( theform ) {
// get the form's input
var resource = theform.resource.value;
var tag = theform.tag.value;
var username = theform.username.value;
// process the input
post_tag ( resource, tag, username );
// cleanup and done
expand( 'd' + resource );
return false;
}
function post_tag( resource, tag, username ) {
// use the input to create a GET request
var url = './index.cgi?cmd=post_tagresource=' + resource + 'tag=' + tag +
'username=' + username;
// create a xmlRequest
var xmlRequest;
if ( window.XMLHttpRequest ) { xmlRequest = new XMLHttpRequest(); }
else if ( window.ActiveXObject ) { xmlRequest = new ActiveXObject(
Microsoft.XMLHTTP ); }
// sanity check
if ( !xmlRequest ) {
alert( 'Giving up: Cannot create an XMLHTTP instance' );
return false;
}
// give the xmlRequest some characteristics and send it off
xmlRequest.open( 'GET', url, true );
xmlRequest.send( null );
xmlRequest.onreadystatechange = function() {
if ( xmlRequest.readyState == 4 ) {
var xmldoc = xmlRequest.responseXML;
var root_node = xmldoc.getElementsByTagName( 'root' ).item( 0 );
alert ( root_node.firstChild.data );
}
}
}
function expand( id ) {
var details = document.getElementById( id );
details.style.display = ( details.style.display == 'block' ) ? 'none' :
'block';
}
