473,320 Members | 1,974 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Mix of javascript, image and href

I have an asp.net imagebutton with a clickevent.
I have enclosed an anchor around the image and a small text.
If i click the image the event is executed (while the href of the anchor
shows in the statusbar)

If the user clicks the image or the text beneat it it should do the same,
executing the image asp.net server event.

I can manage this fine using javascript but the href must contain a
character to get the mousehand.
I used # but than the window scrolls to top, postback happens and the scroll
position remains to top.
I use them maintain scroll stuff in my masterpage.

I could use two controls, an imagebutton and a linkbutton, i was trying to
avoid the 2nd.

The idea is that i ever might use a div so that the whole area behaves as
one click.. 'thingy'..

Any ideas?

Nov 15 '06 #1
10 2358
Hi,

Edwin Knoppert wrote:
I have an asp.net imagebutton with a clickevent.
I have enclosed an anchor around the image and a small text.
If i click the image the event is executed (while the href of the anchor
shows in the statusbar)

If the user clicks the image or the text beneat it it should do the same,
executing the image asp.net server event.

I can manage this fine using javascript but the href must contain a
character to get the mousehand.
I used # but than the window scrolls to top, postback happens and the scroll
position remains to top.
You must return false in the event handler to avoid executing the HREF.

Additionally, the best practice is not to use "#" in the HREF but rather
a link to a page explaining why this functionality doesn't work without
JavaScript, or linking to a basic page showing the same content, but
without the additional functionality provided by JavaScript.

Example:
<a href="nojs.html" onclick="myFunction();return false;">
<img src="..." /></a>

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch
Nov 15 '06 #2
In this case it's a asp net image with event.
The anchor executes the js code and shows an alert(), after that the scroll
happens, even with return 0 (maybe this should be 'false') but then the
imagebutton event is executed and the return is ignored.
JavaScript, or linking to a basic page showing the same content, but
O well , maybe a non existing page..

"Laurent Bugnion" <ga*********@bluewin.chschreef in bericht
news:ua**************@TK2MSFTNGP03.phx.gbl...
Hi,

Edwin Knoppert wrote:
>I have an asp.net imagebutton with a clickevent.
I have enclosed an anchor around the image and a small text.
If i click the image the event is executed (while the href of the anchor
shows in the statusbar)

If the user clicks the image or the text beneat it it should do the same,
executing the image asp.net server event.

I can manage this fine using javascript but the href must contain a
character to get the mousehand.
I used # but than the window scrolls to top, postback happens and the
scroll position remains to top.

You must return false in the event handler to avoid executing the HREF.

Additionally, the best practice is not to use "#" in the HREF but rather a
link to a page explaining why this functionality doesn't work without
JavaScript, or linking to a basic page showing the same content, but
without the additional functionality provided by JavaScript.

Example:
<a href="nojs.html" onclick="myFunction();return false;">
<img src="..." /></a>

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch

Nov 15 '06 #3
Hi,

Edwin Knoppert wrote:
In this case it's a asp net image with event.
The anchor executes the js code and shows an alert(), after that the scroll
happens, even with return 0 (maybe this should be 'false') but then the
imagebutton event is executed and the return is ignored.
What is the produced HTML code? Is it a "input type='image'", or a
normal image like I described?

The "scroll-to-top" effect is typical of having "#" in the HREF. What
happens there is that the browser looks for the anchor named "" (empty
string) in the page (just like it would look for an anchor named "hello"
if you had "href='#hello'"), and since it doesn't find any, it jumps to
the top of the page. The usual cure for that is to add return false; to
the onclick event, so you have to find a way to get the ASP.NET engine
to output this code. Maybe using the Attributes collection of the Image
class, you can get it to add the "return false;" statement.

>JavaScript, or linking to a basic page showing the same content, but
O well , maybe a non existing page..
Not sure what you mean.

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch
Nov 15 '06 #4
Here is my code, this is the only way how i could make this to work as
wanted:

<a href="#" onclick="javascript:return downloadnow(2);">
<asp:ImageButton ID="imgFactuur" runat="server"
ImageUrl="~/payment/icoesdoc.gif" /><br />
<span style="font-size: smaller;">
<br />
Setup </span></a>
<div style="display: none">
<asp:Button ID="cmdFactuur" runat="server"
Text="Button" OnClick="cmdFactuur_Click" />
</div>

