Hi Again;
I used AJAX Control Toolkit v15.1 ModalPopupExtender control.
It look good for a particular point in time. but when I begun to
take the next step I got the error;
Here the STEP to display the bug
1.) Click "Show Checklistbox" button
(at this time, the CheckBoxList show dynamically)
2.) Click the items in the CheckListBox ascendingly (1, 2, 3, 4, 5),
then descendingly, (5,4,3,2,1).
(at this time, the image display)
3.) Click "Show ModalPopupExtender" button
Output:
http://s30.postimg.org/5nsp242fl/tmp_25229_error_1819321094.png
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type ="text/javascript" >
function CLBOneOnlyselection(chkclb) {
var objchkList = chkclb.parentNode.parentNode.parentNode;
var chkboxControls = objchkList.getElementsByTagName("input");
for (var i = 0; i < chkboxControls.length; i++) {
if (chkboxControls[i] != chkclb && chkclb.checked) {
chkboxControls[i].checked = false;
}
}
}
</script>
<script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
<style type ="text/css" >
.modalBackground {
background-color: gray;
filter: alpha(opacity =70);
opacity: 0.7;
position :relative;
z-index: 99; /*always on top*/
}
.modalPopup {
background-color: #FFFFFF;
border: 3px solid #0DA9D0;
border-radius: 12px;
padding: 0;
width: 300px;
}
.modalPopup .header {
background-color: #2FBDF1;
height: 30px;
color: white;
line-height: 30px;
text-align: center;
font-weight: bold;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.modalPopup .body {
min-height: 50px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .footer {
padding: 6px;
}
.modalPopup .yes, .modalPopup .no {
height:23px;
color :white ;
/*line-height:10;*/
text-align:center;
font-weight:bold;
cursor:pointer;
border-radius:4px;
}
.modalPopup .yes {
background-color:#2FBDF1;
border:1px solid #0DA9D0;
}
.modalPopup .no {
background-color:#9F9F9F;
border:1px solid #5C5C5C;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat ="server" ></asp:ScriptManager>
<asp:UpdatePanel runat ="server" >
<ContentTemplate >
<!-- popup modal -->
<asp:Panel ID="pnlModalPanel" runat="server" Style="display: none" CssClass="modalPopup" align="center">
<div class="header">Sample</div>
<br></br>
<div class="body">
<asp:Label ID="Label1" runat ="server" Text ="Sample" Font-Underline ="true" Font-Size ="10px" ForeColor ="Blue" ></asp:Label> <br />
<asp:TextBox ID="Txtsample" runat="server" ToolTip ="Type your folder name"> </asp:TextBox>
<!-- <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate ="Txtsample"
Display ="Static" ForeColor ="Red" ErrorMessage="*" SetFocusOnError ="true" ></asp:RequiredFieldValidator> -->
</div><br/>
<div class="footer " style="text-align: right">
<asp:Button ID="btnok" runat="server" CssClass="yes" CausesValidation ="false" Text="OK" OnClick ="btnok_Click" />
<asp:Button ID="btnClose" runat="server" CssClass="no " Text="Cancel" />
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnClose" TargetControlID="btnokdummy" PopupControlID="pnlModalPanel" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>
<!--End of Popup modal -->
<asp:Button ID ="BtnShowList" runat ="server" Text ="Show Checklistbox" OnClick ="BtnShowList_Click" />
<asp:Button ID="BtnShowall" runat="server" Text ="Show ModalPopupExtender" OnClick ="BtnShowall_Click" />
<asp:Button ID="btnokdummy" runat ="server" style="display :none " />
<asp:Image ID="imgPreview" runat ="server" Height ="500px" Width ="500px"/>
<asp:Label ID ="lbl1" runat ="server" ></asp:Label>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack ="true" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
</asp:CheckBoxList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
CodeBehind:
protected void Page_Load(object sender, EventArgs e)
{
//Checklistbox one selection only
for (int i = 0; i < CheckBoxList1.Items.Count; i++)
{
CheckBoxList1.Items[i].Attributes.Add("onclick", "CLBOneOnlyselection(this)");
}
}
protected void BtnShowall_Click(object sender, EventArgs e)
{
imgPreview.ImageUrl = this.ResolveClientUrl("~/sample.gif");
lbl1.Text = "Hello";
ModalPopupExtender1.Show();
}
protected void btnok_Click(object sender, EventArgs e)
{
imgPreview.ImageUrl = "";
lbl1.Text = "";
}
protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
{
imgPreview.ImageUrl = this.ResolveClientUrl("~/Images/" + CheckBoxList1.SelectedValue + ".gif");
}
protected void BtnShowList_Click(object sender, EventArgs e)
{
List<string> ilist = new List<string>();
ilist.Add("1");
ilist.Add("2");
ilist.Add("3");
ilist.Add("4");
ilist.Add("5");
CheckBoxList1.DataSource =ilist;
CheckBoxList1.DataBind();
}
Thanks..
I used AJAX Control Toolkit v15.1 ModalPopupExtender control.
It look good for a particular point in time. but when I begun to
take the next step I got the error;
Here the STEP to display the bug
1.) Click "Show Checklistbox" button
(at this time, the CheckBoxList show dynamically)
2.) Click the items in the CheckListBox ascendingly (1, 2, 3, 4, 5),
then descendingly, (5,4,3,2,1).
(at this time, the image display)
3.) Click "Show ModalPopupExtender" button
Output:
http://s30.postimg.org/5nsp242fl/tmp_25229_error_1819321094.png
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type ="text/javascript" >
function CLBOneOnlyselection(chkclb) {
var objchkList = chkclb.parentNode.parentNode.parentNode;
var chkboxControls = objchkList.getElementsByTagName("input");
for (var i = 0; i < chkboxControls.length; i++) {
if (chkboxControls[i] != chkclb && chkclb.checked) {
chkboxControls[i].checked = false;
}
}
}
</script>
<script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
<style type ="text/css" >
.modalBackground {
background-color: gray;
filter: alpha(opacity =70);
opacity: 0.7;
position :relative;
z-index: 99; /*always on top*/
}
.modalPopup {
background-color: #FFFFFF;
border: 3px solid #0DA9D0;
border-radius: 12px;
padding: 0;
width: 300px;
}
.modalPopup .header {
background-color: #2FBDF1;
height: 30px;
color: white;
line-height: 30px;
text-align: center;
font-weight: bold;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.modalPopup .body {
min-height: 50px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .footer {
padding: 6px;
}
.modalPopup .yes, .modalPopup .no {
height:23px;
color :white ;
/*line-height:10;*/
text-align:center;
font-weight:bold;
cursor:pointer;
border-radius:4px;
}
.modalPopup .yes {
background-color:#2FBDF1;
border:1px solid #0DA9D0;
}
.modalPopup .no {
background-color:#9F9F9F;
border:1px solid #5C5C5C;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat ="server" ></asp:ScriptManager>
<asp:UpdatePanel runat ="server" >
<ContentTemplate >
<!-- popup modal -->
<asp:Panel ID="pnlModalPanel" runat="server" Style="display: none" CssClass="modalPopup" align="center">
<div class="header">Sample</div>
<br></br>
<div class="body">
<asp:Label ID="Label1" runat ="server" Text ="Sample" Font-Underline ="true" Font-Size ="10px" ForeColor ="Blue" ></asp:Label> <br />
<asp:TextBox ID="Txtsample" runat="server" ToolTip ="Type your folder name"> </asp:TextBox>
<!-- <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate ="Txtsample"
Display ="Static" ForeColor ="Red" ErrorMessage="*" SetFocusOnError ="true" ></asp:RequiredFieldValidator> -->
</div><br/>
<div class="footer " style="text-align: right">
<asp:Button ID="btnok" runat="server" CssClass="yes" CausesValidation ="false" Text="OK" OnClick ="btnok_Click" />
<asp:Button ID="btnClose" runat="server" CssClass="no " Text="Cancel" />
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnClose" TargetControlID="btnokdummy" PopupControlID="pnlModalPanel" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>
<!--End of Popup modal -->
<asp:Button ID ="BtnShowList" runat ="server" Text ="Show Checklistbox" OnClick ="BtnShowList_Click" />
<asp:Button ID="BtnShowall" runat="server" Text ="Show ModalPopupExtender" OnClick ="BtnShowall_Click" />
<asp:Button ID="btnokdummy" runat ="server" style="display :none " />
<asp:Image ID="imgPreview" runat ="server" Height ="500px" Width ="500px"/>
<asp:Label ID ="lbl1" runat ="server" ></asp:Label>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack ="true" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
</asp:CheckBoxList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
CodeBehind:
protected void Page_Load(object sender, EventArgs e)
{
//Checklistbox one selection only
for (int i = 0; i < CheckBoxList1.Items.Count; i++)
{
CheckBoxList1.Items[i].Attributes.Add("onclick", "CLBOneOnlyselection(this)");
}
}
protected void BtnShowall_Click(object sender, EventArgs e)
{
imgPreview.ImageUrl = this.ResolveClientUrl("~/sample.gif");
lbl1.Text = "Hello";
ModalPopupExtender1.Show();
}
protected void btnok_Click(object sender, EventArgs e)
{
imgPreview.ImageUrl = "";
lbl1.Text = "";
}
protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
{
imgPreview.ImageUrl = this.ResolveClientUrl("~/Images/" + CheckBoxList1.SelectedValue + ".gif");
}
protected void BtnShowList_Click(object sender, EventArgs e)
{
List<string> ilist = new List<string>();
ilist.Add("1");
ilist.Add("2");
ilist.Add("3");
ilist.Add("4");
ilist.Add("5");
CheckBoxList1.DataSource =ilist;
CheckBoxList1.DataBind();
}
Thanks..