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

Question

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;
    }

Could you post the error code? The current question doesn't have it attached — Draken
– Draken, Commented May 6, 2016 at 6:27

Jitendra Tiwari · Accepted Answer · 2016-05-06 12:42:14Z

1

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>

edited May 6, 2016 at 12:42

answered May 6, 2016 at 6:38

Jitendra Tiwari

1,6913 gold badges16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vinayaka N Over a year ago

Thanks it is working..........but one more problem is there. When i click on Duplicate imagebutton it will display popup and parallel page will loading and after loading popup will not display

Vinayaka N Over a year ago

This is backend code ' 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();'

Jitendra Tiwari Over a year ago

did you done anything in back-end using this button? If Yes, then grid should be in update panel. Else remove OnClick="lnkbtnDuplicate_Click" from image button.

Jitendra Tiwari Over a year ago

however return false will stop calling back-end functionality and it will work for me.

Jitendra Tiwari Over a year ago

check my updated code Insert grid template inside update panel

Wenson · Accepted Answer · 2016-05-06 06:41:09Z

0

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" />

answered May 6, 2016 at 6:41

Wenson

2355 silver badges17 bronze badges

2 Comments

Vinayaka N Over a year ago

But Id should be within <obout:GridTemplate runat="server" ID="duplicate"> <Template> </Template> </obout:GridTemplate> tags because i am bringing data from database so.......

Wenson Over a year ago

Refer this link obout.com/obout.ajax.ui/htmleditor/examples/…

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related