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 40

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?)
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI


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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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

752 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