Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Dropdownlist and modal popup extender

Posted on 2014-02-13
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
LVL 13

Assisted Solution

by:Jitendra Patil
Jitendra Patil earned 800 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 41

Accepted Solution

Kyle Abrahams earned 1200 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?)
Industry Leaders: 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!


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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Suggested Courses

597 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