close Jquery Modal popup Datalist button click

Question

i am running into a problem that i have a jquery modal popup in my usercontrol that i show on a click of a button and user selects something from datalist and then i returned some value on the parent user control in a hidden field all is fine till here but after the click on the select button i want the jquery modal to be closed also here is some code of the div which i show in modal diaog

<asp:UpdatePanel ID="upDatagrabber" runat="server">
<ContentTemplate>
    <table>
        <tr>
            <td>Select Category</td><td><asp:DropDownList ID="ddlTemplateCatagory" 
                runat="server" AutoPostBack="True"></asp:DropDownList></td>
        </tr>
        <tr>
            <td colspan="2">
                <table cellspacing="0" cellpadding="0" border="0" style="float:left;padding:5px;margin:5px;width:200px;display:block;">
                        <tbody>
                            <tr>
                                <asp:DataList ID="dlTemplates" runat="server" RepeatColumns="3" 
                                    RepeatDirection="Horizontal" onitemcommand="dlTemplates_ItemCommand">
                                    <ItemTemplate>
                                        <td style="border-right: gainsboro 1px solid; border-top: gainsboro 1px solid;
                                            border-left: gainsboro 1px solid; border-bottom: gainsboro 1px solid;padding:5px;">
                                            <table><tr><td>
                                            <%# Eval("NewsletterName").ToString()%>
                                            </td></tr>
                                            <tr><td><asp:Button ID="btnSelectNL_Template" Text="Select" runat="server" CssClass="button" CommandArgument='<%# Eval("NewsletterId").ToString()%>' CommandName="Select"/></td></tr>
                                            </table>
                                        </td>
                                    </ItemTemplate>
                                </asp:DataList>
                            </tr>
                        </tbody>
                 </table>
            </td>
        </tr>
    </table>
</ContentTemplate>

and in the ItemCommandEvent I tried following

protected void dlTemplates_ItemCommand(object source, DataListCommandEventArgs e)
    {
        if (e.CommandName == "Select")
        {
            int SelectedNewsletterId = int.Parse(e.CommandArgument.ToString());
            if (NewsletterSelectedHandler!= null)
            {
                                         e.Item.Attributes.Add("onclick","jQuery('#mydialog').dialog('close');");
                NewsletterSelectedHandler(SelectedNewsletterId);
            }
        }
    }

EDIT

i shown the popup using this in my code behind

ScriptManager.RegisterClientScriptBlock(this.Page, Page.GetType(), "change", "jQuery('#mydialog').dialog('open');closedialog = 1;jQuery('#mydialog').parent().appendTo(jQuery('form:aspnetForm'));", true);

popup shown successfully but i could not close it on the button click of datalist child button i tried code provided by tugburk i checked the error console also there is no error code for close is as followd :

<script type="text/javascript">
$(document).ready(function(){

    $('#ctl00_ContentPlaceHolder1_NewsletterWizard1_TemplatePicker1_dlTemplates_ctl00_btnSelectNL_Template').click(function(){

      $('#mydialog').dialog('close');

    });

  });
</script>

Any help would be appreciable Many thanks in the Advance

tugberk · Accepted Answer · 2011-05-21T09:02:44.320

2

use the following code;

  $(document).ready(function(){

    $('#<%= btnSelectNL_Template.ClientID %>').click(function(){

      $('#id_of_your_dialog_element').dialog('close');

    });

  });

EDIT : you are hardcoding your button id there;

ctl00_ContentPlaceHolder1_NewsletterWizard1_TemplatePicker1_dlTemplates_ctl00_b‌tnSelectNL_Template

DataList will produce multiple buttons if you have multiple records. add a class name to that button, and try to write a code against it

$('.MyButtonClass').click(function(){ 
    $('#mydialog').dialog('close'); 
});

edited May 21 '11 at 09:02

answered May 21 '11 at 07:16

tugberk

57,477
67
243
335

@Devjosh but this code will not execute your c# code. dlTemplates_ItemCommand event. – tugberk May 21 '11 at 07:21
@tugberk, it did not work dont worry about my server side code that is running fine even after your suggested script but modal is not closing – Devjosh May 21 '11 at 07:27
@Devjosh it should have. I put up a sample online. tyr this : http://jsfiddle.net/tugberk/Z2EVJ/ – tugberk May 21 '11 at 07:34
@Devjosh did you put the id of your dialog element? ***$('#id_of_your_dialog_element')*** – tugberk May 21 '11 at 07:35
yupp i tried like this – Devjosh May 21 '11 at 07:42
please update your qu and put up your jquery code so that we could see. – tugberk May 21 '11 at 07:42
as such i was not having any code in my html but i placed only the script that you suggested and i cant put all the code here sorry anyways thanks for the help even i think this should work you deserve an upvote :)\ – Devjosh May 21 '11 at 07:46
@Devjoish now I am curious. if you don't have any javascript code on your html, how did you pop the dialog box up in the fist place. have a careful look at JQuery UI Dialog : http://jqueryui.com/demos/dialog/ u are missing something here – tugberk May 21 '11 at 07:50
@Devjosh you are hardcoding your button id there; ***ctl00_ContentPlaceHolder1_NewsletterWizard1_TemplatePicker1_dlTemplates_ctl00_btnSelectNL_Template*** DataList will produce multiple buttons if you have multiple records. add a class name to that button, and try to write a code against it `$('.MyButtonClass').click(function(){ $('#mydialog').dialog('close'); });` – tugberk May 21 '11 at 08:08

close Jquery Modal popup Datalist button click

1 Answers1