Use JavaScript to close modal window upon button click event

Posted on 2011-10-25
Last Modified: 2012-05-12
I have an ASP.NET page that opens another page in a modal window.  The window that is opened contains a few text boxes and a button.  This window is used to add a new piece of data.  When the user clicks the button, I need to validate that the text boxes contain valid data and that the data was successfully inserted into the database.  If the insert was successful, the window needs to close and perform a postback on the parent page.  I have very little JavaScript skills; however, I can validate the required fields, close the modal window, and perform a postback via JavaScript.  However, I have no idea how to determine if the insert was successful prior to closing the window.  My DB insert is currently performed as a click event of the button, but that executes after the JavaScript.  How can I execute my JavaScript for closing the modal window and updating the parent page after the code for inserting into the DB executes?
Question by:christopher_perry

    Author Comment

    One thing to note:

    Currently, after the successful insertion of the record to the DB, I then call Response.Write() to execute JavaScript to close the modal window and refresh the parent page.  Although this works, is there any way to do this outside of the code-behind?

    Author Comment

    Here's another thing, if it helps:

    The data is inserted using a WCF service.
    LVL 20

    Accepted Solution

    Ok that's a lot of stuff to do. It seems you know how to do everything you want and have laid out where your problem is. So what I would suggest is to use the following in your server-side insert button click event if the insert is a success:

    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "script", "var insertSuccess=true; SomeFunction();", true);

    OR if the insert fails:

    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "script", "var insertSuccess=true; SomeFunction();", true);

    So basically you could do this lots of ways but the idea is that this JavaScript will be added and run after the "Insert" server-side event and you can do all the other stuff you want to do from there.

    Hope that's enough to make sense.
    LVL 20

    Assisted Solution

    I want to make a suggestion/comment on this issue as well. I hope you dont mind.

    You are I think the 3rd person I've seen recently doing something like this and I think many are making their lives unnecessarily difficult.

    You are not truly using a "modal" you are using a new window (which I can see you pretty much get from some of the terminology you use). If you had used a true "modal" (which is just an extension of the same page) instead of a new window many of the tricky aspects of what you are doing would be made much easier.

    What I mean is managing your postbacks and communicating between two windows using .opener and updating data on each page and opening closing the modal would all be handled on the same page would work out with much fewer complications.

    ...Just food for thought.

    Author Closing Comment

    ddayx10 - thanks for the feedback, it was very helpful.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
    OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now