<script language="javascript">
function downloadnow(n)
{
setTimeout(
"document.getElementById('<%=cmdFactuur.ClientID%> ').click();", 10 );
return false;
}
</script>
"Edwin Knoppert" <ne**@hellobasic.comschreef in bericht
news:45**********************@text.nova.planet.nl. ..
In this case it's a asp net image with event.
The anchor executes the js code and shows an alert(), after that the
scroll happens, even with return 0 (maybe this should be 'false') but then
the imagebutton event is executed and the return is ignored.
>JavaScript, or linking to a basic page showing the same content, but
O well , maybe a non existing page..

"Laurent Bugnion" <ga*********@bluewin.chschreef in bericht
news:ua**************@TK2MSFTNGP03.phx.gbl...
>Hi,

Edwin Knoppert wrote:
>>I have an asp.net imagebutton with a clickevent.
I have enclosed an anchor around the image and a small text.
If i click the image the event is executed (while the href of the anchor
shows in the statusbar)

If the user clicks the image or the text beneat it it should do the
same, executing the image asp.net server event.

I can manage this fine using javascript but the href must contain a
character to get the mousehand.
I used # but than the window scrolls to top, postback happens and the
scroll position remains to top.

You must return false in the event handler to avoid executing the HREF.

Additionally, the best practice is not to use "#" in the HREF but rather
a link to a page explaining why this functionality doesn't work without
JavaScript, or linking to a basic page showing the same content, but
without the additional functionality provided by JavaScript.

Example:
<a href="nojs.html" onclick="myFunction();return false;">
<img src="..." /></a>

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch


Nov 15 '06 #5
See my post above having the code :)

After your first reply i rewrote my code.
And yes, i have added a commandbutton and click that one.
So what type of image control is not important any longer.

I'm aware of the "#" issue, it's now properly captured.

Just take a peek to the code, maybe this can be optimized.
I was 'hoping' that an asp panel could do the trick, but then i lose the
mousehand and such.

There seems to be no straight forward way using asp.net code to make this
stuff.
"Laurent Bugnion" <ga*********@bluewin.chschreef in bericht
news:eQ**************@TK2MSFTNGP04.phx.gbl...
Hi,

Edwin Knoppert wrote:
>In this case it's a asp net image with event.
The anchor executes the js code and shows an alert(), after that the
scroll happens, even with return 0 (maybe this should be 'false') but
then the imagebutton event is executed and the return is ignored.

What is the produced HTML code? Is it a "input type='image'", or a normal
image like I described?

The "scroll-to-top" effect is typical of having "#" in the HREF. What
happens there is that the browser looks for the anchor named "" (empty
string) in the page (just like it would look for an anchor named "hello"
if you had "href='#hello'"), and since it doesn't find any, it jumps to
the top of the page. The usual cure for that is to add return false; to
the onclick event, so you have to find a way to get the ASP.NET engine to
output this code. Maybe using the Attributes collection of the Image
class, you can get it to add the "return false;" statement.

>>JavaScript, or linking to a basic page showing the same content, but
O well , maybe a non existing page..

Not sure what you mean.

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch

Nov 15 '06 #6
Hi,

I meant the produced client-side code, which could explain why it
doesn't behave like you hope, and which you can get using "view-source"
in the web browser.

About your code hereunder: If you use a link anyway, I wouldn't use an
ImageButton. IIRC, ImageButton produces a "input type='image'" which is
an old way to post forms using an image instead of a standard button. I
would rather use the link and a normal image.

Also, don't use the "javascript:" pseudo protocol, it's bad practice.
Simply remove the "javscript:" string from your onclick even handler.

I understand what you want to do now, which is use an Image wired to the
OnClick event. I am sure there is an easier way to do that. One
possibility is to use the "downloadnow" method to call the
"__doPostBack" function which is automatically generated by ASP.NET. You
just have to make sure that you get the parameters right:

http://www.codeproject.com/useritems..._in_ASPNet.asp

Greetings,
Laurent

Edwin Knoppert wrote:
Here is my code, this is the only way how i could make this to work as
wanted:

