Modal Popup Extender disappearing during validation

[malav123]

Hi,
I am using ajax toolkit's modal popup extender which contains few text boxes and two buttons on it... i want to put validation on some of text boxes but my problem is after displaying message like "please enter name" when i cliks on ok button the modal popup dissapears... means my next line never executes that is the focus on that particular textbox... so what is the problem ??? i m waiting for response....


thanking u in advance....


-malav.

[hsriat]

Difficult to make a guess without having look at the code, at least for me.

You may provide some code which is creating problem.

[malav123]

Difficult to make a guess without having look at the code, at least for me.

You may provide some code which is creating problem.

Hi,
Which code you want to see...

[hsriat]

Hi,
Which code you want to see...

You have to figure that out with some debugger.
What does firebug tell about the problem, or some other debugger...?

[acoder]

malav123, you've posted a few questions here and there's always the same problem about which code to post. What the experts here want to see is client-side code (what you see in the browser), i.e. the generated JavaScript code and relevant HTML markup. If we need to see more code, we'll ask.

[malav123]

You have to figure that out with some debugger.
What does firebug tell about the problem, or some other debugger...?

Hi,
my problem is solved now in which i have asked help from u....
but there is still one problem that for date i have take calendar control... but whenever i clicks on the image i gets the calendar control on back side of modal popup... so what can i do ???
the html code of that table is given below,

<table border="0" cellpadding="1" cellspacing="3" class="formText" style="margin-left:15px">                           
                            <tr>
                                <td>
                                    <asp:Label ID="lblReqStartDt" runat="server" Text="*" CssClass="RequiredField" />
                                    <asp:Label ID="lblStart" runat="server" Text ="Start" />
                                </td>
                                <td>
                                    <asp:TextBox ID="txtStartDt" runat="server" />
                                    <img id="imgStart" onclick="showCalendarControl(ctl00$ctl1$txtStartDt)" alt="" src="../../images/calendar.gif" />
                                </td>   
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="lblReqEndDt" runat="server" Text="*" CssClass="RequiredField" />
                                    <asp:Label ID="lblEnd" runat="server" Text="End" />
                                </td>
                                <td>
                                    <asp:TextBox ID="txtEndDt" runat="server" />                                    
                                    <img id="imgEnd" onclick="showCalendarControl(ctl00$ctl1$txtEndDt)" alt="" src="../../images/calendar.gif"  />
                                </td>
                            </tr>                              
                            <tr>
                                <td colspan="2">
                                    <asp:Label id="lblnote" runat="server" Text="Note: An E-mail will also be send for notification" ForeColor="red" Font-Bold="true" />                                    
                                </td>
                            </tr> 
 
                        </table>
 

in above table i am using calendar control for two text boxes i.e. start date and for end date... so please give me solution....

[hsriat]

Hey malav123,
This is again an ASP code. As the moderator said, you need to show the client side HTML.

When your page opens in the browser, do right click and click on view source. That is the code which we need to see when there's a problem.

Server side script has nothing to do with this.
A good tip for you too, when you have to debug your JavaScript, don't search for the problem in the ASP code. Do view source of the code and see what's wrong with it.

As far as your problem is concerned, you need to give zIndex value to the calender larger then the popup's. Check the function which is called to show the calender onclick of that button.

[malav123]

Hey malav123,
This is again an ASP code. As the moderator said, you need to show the client side HTML.

When your page opens in the browser, do right click and click on view source. That is the code which we need to see when there's a problem.

Server side script has nothing to do with this.
A good tip for you too, when you have to debug your JavaScript, don't search for the problem in the ASP code. Do view source of the code and see what's wrong with it.

As far as your problem is concerned, you need to give zIndex value to the calender larger then the popup's. Check the function which is called to show the calender onclick of that button.

ok thanks here is that html code,

