ModalPopup: Mix of javascript, image and href

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?Hi,

Edwin Knoppert wrote:

Quote:

Originally Posted by

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="http://links.10026.com/?link=nojs.html" onclick="myFunction();return false;">
<img src="http://pics.10026.com/?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
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.

Quote:

Originally Posted by

JavaScript, or linking to a basic page showing the same content, but

O well , maybe a non existing page..

"Laurent Bugnion" <galasoft-lb@dotnet.itags.org.bluewin.chschreef in bericht
news:uaesBzKCHHA.4764@dotnet.itags.org.TK2MSFTNGP03.phx.gbl...

Quote:

Originally Posted by

Hi,
>
Edwin Knoppert wrote:

Quote:

Originally Posted by

>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="http://links.10026.com/?link=nojs.html" onclick="myFunction();return false;">
<img src="http://pics.10026.com/?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

Hi,

Edwin Knoppert wrote:

Quote:

Originally Posted by

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.

Quote:

Originally Posted by

Quote:

Originally Posted by

>JavaScript, or linking to a basic page showing the same content, but

O well , maybe a non existing page..

Not sure what you mean.

<a href="http://links.10026.com/?link=#" 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>

"Edwin Knoppert" <news@dotnet.itags.org.hellobasic.comschreef in bericht
news:455b0419$0$2222$ba620dc5@dotnet.itags.org.text.nova.planet.nl. ..

Quote:

Originally Posted by

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

Quote:

Originally Posted by

>JavaScript, or linking to a basic page showing the same content, but

O well , maybe a non existing page..
>
>
>
"Laurent Bugnion" <galasoft-lb@dotnet.itags.org.bluewin.chschreef in bericht
news:uaesBzKCHHA.4764@dotnet.itags.org.TK2MSFTNGP03.phx.gbl...

Quote:

Originally Posted by

>Hi,
>>
>Edwin Knoppert wrote:

Quote:

Originally Posted by

>>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="http://links.10026.com/?link=nojs.html" onclick="myFunction();return false;">
><img src="http://pics.10026.com/?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

>
>

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" <galasoft-lb@dotnet.itags.org.bluewin.chschreef in bericht
news:eQX0dJLCHHA.4428@dotnet.itags.org.TK2MSFTNGP04.phx.gbl...

Quote:

Originally Posted by

Hi,
>
Edwin Knoppert wrote:

Quote:

Originally Posted by

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

Quote:

Originally Posted by

Quote:

Originally Posted by

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

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/useritem...K_in_ASPNet.asp
Greetings,
Laurent

Edwin Knoppert wrote:

Quote:

Originally Posted by

Here is my code, this is the only way how i could make this to work as
wanted:
>
<a href="http://links.10026.com/?link=#" 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
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)

Quote:

Originally Posted by

>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" <galasoft-lb@dotnet.itags.org.bluewin.chschreef in bericht
news:uU7%23onMCHHA.4832@dotnet.itags.org.TK2MSFTNGP06.phx.gbl...

Quote:

Originally Posted by

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/useritem...K_in_ASPNet.asp
>
Greetings,
Laurent
>
Edwin Knoppert wrote:

Quote:

Originally Posted by

>Here is my code, this is the only way how i could make this to work as
>wanted:
>>
> <a href="http://links.10026.com/?link=#" 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

Hi Edwin,

Edwin Knoppert wrote:

Quote:

Originally Posted by

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.

Quote:

Originally Posted by

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
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="http://pics.10026.com/?src=myimagepath.jpg">
more text here
</div>

On Nov 15, 9:24 am, Laurent Bugnion <galasoft...@dotnet.itags.org.bluewin.chwrote:

Quote:

Originally Posted by

Hi Edwin,
>
Edwin Knoppert wrote:

Quote:

Originally Posted by

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

Quote:

Originally Posted by

It's always the struggle between small sophisticated code and having
reliable code :)

Quote:

Originally Posted by

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

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="http://pics.10026.com/?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:

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

"kferron" <kevin.ferron@dotnet.itags.org.gmail.comschreef in bericht
news:1163612921.463470.95130@dotnet.itags.org.k70g2000cwa.googlegro ups.com...

Quote:

Originally Posted by

>
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="http://pics.10026.com/?src=myimagepath.jpg">
more text here
</div>
>
>
>
On Nov 15, 9:24 am, Laurent Bugnion <galasoft...@dotnet.itags.org.bluewin.chwrote:

Quote:

Originally Posted by

>Hi Edwin,
>>
>Edwin Knoppert wrote:

Quote:

Originally Posted by

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

Quote:

Originally Posted by

It's always the struggle between small sophisticated code and having
reliable code :)

Quote:

Originally Posted by

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

Monday, March 26, 2012

Mix of javascript, image and href

0 comments:

Post a Comment

ModalPopup

Blog Archive

About Me