Dropdownlist and modal popup extender

Posted on 2014-02-13
Last Modified: 2014-02-14
Experts -

I need help implementing a modal popup extender with a dropdownlist.  Currently, I have it working, but I have one problem...If a user selects the dropdownlist and DOES NOT click a value, but clicks another area on the webpage instead -  the modal popup displays and never goes away!  How can I prevent this?  If a user selects a value then everything works as desired.  I am using the 'onclick' attribute of the dropdownlist which is causing the modal to show.

Here is the code that pertains to the modal:
<script language="javascript" type="text/javascript">
 function StartProgressBar_globalddls() {
                 var myExtender = $find('mpe_globalddls');
                 return true;

 <asp:ModalPopupExtender ID="mpe_globalddls" runat="server" BackgroundCssClass="modalBackground" behaviorID="mpe_globalddls"  TargetControlID="hiddenfield_globalddls" PopupControlID="Panel_globalddls" >
                        <Fadein />
                        <Fadeout />
           <asp:Panel ID="Panel_globalddls" runat="server" CssClass="updateProgress">
               <img src="Images/ajax-loader_thumb.gif" alt="" style="vertical-align:middle" /> Updating...Please Wait! &nbsp 
                 <asp:HiddenField ID="hiddenfield_globalddls" runat="server" />

Open in new window

Page Load event -
ddlGlobalDealType.Attributes.Add("onclick", "return StartProgressBar_globalddls();");

Open in new window

Question by:toddpotter
  • 4
LVL 12

Assisted Solution

by:Jitendra Patil
Jitendra Patil earned 200 total points
ID: 39858436
try the below hack.

keep a cancel button in your popup  and close the popup, the problem here in your above code is the modal pop extender comes to know when to show BUT it does not know when to hide i.e. on which event.

so you have to specify the hiding event through a cancel button in the modal pop up.


keep a check in your javascript code for the selected value of dropdownlist value like just assume it like this
 var myddl = $find('ddlGlobalDealType');
if(myddl.value ==" " OR myddl.value =="--Select--")
    return false;
  return true;

hope this helps.

Author Comment

ID: 39858926
I like the check in the JavaScript suggestion better b/c it does not require any user intervention.  I don't want the user to have to click cancel.  So, exploring the javascript, I changed it to:

function StartProgressBar_globalddls() {
                 var myExtender = $find('mpe_globalddls');
                 var myDDL = $find('ddlGlobalDealType');
                 if (myDDL.Value == "Not Assigned")
                     return false;
                    return true;

However, the modal popup does not work at all now.  Can you guide me in getting this to work?  I don't have much experience on the javascript side so I don't know exactly how to troubleshoot.  From what I gather this is what is happening:

1. In my page load event I add the "onclick" attribute to my ddl with a js call to the StartProgressBar_globalddls() function.
2. When a user clicks on the ddl the js function is called (not sure whether it is called before or after the other ddl events - such as selectedindexchanged event).
3. After there I'm lost...My default value is "Not Assigned" so if a user clicks on it when it says "Not Assigned" then the modal will be hidden but I don't necessarily want it to be hidden if they change the value to something else.

Instead, is it possible to call one javascript function at the beginning of the selected index changed event to show the extender and one at the end of the selected index changed event to hide the extender?  May work?
LVL 40

Accepted Solution

Kyle Abrahams earned 300 total points
ID: 39859105
You should be able to set a break point in Javascript:

What about using the onchange event . . . this way if they click on the drop down and then leave it won't fire at all?  (or do you need it to fire if they click on it and don't change the value?)
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).


Author Comment

ID: 39859248
I was trying the onchange event but I am getting some weird issues (I'm using VS2013).  

I added this to my page load event:
ddlGlobalDealType.Attributes.Add("onchange", "return StartProgressBar_globalddls();");

However, when I debug and change the ddlGlobalDealType the selected index does not change.  But, when I click on the next dropdown and change it then the selected index of the ddlGlobalDealType changes and so does the other dropdown list.  This did not happen when I was using the onclick event.

Author Comment

ID: 39859356
Ok, so I found the problem.  AJAX sends a SetTimeout() to the onchange attribute...see below link.

So I changed my call
ddlGlobalDealType.Attributes.Add("onchange", "return StartProgressBar_globalddls();");  
ddlGlobalDealType.Attributes.Add("onchange", "javascript:StartProgressBar_globalddls();");

and it now works!

Thanks for all of your help!

Author Closing Comment

ID: 39859361
I am awarding points to both b/c both helped me get to the end result!

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
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…

747 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

13 Experts available now in Live!

Get 1:1 Help Now