Welcome to WebmasterWorld Guest from 54.211.135.32

Forum Moderators: open

Message Too Old, No Replies

onclick event reloads page?

i have inline onclick events that are reloading the page, looks bad

     
10:37 pm on Apr 23, 2009 (gmt 0)

Full Member

10+ Year Member

joined:Oct 6, 2003
posts:235
votes: 0


Hi,

New to JavaScript so please don't be to harsh with me ... there is probably something silly happening here but I cant see it.

I have created some code to load text into a related element. It seemed to work fine. However when I tested with a page larger than the browser window, it jumps to the top of the page.

If you load the below, scroll down the page a bit, it jumps to the top of the page as if the page was being reloaded.

I want it to do what it does, but, I dont want it to jump to the top of the page.

Any help would be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
<!--
var roomDetails = // as testforSecondclicks are in an object they can be changed form anywhere in the code. There is no need to rerutn values from any functions to reflect the change.
[
{'nodeID':'room0',
'amenities':'room0 information here',
'clickTest':false},
{'nodeID':'room1',
'amenities':'room1 information here',
'clickTest':false},
{'nodeID':'room2',
'amenities':'<p>snip url from code</p>',
'clickTest':false} // a url should really be tested for as it may cause problems as will any other html if quotes are used in it. eg 'amenities':'htmlvaluewith''twosinglequotes' will cause a problem
];

function secondClicktest(roomID) {
if (roomDetails[roomID]["clickTest"] == false) {
document.getElementById(roomDetails[roomID]["nodeID"]).innerHTML=roomDetails[roomID]["amenities"];
//alert(roomID + " " + roomDetails[roomID]["clickTest"]);
return roomDetails[roomID]["clickTest"] = true;
} else {
document.getElementById(roomDetails[roomID]["nodeID"]).innerHTML="";;
return roomDetails[roomID]["clickTest"] = false;
}
}

-->
</script>
</head>
<body>
<table style="border: 2px solid #000000" width="100%" cellpadding="4" cellspacing="0" align="center">"""
<tr>
<td valign="top" align="left" bgcolor="#CC9999"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p style="border: solid #000000 1px; display: inline; float: left;" class="bolder">$$$ROOMNAME$$$</p><!--Remove this comment: if there is room information available then place link here with NO white space.--><p style="border: solid #000000 1px; display: inline; margin-left: 8px;"><a rel="nofollow" href="#" onclick="secondClicktest(0);">Room Details</a></p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFCC"><br><br><br><br><br><br><p style="border: solid #000000 1px; display: inline; float: left;">$$$EXEC_ROOMIMAGE$$$</p><span style="border: solid #000000 1px; margin-left: 8px;" id="room0">X&nbsp;</span>ZZZ</td><!-- Remove this comment: space must be there to start with so the same node can be replaced all the time.-->
</tr>

<tr>
<td valign="top" align="left" bgcolor="#CC9999"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p style="border: solid #000000 1px; display: inline; float: left;" class="bolder">$$$ROOMNAME$$$</p><!--Remove this comment: if there is room information available then place link here with NO white space.--><p style="border: solid #000000 1px; display: inline; margin-left: 8px;"><a rel="nofollow" href="#" onclick="secondClicktest(1);">Room Details</a></p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFCC"><p style="border: solid #000000 1px; display: inline; float: left;">$$$EXEC_ROOMIMAGE$$$</p><span style="border: solid #000000 1px; margin-left: 8px;" id="room1">X&nbsp;</span>ZZZ</td>
</tr>

<tr>
<td valign="top" align="left" bgcolor="#CC9999">
<p style="border: solid #000000 1px; display: inline; float: left;" class="bolder">$$$ROOMNAME$$$</p><!--Remove this comment: if there is room information available then place link here with NO white space.--><p style="border: solid #000000 1px; display: inline; margin-left: 8px;"><a rel="nofollow" href="#" onclick="secondClicktest(2);">Room Details</a></p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFCC"><p style="border: solid #000000 1px; display: inline; float: left;">$$$EXEC_ROOMIMAGE$$$</p><span style="border: solid #000000 1px; margin-left: 8px;" id="room2">X&nbsp;</span>ZZZ</td>
</tr>
</table>
</body>
</html>

12:38 am on Apr 24, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


<a rel="nofollow" href="#" onclick="secondClicktest(2);return false;">

This will stop the href being acted upon after the onclick.

12:45 am on Apr 24, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 0


Add
return false;
to the event.

<edit>Someone already replied while I was still reading post.</edit>

.

Additionally, get all of that inline CSS code bloat out into an external CSS file and use some classes instead.

Get rid of all the

<br><br><br>
tags and set the margins and/or padding using CSS instead.
9:07 am on Apr 24, 2009 (gmt 0)

Full Member

10+ Year Member

joined:Oct 6, 2003
posts:235
votes: 0


Thanks very much guys. I have tried it and it works. I thought it would be something I missed.

Do all inline events attached to a href trigger a http request without a return false;?

This seems like something I should have read about, but as you can see if I have it has slip my mind. I should be taking away with me and making sure use it with most onclick events?

</is just about to make onclick= return false; a mental snippet>

And thanks for the notes on removal of css to an external. This was just a prototype. Separation of css style and html / xhtml structure is something I do do.

1:11 pm on Apr 24, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


return false; prevents further processing of the event, in this case processing href, on keypress for example it could be used to disable some/all keys etc.
2:31 pm on Apr 26, 2009 (gmt 0)

Full Member

10+ Year Member

joined:Oct 6, 2003
posts:235
votes: 0


I see. Thanks. It has all become very clear now.