<table border="0" cellpadding="1" cellspacing="3" class="formText" style="margin-left:15px">                           
                            <tr>
                                <td>
                                    <span id="ctl00_ctl1_lblReqStartDt" class="RequiredField">*</span>
                                    <span id="ctl00_ctl1_lblStart">Start</span>
                                </td>
                                <td>
                                    <input name="ctl00$ctl1$txtStartDt" type="text" id="ctl00_ctl1_txtStartDt" />
                                    <img id="imgStart" onclick="showCalendarControl(ctl00$ctl1$txtStartDt)" alt="" src="../../images/calendar.gif" />
                                </td>   
                            </tr>
                            <tr>
                                <td>
                                    <span id="ctl00_ctl1_lblReqEndDt" class="RequiredField">*</span>
                                    <span id="ctl00_ctl1_lblEnd">End</span>
                                </td>
                                <td>
                                    <input name="ctl00$ctl1$txtEndDt" type="text" id="ctl00_ctl1_txtEndDt" />                                    
                                    <img id="imgEnd" onclick="showCalendarControl(ctl00$ctl1$txtEndDt)" alt="" src="../../images/calendar.gif"  />
                                </td>
                            </tr>                              
                            <tr>
                                <td colspan="2">
                                    <span id="ctl00_ctl1_lblnote" style="color:Red;font-weight:bold;">Note: An E-mail will also be send for notification</span>                                    
                                </td>
                            </tr> 
 
                        </table>
 

[acoder]

my problem is solved now in which i have asked help from u....

What was the solution for the first problem? If you post it, it may help someone with a similar problem.

but there is still one problem that for date i have take calendar control... but whenever i clicks on the image i gets the calendar control on back side of modal popup... so what can i do ?

Have you tried setting the z-index as suggested by hsriat? If that doesn't work, post the client-side (not .NET) code for the modal popup and the calendar. You don't need to post all of it (it might be a lot of code) - just the relevant parts.

[malav123]

What was the solution for the first problem? If you post it, it may help someone with a similar problem.
Have you tried setting the z-index as suggested by hsriat? If that doesn't work, post the client-side (not .NET) code for the modal popup and the calendar. You don't need to post all of it (it might be a lot of code) - just the relevant parts.

Hi,
The solution of my previous problem is that now i have take one more button as a common button, before i was having two buttons as a "Okcontrolid" and "Cancelcontrolid", and modal popup was dissappears when i was click on "Okcontrolid" button so i made that button hide and put common button at that place as visible, so when modal popup 's validation gets ok at that time i makes "Okcontrolid" Button as visible so task is over... validations are working now, textboxes gets focus now, data of event also stores now in database..... And sorry that i always gets confused about which code you are asking... but i will not make such mistake in future....

[acoder]

No problem, thanks for posting. Did you manage to solve the second problem?

[malav123]

No problem, thanks for posting. Did you manage to solve the second problem?

No i still not got solution of my second problem... what shoud i do with the zindex ??? means i have to give zindex size more then modal popup or what ???

[acoder]

Yes, give it a higher value in the CSS or using JavaScript with the style.zIndex property.

[hsriat]

No i still not got solution of my second problem... what shoud i do with the zindex ??? means i have to give zindex size more then modal popup or what ???

If there are two or more elements overlapping each other, then the element with higher zIndex is shown above the one having lower zIndex.

What you need to do is:
Find out which function is called to create the calender. The function might be creating the calendar stuff by DOM methods. So just in the end of that function, set the style.zIndex property of the div containing the calender as something say 200. Try that, and see if it works.
If there's some separate CSS for that particular div which contains the calender, then add z-index:200 to that.

Change the value from 200 to higher if it still won't work.

[malav123]

If there are two or more elements overlapping each other, then the element with higher zIndex is shown above the one having lower zIndex.

What you need to do is:
Find out which function is called to create the calender. The function might be creating the calendar stuff by DOM methods. So just in the end of that function, set the style.zIndex property of the div containing the calender as something say 200. Try that, and see if it works.
If there's some separate CSS for that particular div which contains the calender, then add z-index:200 to that.

Change the value from 200 to higher if it still won't work.

Hi,

thanks for the reply, i have tried what you have suggested me but still i am not getting css as working on my calendar controll.... i have tried z-index in css... so what is the problem now ?

[hsriat]

Hi,

thanks for the reply, i have tried what you have suggested me but still i am not getting css as working on my calendar controll.... i have tried z-index in css... so what is the problem now ?

Show the calender part of the JS and CSS.

[malav123]

Show the calender part of the JS and CSS.

Hi,
I am sending you CSS file that i am using for the Calender controll, js file is very long so if you will need it then i will send u that code also..

