unable to open jquery dialog on a linkbutton click

Question

note that i'm using asp.net with vb.net

jquery:

$("#create")
.button().click(function () {
$("#dialog-form").dialog("open");
});

$("#LinkButton3").click(function () {
        $("#dialog-form").dialog("open");
        return false;
    });

asp:

<asp:TemplateField HeaderText="Edit">
    <ItemTemplate> 
        <asp:LinkButton ID="LinkButton3" runat="server">LinkButton</asp:LinkButton>
    <a href="#" class="table-actions-button ic-table-edit" id="create"></a>
     </ItemTemplate> 
</asp:TemplateField>

the dialog opens for the a tag but does not open for the linkbutton can anyone tell me why my code is not working?

You need the client id of your link button: http://stackoverflow.com/questions/5392958/getting-id-from-asp-net-runat-server-in-jquery — Pete, Sep 26 '13 at 10:09

score 1 · Accepted Answer · answered Sep 26 '13 at 10:09

The id of linkbutton on client side would be different so use the ClientID to bind the event. Also put binding code indocument.ready. Assign a class to linkbutton and use class selector to bind event.

Html

<asp:TemplateField HeaderText="Edit">
    <ItemTemplate> 
        <asp:LinkButton ID="LinkButton3" runat="server" class="someclass">LinkButton</asp:LinkButton>    <a href="#" class="table-actions-button ic-table-edit" id="create"></a>
     </ItemTemplate> 
</asp:TemplateField>

Javascript

$('.someclass').click(function () {
    $("#dialog-form").dialog("open");
    return false;
});

If you need to use id for select then use attribute selector with starts with wild card.

$('[id=^LinkButton3]').click(function () {
    $("#dialog-form").dialog("open");
    return false;
});

score 0 · Answer 2 · answered Sep 26 '13 at 10:11

0

Use ClientID to get server control in jquery like this.

  var create= "#<%=create.ClientID%>";
    $(create).on('click', function() { 
      $("#dialog-form").dialog("open");
    });

Don't forget to include js file and js code inside document.ready .

answered Sep 26 '13 at 10:11

4b0

21,981
30
95
142

score 0 · Answer 3 · answered Sep 26 '13 at 10:11

Try this

Add UseSubmitBehavior="false" to your asp link button

your html

<asp:TemplateField HeaderText="Edit">
    <ItemTemplate> 
        <asp:LinkButton ID="LinkButton3" runat="server" UseSubmitBehavior="false">LinkButton</asp:LinkButton>
    <a href="#" class="table-actions-button ic-table-edit" id="create"></a>
     </ItemTemplate> 
</asp:TemplateField>

score 0 · Answer 4 · answered Sep 26 '13 at 10:12

0

LinkButton is server side asp.net controls which causes postback. Another point is you are not using the correct id of the control it's changed. Try with $('#<%=LinkButton3.ClientID%>').

answered Sep 26 '13 at 10:12

nrsharma

2,532
3
20
36

score 0 · Answer 5 · answered Sep 26 '13 at 10:15

0

Replace you link button with this

<asp:LinkButton ClientIDMode="Static" ID="LinkButton3" runat="server">LinkButton</asp:LinkButton>

see this:

ClientIDMode="Static"

answered Sep 26 '13 at 10:15

sangram parmar

8,462
2
23
47

unable to open jquery dialog on a linkbutton click

5 Answers5