Re: [CODE4LIB] httpRequest javascript.... grrr

2007-11-29 Thread Jesse Prabawa
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

2007-11-29 Thread Godmar Back
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



Re: [CODE4LIB] httpRequest javascript.... grrr

2007-11-29 Thread Ewout Van Troostenberghe
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

2007-11-29 Thread Andrew Nagy
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

2007-11-29 Thread Keith Jenkins
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

2007-11-29 Thread Andrew Nagy
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

2007-11-29 Thread pkeane

I'd highly recommend getting a good clear handle on the underlying
javascript workings before moving to a library like jQuery (which I am
quite fond of) especially when using XMLHTTPRequest.  If you don't,
mysterious problems may arise that are all the more difficult to debug
since you have the library between you and the executed javascript.

I find that the most common problems with XHR are quite often due to it's
asynchronous behavior.  You cannot simply invoke a function within the
response code and expect to have it fire, because the code has no way of
knowing when/if that response will occur.  You need to instead create a
callback function that you pass into the response code (like you are
accustomed to doing when setting an event handler).

I am not 100% sure if that's the problem here, but I would try this:

before defining httpRequest.onreadystatechange, define:

callback_alert = function(msg) { alert(msg); };

then:

httpRequest.onreadtstatechange = function(callback_alert) {
[...]
callback_alert ( root_node.firstChild.data );
 }

The problem is that your anonymous function onreadystatechage is
effectively compiled to run later, but the alert function becomes a
closure which remembers its compilation state when invoked.  And at the
time of its compilation, xmldoc did not exist.

One thing I WOULD recommend it to study some of the libraries to see how
they construct their XHR code.

Here's my standard XHR:

Dase.ajax = function(url,my_func) {
var xmlhttp = Dase.createXMLHttpRequest();
xmlhttp.open('GET', url, true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4  xmlhttp.status == 200) {
var returnStr = xmlhttp.responseText;
if (my_func) {
my_func(returnStr);
}
} else {
// wait for the call to complete
}
};
};

Note that I always pass in a (callback) function to do what needs doing
to the response code.

I hope that helps-
Peter Keane
daseproject.org


On Thu, 29 Nov 2007, Eric Lease Morgan 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 [resolved]

2007-11-29 Thread Eric Lease Morgan


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';

}










Re: [CODE4LIB] httpRequest javascript.... grrr [resolved]

2007-11-29 Thread pkeane

Indeed, my proposed fix was incorrect -- an alert does NOT need to be
passed into the function as a callback (it's always globally available)
and since the parameter for the alert is response text, that's A-OK.  If
you want to insert that response into the page (and not just 'alert' it),
you WOULD need to create a callback function which made reference to the
page element 'target' (thus serving as a closure).

One thing about XHR -- you have all four HTTP verbs at your disposal: GET,
POST, PUT, DELETE and so you may wish to use one of the non-safe (i.e.
state-changing) methods for your XHR call (probably POST in the case of
adding a tag) to make things more RESTful.  XHR is actually a very good
way to hijack links (which are otherwise going to simply use 'GET')
which will perform state-changing operations.  Then when your application
starts exposing web services, you'll be that much more aligned with
RESTful principles (I'm convinced that's v. important, although plenty of
successful services expose unsafe GETs).  Just a thought...

best-
Peter Keane


On Thu, 29 Nov 2007, Eric Lease Morgan wrote:



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