<a href="#" onclick="javascript:return downloadnow(2);">
<asp:ImageButton ID="imgFactuur" runat="server"
ImageUrl="~/payment/icoesdoc.gif" /><br />
<span style="font-size: smaller;">
<br />
Setup </span></a>
<div style="display: none">
<asp:Button ID="cmdFactuur" runat="server"
Text="Button" OnClick="cmdFactuur_Click" />
</div>

<script language="javascript">
function downloadnow(n)
{
setTimeout(
"document.getElementById('<%=cmdFactuur.ClientID%> ').click();", 10 );
return false;
}
</script>

--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch
Nov 15 '06 #7
Thanks Laurent,
I see that there is no trivial way for this.
I understand one can use code to simulate clickevents but imo it's more
reliable to use a button under the hood then.
It's always the struggle between small sophisticated code and having
reliable code :)

I somewhat agree on the imagebutton, i do no longer need the click event for
this one but still asp.net image control 's ~/ stuff is recommended to use
imo.
(Just another control that is)
>Also, don't use the "javascript:" pseudo protocol, it's bad practice.
Huh?!
Imo it's the best practise, since afaik one's browser could (never to happen
i guess) have another default script language set.
Please elaborate.
Even asp.net generates these keywords.


"Laurent Bugnion" <ga*********@bluewin.chschreef in bericht
news:uU****************@TK2MSFTNGP06.phx.gbl...
Hi,

I meant the produced client-side code, which could explain why it doesn't
behave like you hope, and which you can get using "view-source" in the web
browser.

About your code hereunder: If you use a link anyway, I wouldn't use an
ImageButton. IIRC, ImageButton produces a "input type='image'" which is an
old way to post forms using an image instead of a standard button. I would
rather use the link and a normal image.

Also, don't use the "javascript:" pseudo protocol, it's bad practice.
Simply remove the "javscript:" string from your onclick even handler.

I understand what you want to do now, which is use an Image wired to the
OnClick event. I am sure there is an easier way to do that. One
possibility is to use the "downloadnow" method to call the "__doPostBack"
function which is automatically generated by ASP.NET. You just have to
make sure that you get the parameters right:

http://www.codeproject.com/useritems..._in_ASPNet.asp

Greetings,
Laurent

Edwin Knoppert wrote:
>Here is my code, this is the only way how i could make this to work as
wanted:

<a href="#" onclick="javascript:return
downloadnow(2);">
<asp:ImageButton ID="imgFactuur" runat="server"
ImageUrl="~/payment/icoesdoc.gif" /><br />
<span style="font-size: smaller;">
<br />
Setup </span></a>
<div style="display: none">
<asp:Button ID="cmdFactuur" runat="server"
Text="Button" OnClick="cmdFactuur_Click" />
</div>

<script language="javascript">
function downloadnow(n)
{
setTimeout(
"document.getElementById('<%=cmdFactuur.ClientID% >').click();", 10 );
return false;
}
</script>


--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch

Nov 15 '06 #8
Hi Edwin,

Edwin Knoppert wrote:
Thanks Laurent,
I see that there is no trivial way for this.
I understand one can use code to simulate clickevents but imo it's more
reliable to use a button under the hood then.
I don't really think that it's more reliable. For the records, every
time that you use a control with autopostback = true (for example
checkboxes, radio buttons, listboxes...), in fact every time you use
anything else than a HTML submit or a HTML image to submit the form, the
_doPostBack method is used. I think it works pretty well, except when
JavaScript is off.
It's always the struggle between small sophisticated code and having
reliable code :)

I somewhat agree on the imagebutton, i do no longer need the click event for
this one but still asp.net image control 's ~/ stuff is recommended to use
imo.
(Just another control that is)
Not sure about the recommendation... I think that what you need is
client-side code that works. If the generated HTML code produced by
ASP.NET is not reliable enough, then you can generate your own :-)

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch
Nov 15 '06 #9

Just to touch on one of your issues, "I can manage this fine using
javascript but the href must contain a
character to get the mousehand. "

don't forget that most modern browsers support setting the div's style
to accomplish this:
<div style="cursor: pointer; cursor: hand;"
onclick="downloadnew(2);"><img src="myimagepath.jpg">
more text here
</div>