#CalendarControlIFrame {
  display: none;
  left: 0px;
  position: absolute;
  top: 0px;
  height: 250px;
  width: 250px;
  z-index: 5000;
}
 
#CalendarControl {
  position:absolute;
  background-color:#CED5F2;
  margin:0;
  padding:0;
  display:none;
  z-index: 5000;
}
 
#CalendarControl table {
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 8pt;
  border-left: 1px solid #336;
  border-right: 1px solid #336;
}
 
#CalendarControl th {
  font-weight: normal;
}
 
#CalendarControl th a {
  font-weight: normal;
  text-decoration: none;
  color: #FFF;
  padding: 1px;
}
 
#CalendarControl td {
  text-align: center;
}
 
#CalendarControl .header {
  background-color: #5E636F;
}
 
#CalendarControl .weekday {
  background-color: #FCEDDC;
  color: #000;
}
 
#CalendarControl .weekend {
  background-color: #FFC;
  color: #000;
}
 
#CalendarControl .current {
  border: 1px solid #339;
  background-color: #336;
  color: #FFF;
}
 
#CalendarControl .weekday,
#CalendarControl .weekend,
#CalendarControl .current {
  display: block;
  text-decoration: none;
  border: 1px solid #FFF;
  padding: 1px;
  width: 2em;
}
 
#CalendarControl .weekday:hover,
#CalendarControl .weekend:hover,
#CalendarControl .current:hover {
  color: #FFF;
  background-color: #336;
  border: 1px solid #999;
}
 
#CalendarControl .previous {
  text-align: left;
}
 
#CalendarControl .next {
  text-align: right;
}
 
#CalendarControl .previous,
#CalendarControl .next {
  padding: 1px 3px 1px 3px;
  font-size: 1.4em;
}
 
#CalendarControl .previous a,
#CalendarControl .next a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
}
 
#CalendarControl .title {
  text-align: center;
  font-weight: bold;
  color: #FFF;
}
 
#CalendarControl .empty {
  background-color: #CCC;
  border: 1px solid #FFF;
}
 
 

[hsriat]

Hi,
I am sending you CSS file that i am using for the Calender controll, js file is very long so if you will need it then i will send u that code also..

I couldn't find any error in the CSS part.
Just don't keep same z-index for 2 elements.

Tell me where did you get the calendar code from, I'll see it there.

[malav123]

I couldn't find any error in the CSS part.
Just don't keep same z-index for 2 elements.

Tell me where did you get the calendar code from, I'll see it there.

Hi,
i am not getting what are you saying... and sorry for late reply because we have offday in work on saturday and sunday...

[acoder]

Are you using .NET controls or a third-party JavaScript calendar script?

I see in your CSS that you have an iframe. Does the modal popup also use an iframe? If you can, post the client-side HTML code and relevant JavaScript here. If not, try to create a small test case which demonstrates the problem and post the code or a link here. Also test in more than one browser to see if the problem is restricted to one browser or not.

[malav123]

Are you using .NET controls or a third-party JavaScript calendar script?

I see in your CSS that you have an iframe. Does the modal popup also use an iframe? If you can, post the client-side HTML code and relevant JavaScript here. If not, try to create a small test case which demonstrates the problem and post the code or a link here. Also test in more than one browser to see if the problem is restricted to one browser or not.

Yes i am using third party calendar controll and it is working fine in all of my pages, i have used it at many places but it only creates problem with modal popup extender only...

[acoder]

Cut your code down to the bare minimum with only the calendar and modal popup. If you still have the problem, post the client-side code here.

[hsriat]

or just give a link where you find that third party calender.

[sadegboyega]

or just give a link where you find that third party calender.

Hi, I am new to this forum. I had similar problem.

Just to confirm that hsrisat was right. I located the div element that displays the calendar from my style sheet, then i include z-index to it with a value of 10000. Initial the calendar still appeared behinde the modal popup. So i ncreased the z-index to 500000. immediately, the calendar appeared at the top of the modal popup. That solved my problem.

This is my style sheet amendment

div.calendar { position: relative; z-index:500000;}

Thanks

[acoder]

Welcome to Bytes and thanks for sharing. It does seem too much of a fix to have such a high number for a z-index. Perhaps you should check the z-index of the modal popup too.