Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3371
  • Last Modified:

Dropdownlist and modal popup extender

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:
.aspx
<script language="javascript" type="text/javascript">
 function StartProgressBar_globalddls() {
                 var myExtender = $find('mpe_globalddls');
                 myExtender.show();
                 return true;
             }
</script>

 <asp:ModalPopupExtender ID="mpe_globalddls" runat="server" BackgroundCssClass="modalBackground" behaviorID="mpe_globalddls"  TargetControlID="hiddenfield_globalddls" PopupControlID="Panel_globalddls" >
               <Animations>
                    <OnShown>
                        <Fadein />
                    </OnShown>
                    <OnHiding>
                        <Fadeout />
                    </OnHiding>
                </Animations>
           </asp:ModalPopupExtender>
           <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:Panel>
                 <asp:HiddenField ID="hiddenfield_globalddls" runat="server" />

Open in new window


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

Open in new window

0
toddpotter
Asked:
toddpotter
  • 4
2 Solutions
 
Jitendra PatilSr.Software EngineerCommented:
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.

OR

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--")
{
    myExtender.hide();
    return false;
}
else
{
 myExtender.show();
  return true;
}

hope this helps.
0
 
toddpotterAuthor Commented:
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")
                 {
                     myExtender.hide();
                     return false;
                 }
                 else
                 {
                    myExtender.show();
                    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?
0
 
Kyle AbrahamsSenior .Net DeveloperCommented:
You should be able to set a break point in Javascript:
http://weblogs.asp.net/scottgu/archive/2007/07/19/vs-2008-javascript-debugging.aspx


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?)
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
toddpotterAuthor Commented:
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.
0
 
toddpotterAuthor Commented:
Ok, so I found the problem.  AJAX sends a SetTimeout() to the onchange attribute...see below link.

http://bytes.com/topic/javascript/answers/740087-drop-down-list-client-side-onchange-stops-server-side-selectedindexchanged-event

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

and it now works!

Thanks for all of your help!
0
 
toddpotterAuthor Commented:
I am awarding points to both b/c both helped me get to the end result!
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

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