Click functions for html div [Resolved]

Posted by Sharpcnet under C# on 12/26/2013 | Points: 10 | Views : 658 | Status : [Member] | Replies : 4
<div id="div1" runat="server"
onclick="document.getElementById('<%=fav1.ClientID%>').click()" class="grid">
//some content
<asp:LinkButton id="fav1" runat="server" visible="false"
PostBackurl="~/someurl.aspx" />
</div>


The div is clickable and I would like it to navigate to the target page on click, but thats not happening. There are 10 such divs on page and the postbackurl for all linkbuttons are added dynamically. (I just hardcoded here to test).

Also added, the onclick property for the button, but it doesnt fire the server event too. How can I make it work?




Responses

Posted by: kgovindarao523-21772 on: 12/26/2013 [Member] [MVP] Bronze | Points: 50

Up
0
Down

Resolved
Hi,


Here is your solution
<div>
<script type="text/javascript">
function myfunction()
{
document.getElementById('<%=fav1.ClientID%>').click();
}
</script>
<div>
<div id="div1" runat="server" onclick="myfunction()"
class="grid">
//some content
<asp:LinkButton ID="fav1" runat="server" style="display:none" PostBackUrl="~/WebForm2.aspx" />
</div>


Thank you,
Govind

Thank you,
Govind

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Allemahesh on: 12/27/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
I got you problem. Try the below dynamic code.


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript" language="javascript">
function redirect(id) {
document.getElementById(id.children[0].getAttribute('id')).click();
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div id="div1" runat="server" onclick="redirect(this)" class="grid">
//fav1 content
<asp:LinkButton ID="fav1" runat="server" Style="display: none" PostBackUrl="~/WebForm1.aspx" />
</div>
<div id="div2" runat="server" onclick="redirect(this)" class="grid">
//fav2 content
<asp:LinkButton ID="fav2" runat="server" Style="display: none" PostBackUrl="~/WebForm2.aspx" />
</div>
<div id="div3" runat="server" onclick="redirect(this)" class="grid">
//fav3 content
<asp:LinkButton ID="fav3" runat="server" Style="display: none" PostBackUrl="~/WebForm3.aspx" />
</div>
<div id="div4" runat="server" onclick="redirect(this)" class="grid">
//fav4 content
<asp:LinkButton ID="fav4" runat="server" Style="display: none" PostBackUrl="~/WebForm4.aspx" />
</div>
<div id="div5" runat="server" onclick="redirect(this)" class="grid">
//fav5 content
<asp:LinkButton ID="fav5" runat="server" Style="display: none" PostBackUrl="~/WebForm5.aspx" />
</div>
<div id="div6" runat="server" onclick="redirect(this)" class="grid">
//fav6 content
<asp:LinkButton ID="fav6" runat="server" Style="display: none" PostBackUrl="~/WebForm6.aspx" />
</div>
</form>
</body>
</html>


Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Allemahesh on: 12/27/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
have you tried my code:-

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sharpcnet on: 12/28/2013 [Member] Starter | Points: 25

Up
0
Down
Thank you guys.
@Govind - your code works and is simple too. Its Just that I have to write 10 js functions
for each div. If there is no other way, I might have to stick with this.

@AlleMahesh - You definetely got what I am looking for, but unfortunatly, your code is not
working. Sending an asp control's id to a js function has not worked for me
even before, and I suspect, it could be an incorrect syntax.

My Current code:

<div id="div1" runat="server" class="grid" onclick="Redirect(this)">

<figure>
<asp:linkbutton id="fav1" runat="server" visible="false" postbackurl="~/page1.aspx">
</asp:linkbutton>
<asp:image..../>
<figcaption>
<span>text</span>
</figcaption>
</figure>
</div>




Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response