Mix of javascript, image and href

[Edwin Knoppert]

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?

 

[Laurent Bugnion]

Hi,

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

 

[Edwin Knoppert]

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..

 

[Edwin Knoppert]

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]

Hi,

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.

O well , maybe a non existing page..

Not sure what you mean.

HTH,
Laurent

 

[Edwin Knoppert]

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]

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/POSTBACK_in_ASPNet.asp

Greetings,
Laurent

 

[Edwin Knoppert]

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]

Hi Edwin,

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

 

[kferron]

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>

 

[Edwin Knoppert]

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>