Hourglass in browser window while executing javascript

[amolmali]

Hi Everyone,
I have developed a tree menu, in which if I click on a Node;I want to post some data to other frame. When I click on the node, data is posted ; but cursor in the tree frame turns into Hourglass. The cusrsor stays as a hourglass until browser window is refreshed.
Node is nothing but a anchor tag Like

<a href="javscript:changeImg()" onClick="postData()"><img src=...></a>

what could be the reason and is there any solution to this?

THanks

[kdjoergensen]

Have the function changeImg() return a false value after completion of processing. e.g.

function changeImg(){
document.imgname.src='active.gif';
return false;
}

[amolmali]

Originally posted by kdjoergensen
Have the function changeImg() return a false value after completion of processing. e.g.

function changeImg(){
document.imgname.src='active.gif';
return false;
}

That worked fine!!
Thanks,
But what is the reason for this behaviour?

[kdjoergensen]

A link tag (<A href...>) is designed to navigate to another page. When you click on a link you get an hour glass (wait for page to load!!!). This hour glass disappears after the new page has started loading.

In your case you use a 'fix' allowed by the browser makers to convert a link to call a javascript function instead of navigating to another page as orignally intended.

E.g.
<a href="javascript: dosomethingInstead()">Hi</a>

If the result of the javascript statement returns something (like a text string) then the browser will navigate to this string. example:

<a href="javascript: navigateByAge()">go to forums</a>

function navigateByAge(){
if (Number(document.userinput.age.value) <= 13){
return "http://www.disney.com/index.html";
} else {
return "http://www.mynewforums.html";
}
}

In above case the return value will make the browser navigate to the proper page.

In some cases if a return value is provided which is not a valid url you will get a blank page in the browser when the link is pressed (ever got that ??)

In other cases (like yours) you get the hour glass thing. The reason is that the browser is waiting for the page information to be returned.

If you input: RETURN FALSE you are in effect asking the browser to cancel the navigation request and the hour glass disappears.

[amolmali]

thanx, kdjoergensen
That was wonderful explaination.
Thank you once again.
:)

[Jon Hanlon]

Actually, you should use the void() function here:
<a href="javscript:void(changeImg())" onClick="postData()"><img src=...></a>

The javascript: protocol will attempt to navigate to what's after the colon (:) unless it's undefined.
If you return false from changeImg() you are effectively saying href="javascript:false", which will result in a page with the word 'false' on it.
Try this:
<a href="javascript:false" onclick="alert('Hi')">Click Me</a>

If anything, you should return false from the onclick, this will cancel the navigation.

[amolmali]

Originally posted by Jon Hanlon
Actually, you should use the void() function here:
<a href="javscript:void(changeImg())" onClick="postData()"><img src=...></a>

The javascript: protocol will attempt to navigate to what's after the colon (:) unless it's undefined.
If you return false from changeImg() you are effectively saying href="javascript:false", which will result in a page with the word 'false' on it.
Try this:
<a href="javascript:false" onclick="alert('Hi')">Click Me</a>

If anything, you should return false from the onclick, this will cancel the navigation.

Yes I had faced this problem. what I had done was I had called both functions on onClick event.

<a href="javascript://" onclick="changeImg();postData();"> Click Me</a>

Which of the two is better?

[Jon Hanlon]

It is best to have a dummy href and return false from the onclick.

<a href="#" onclick="changeImg();postData();return false"> Click Me</a>

What I do usually is:

function clickStuff() {
changeImg();
postData();
return false;
}

</script>

<a href="#" onclick="return clickStuff()"> Click Me</a>


The return false in the function and the return in the onclick ensures that the event gets cancelled.