On Nov 15, 9:24 am, Laurent Bugnion <galasoft...@bluewin.chwrote:
Hi Edwin,

Edwin Knoppert wrote:
Thanks Laurent,
I see that there is no trivial way for this.
I understand one can use code to simulate clickevents but imo it's more
reliable to use a button under the hood then.I don't really think that it's more reliable. For the records, every
time that you use a control with autopostback = true (for example
checkboxes, radio buttons, listboxes...), in fact every time you use
anything else than a HTML submit or a HTML image to submit the form, the
_doPostBack method is used. I think it works pretty well, except when
JavaScript is off.
It's always the struggle between small sophisticated code and having
reliable code :)
I somewhat agree on the imagebutton, i do no longer need the click event for
this one but still asp.net image control 's ~/ stuff is recommended to use
imo.
(Just another control that is)Not sure about the recommendation... I think that what you need is
client-side code that works. If the generated HTML code produced by
ASP.NET is not reliable enough, then you can generate your own :-)

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering:http://www.galasoft-LB.ch
Private/Malaysia:http://mypage.bluewin.ch/lbugnion
Support children in Calcutta:http://www.calcutta-espoir.ch
Nov 15 '06 #10
Thanks Kevin,

I have used your approach like:
<div id="download1" style="cursor: pointer; cursor:
hand; text-align: center" onclick="javascript:download1(this, 1);">
<img src="../payment/icoes.gif" /><br />
<span style="text-decoration: underline; color:
Blue; font-size: smaller;">Hello</span>
<br />
<br />
<br />
</div>
<div style="display: none">
<asp:Button ID="cmdDownload" runat="server"
Text="Button" OnClick="cmdDownload_Click" />
</div>

And:

<script language="javascript">
function download1( t, n )
{
// Avoid doubleclicks..
t.disabled = true;
setTimeout( "document.getElementById(\x22" + t.id + "\x22).disabled
= false;", 3000 );

// Execute download.
switch( n )
{
case 1:
document.getElementById('<%=cmdDownload.ClientID%> ').click();
break;
case 2:
document.getElementById('<%=cmdFactuur.ClientID%>' ).click();
break;
}
return false;
}
</script>

"kferron" <ke**********@gmail.comschreef in bericht
news:11*********************@k70g2000cwa.googlegro ups.com...
>
Just to touch on one of your issues, "I can manage this fine using
javascript but the href must contain a
character to get the mousehand. "

don't forget that most modern browsers support setting the div's style
to accomplish this:
<div style="cursor: pointer; cursor: hand;"
onclick="downloadnew(2);"><img src="myimagepath.jpg">
more text here
</div>

On Nov 15, 9:24 am, Laurent Bugnion <galasoft...@bluewin.chwrote:
>Hi Edwin,

Edwin Knoppert wrote:
Thanks Laurent,
I see that there is no trivial way for this.
I understand one can use code to simulate clickevents but imo it's more
reliable to use a button under the hood then.I don't really think that
it's more reliable. For the records, every
time that you use a control with autopostback = true (for example
checkboxes, radio buttons, listboxes...), in fact every time you use
anything else than a HTML submit or a HTML image to submit the form, the
_doPostBack method is used. I think it works pretty well, except when
JavaScript is off.
It's always the struggle between small sophisticated code and having
reliable code :)
I somewhat agree on the imagebutton, i do no longer need the click
event for
this one but still asp.net image control 's ~/ stuff is recommended to
use
imo.
(Just another control that is)Not sure about the recommendation... I
think that what you need is
client-side code that works. If the generated HTML code produced by
ASP.NET is not reliable enough, then you can generate your own :-)

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering:http://www.galasoft-LB.ch
Private/Malaysia:http://mypage.bluewin.ch/lbugnion
Support children in Calcutta:http://www.calcutta-espoir.ch

Nov 20 '06 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Carl Gilbert | last post by:
Hi I have some ASP code that I want to run from CD within a VB.NET windows application with a web browser control. However, to get the ASP pages to run without a server is proving quite...
8
by: chrisdude911 | last post by:
how do i add video into a javascript web page with my own custom buttons?
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.