CODEWITHSUNDEEP
jqueryasp.net
Vinayaka N
Vinayaka N

Reputation: 105

Display modal popup without page loading using asp.net and jquery

As per Jitendra Tiwari suggestion i have changed my code and it works fine, it displaying popup but parallely page is loading after loading page popup will not display Here is the code i have changed <obout:GridTemplate runat="server" ID="duplicate"> <Template> <asp:ImageButton ID="lnkbtnDuplicate" runat="server" OnClick="lnkbtnDuplicate_Click" AlternateText="Duplicate" CssClass='<%#Container.DataItem["schedule1"]%>' OnClientClick="OpenPopup();"></asp:ImageButton> </Template> </obout:GridTemplate> and in dialog box have to display message that code is <div> <div id="popupdiv" title="Basic modal dialog" class="dialog"> Are you sure you want ready to duplicate? <div class="footer" style="padding: 8px;"> <asp:Button ID="Button2" runat="server" Text="Proceed" CssClass="yes" OnClick="btnOkay_Click" /> <asp:Button ID="Button3" runat="server" Text="Cancel" CssClass="no" OnClick="btnCancel1_Click" /> <asp:Button ID="btnOkay" runat="server" Text="Yes" CssClass="yes hide" /> <asp:Button ID="btnCancel1" runat="server" Text="Cancel" CssClass="no hide" /> </div> </div> </div> Jquery code is 

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

         $("#popupdiv").dialog({
             autoOpen: false,
                title: "Dualistic e-Filing",
                width: 430,
                height: 250,
                modal: true,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                }
            });              
     })
     function OpenPopup() {
         $("#popupdiv").dialog("open");
         return false;
     }
</script>

my back-end code is 

 protected void lnkbtnDuplicate_Click(object sender, ImageClickEventArgs e)
    {
        try
        {

            Hashtable selectedRec = (Hashtable)ogridForms.SelectedRecords[0];
            Session["formkey_temp"] = Convert.ToString(selectedRec["form_key"].ToString());
            Session["bussiness_temp"] = Convert.ToString(selectedRec["business_key"]);
            Session["filling_temp"] = Convert.ToString(selectedRec["filing_type"]).ToUpper();
        }
        catch { }
    }
    protected void btnOkay_Click(object sender, EventArgs e)
    {
        try
        {
            BAL_F2290 objFormKeys = new BAL_F2290();
            var s = objFormKeys.Duplicate(Session["formkey_temp"].ToString());
            Session["FORM_KEY"] = Convert.ToString(s);
            Session["BUSINESS_KEY"] = Convert.ToString(Session["bussiness_temp"]);
            Session["FILING_TYPE"] = Convert.ToString(Session["filling_temp"]).ToUpper();
            Response.Redirect("TaxPeriod.aspx?dup=1");
        }
        catch (Exception ex)
        {
            string a = ex.Message;
        }
    }
    protected void btnCancel1_Click(object sender, EventArgs e)
    {

        Session["formkey_temp"] = null;
        Session["bussiness_temp"] = null;
        Session["filling_temp"] = null;
    }

Upvotes: 0

Views: 3928

Answers (2)

Jitendra Tiwari
Jitendra Tiwari

Reputation: 1691

You should try with OnClientClick event.

Try this solution

<obout:GridTemplate runat="server" ID="duplicate">
    <Template>
        <asp:ImageButton ID="lnkbtnDuplicate" runat="server"
            OnClick="lnkbtnDuplicate_Click" AlternateText="Duplicate"
            CssClass='<%#Container.DataItem["schedule1"]%>' OnClientClick="return OpenPopup();">   
        </asp:ImageButton>
    </Template>
</obout:GridTemplate>

Javascript

<script type="text/javascript">
 // Create your dialog one time when page ready
 $(function () {         
        $("#popupdiv").dialog({
            autoOpen:false, 
            title: "jQuery Popup from Server Side",
            width: 430,
            height: 250,
            modal: true,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });                    
 });
 // Open using this function
 function OpenPopup() {
     $("#popupdiv").dialog("open");
     return false;
 }
</script>

Insert grid template inside update panel

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Always" runat="server">
        <ContentTemplate>                    
            <obout:GridTemplate runat="server" ID="duplicate">
               <Template>
                  <asp:ImageButton ID="lnkbtnDuplicate" runat="server"
                    OnClick="lnkbtnDuplicate_Click" AlternateText="Duplicate"
                    CssClass='<%#Container.DataItem["schedule1"]%>'    OnClientClick="OpenPopup();">   
                  </asp:ImageButton>
              </Template>
           </obout:GridTemplate>
        </ContentTemplate>
 </asp:UpdatePanel>

Upvotes: 1

Wenson
Wenson

Reputation: 235

Try this it will work 

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $("[id*=btnPopup]").live("click", function () {
    $("#dialog").dialog({
        title: "jQuery Dialog Popup",
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    });
    return false;
});
</script>
 <div id="dialog" style="display: none">
This is a simple popup
</div>
<asp:Button ID="btnPopup" runat="server" Text="Show Popup" />

Upvotes: 0

Related Questions