Hello World with YUI Library - asyncRequest

salvadorvp · Aug 9, 2006

Hi, here I have a very simple 'hello world' example that makes use of
Yahoo! User Interface Library. I have a problem with my response string
coming back as '[object, Object]'. I managed to check that everything
else works.

The requested 'SayHello.html' file only contains the string "hello,
world".

Here is my code:

<html>
<head>
<title>Hello World with YUI</title>
<script src="yahoo.js"></script>
<script src="connection.js"></script>
<script language="JavaScript" type="text/javascript">
var handleSuccess = function(o){
if(o.responseText !== undefined){
document.getElementById('span_result').innerHTML = o.responseText;
}
}

var handleFailure = function(o){
document.getElementById('span_result').innerHTML = 'ERROR: ' +
o.responseText;
}

var callback =
{
success:handleSuccess,
failure: handleFailure
};
</script>
</head>
<body>

<a href="javascript:YAHOO.util.Connect.asyncRequest('GET',
'SayHello.html', callback);">Say Hello</a><br>

<span id="span_result"></span>
</body>
</html>

salvadorvp · Aug 10, 2006

Hi again, I found what was wrong with my test page.

At the bottom of the page where I have the Anchor link I had this:

<a href="javascript:YAHOO.util.Connect.asyncRequest('GET',
'SayHello.html', callback);">Say Hello</a><br>

I replaced it with this:

<a href="#" onclick="javascript:YAHOO.util.Connect.asyncRequest('GET',
'SayHello.html', callback);">Say Hello</a><br>

This prevents the browser from navigating away from the page and
instead you just handle the 'onclick' event.

Cheers,
SV.

Robert · Aug 11, 2006

Hi again, I found what was wrong with my test page.

At the bottom of the page where I have the Anchor link I had this:

<a href="javascript:YAHOO.util.Connect.asyncRequest('GET',
'SayHello.html', callback);">Say Hello</a><br>

I replaced it with this:

<a href="#" onclick="javascript:YAHOO.util.Connect.asyncRequest('GET',
'SayHello.html', callback);">Say Hello</a><br>

This prevents the browser from navigating away from the page and
instead you just handle the 'onclick' event.

The browser will still "browse" to #.
It's even better when you replace it with this:

<a href="#" onclick="YAHOO.util.Connect.asyncRequest('GET',
'SayHello.html', callback); return false;">Say Hello</a><br>

or

<a href="noscript.html" onclick="YAHOO.util.Connect.asyncRequest('GET',
'SayHello.html', callback); return false;">Say Hello</a><br>

Richard Cornford · Aug 11, 2006

Robert said:
(e-mail address removed) wrote:

The browser will still "browse" to #.
It's even better when you replace it with this:

I suspect that "handle the 'onclick' event" could mean; call -
preventDefault - and/or setting - returnValue - on the event object, so
returning false would only be necessary for back-compatibility (even if
the back-compatible method is reliable on all modern browsers).

<a href="#" onclick="YAHOO.util.Connect.asyncRequest('GET',
'SayHello.html', callback); return false;">Say Hello</a><br>

or

<a href="noscript.html"
onclick="YAHOO.util.Connect.asyncRequest('GET', 'SayHello.html',
callback); return false;">Say Hello</a><br>

The problem with that, and certainly the latter, is that if the method
calls fails, or cannot act (such as when IE 5-6 is set up with ActiveX
disabled in the Internet security zone and the page is on the Internet),
the onclick event is still cancelled. An alternative noscirpt.html page
may be a sensible response to failure due to the browser not supporting
scripting, but there should be an equally sensible response to the
browser not supporting the action attempted by the script (and they will
likely be the same response (so long as the former is not haranguing the
user for not having javascript available)).

The only code that is in a position to asses the viability of the
actions it is attempting would be the function/method called from the
onclick handler (or the handler itself) so the optimum pattern should
be - onclick="return doSomethingFun('parameter');" - and have the
function/method return true or false to signal its success.

Of course general purpose libraries don't know how they are going to be
used and so will not tend to be designed with such methods signalling
their success in such a way, or designed with any consideration of clean
degradation at all.

Richard.

NS_ERROR_DOM_HIERARCHY_REQUEST _ERR YUI Example	1	Apr 20, 2008
YUI--Competent?	1	Dec 25, 2009
[HELP] Learning XML with YUI	0	May 22, 2007
What "might" I be doing wrong with this snippet?	6	Sep 25, 2023
YUI--doomed?	7	May 22, 2010
Help :(	3	Aug 17, 2021
Help with code	0	Jun 12, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023

Hello World with YUI Library - asyncRequest

salvadorvp

salvadorvp

Robert

Richard Cornford

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads