Click functions for html div [Resolved]

Posted by Sharpcnet under C# on 12/26/2013 | Points: 10 | Views : 1671 | Status : [Member] | Replies : 4

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

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

[Resolved]

Reply | Reply with Attachment

Alert Moderator

Responses

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

0	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

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

0	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

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

0	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

0	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

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

Latest Posts