• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 524
  • Last Modified:

Use JavaScript to close modal window upon button click event

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?
0
christopher_perry
Asked:
christopher_perry
  • 3
  • 2
2 Solutions
 
christopher_perryAuthor Commented:
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?
0
 
christopher_perryAuthor Commented:
Here's another thing, if it helps:

The data is inserted using a WCF service.
0
 
ddayx10Commented:
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.
0
 
ddayx10Commented:
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.
0
 
christopher_perryAuthor Commented:
ddayx10 - thanks for the feedback, it was very helpful.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now