A complete button is there . I have some Toggle buttons that are placed in a table . This toggle button can have no value, Yes / No or NA values. When the complete button is clicked, i like to change the colour of toggle button or atleast the div. I have following code . When i check in the Developer console and run the commands, it is changing the div colour, but not when running it(not updating from console) .
$(document).ready(function() {
$(document).on('click', '#btnComplete', function() {
if ($('#btnToggleIntro1').val().trim().length < 1) {
$('#divIntro').attr('style', 'background-color: blue');
//css('background-color', 'blue');
// $('#btnToggleIntro1').css('background-color', '#A497E5');
} else {
$('#btnToggleIntro1').css('background-color', '#ffffff');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divIntro">
<telerik:RadToggleButton ID="btnToggleIntro1" runat="server" AutoPostBack="False" Font-Size="14px" meta:resourcekey="btnToggle11Resource1" class="RecomenderButton" ClientIDMode="Static">
<ToggleStates>
<telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource1" />
<telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource2" />
<telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource3" />
<telerik:ButtonToggleState Text="N/A" />
</ToggleStates>
</telerik:RadToggleButton>
</div>
Following is the rendered sample fo the table where i want the colour to be changed
<div id="divIntroduction">
<table class="table table-bordered table-hover table-striped" id="tbIntroduction">
<tr>
<td class="light-blue-background text-center" colspan="4">INTRODUCTION </td>
</tr>
<tr class="text-left">
<td class="text-center col-xs-1"></td>
<td class="col-xs-5 ">Is this a Staff or instruction.
</td>
<td class="text-center col-xs-2" style="vertical-align: middle">
<div id="divIntro">
<button type="submit" name="btnToggleIntro1" value="Yes" id="btnToggleIntro1" class="RadToggleButton RadButton RadButton_Bootstrap rbButton rbRounded rbIconButton" class="RecomenderButton" style="font-size:14px;"><span class="rbText">Yes</span><input id="btnToggleIntro1_ClientState" name="btnToggleIntro1_ClientState" type="hidden" /></button>
</div>
</td>
<td class="text-center col-xs-2" style="vertical-align: middle">
<button type="submit" name="btnToggleIntroAprv" value=" " id="btnToggleIntroAprv" class="RadToggleButton RadButton RadButton_Bootstrap rbButton rbRounded rbIconButton" style="font-size:14px;"><span class="rbText"> </span><input id="btnToggleIntroAprv_ClientState" name="btnToggleIntroAprv_ClientState" type="hidden" /></button>
</td>
</tr>
</table>
</div>
One of the easiest solution is to use css and on button click for toggle button, change the colour
<style type="text/css">.Checked {
background-color: white !important;
}
.notChecked {
background-color: indianred !important;
}
</style>
<div id="divIntro">
<telerik:RadToggleButton ID="btnToggleIntro1" runat="server" AutoPostBack="False" Font-Size="14px">
<ToggleStates>
<telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource1" CssClass="notChecked" />
<telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource2" CssClass="Checked" />
<telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource3" CssClass="Checked" />
<telerik:ButtonToggleState Text="N/A" CssClass="Checked" />
</ToggleStates>
</telerik:RadToggleButton>
</div>
Related
<form id="form1" runat="server">
<div id="header" runat="server" class="clsHeaderContent">
<div class="clsDivBody">
<table cellpadding="0" border="0" cellspacing="0" style="width: 1024px;">
<tr>
<td>
<a href="<%=Page.ResolveUrl("~/Main/Home.aspx")%>">
<asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/Logo.png" Style="border: 0" />
</a>
</td>
</tr>
<%
If Not Session("Member_Login_Profile") Is Nothing Then
%>
<tr style="height:30px;">
<td align="right" valign="top">
<asp:Button ID="cmdHome" runat="server" Text="Home" />
<asp:Button ID="cmdMyProfile" runat="server" Text="My Profile" />
<asp:Button ID="cmdLogout" runat="server" Text="Logout" />
</td>
</tr>
<tr style="height: 5px;">
<td/>
</tr>
<%
End If
%>
</table>
</div>
</div>
<div class="clsDivBody bg" style="padding: 15px 0;min-height:730px;">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div id="backtotop" style="display: block;">^ Back to Top</div>
<div id="push"></div>
<input type="hidden" id="_ispostback" value="<%=Page.IsPostBack.ToString()%>" />
</form>
<form >
<asp:TextBox ID="txtCardNo" runat="server" MaxLength="20" value="Card No." Text="824488" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Card No.':this.value;" />
<asp:RequiredFieldValidator ID="reqCardNo" runat="server" ControlToValidate="txtCardNo" CssClass="clsValidationErrMsg" Display="dynamic" ValidationGroup="Login" />
<asp:RegularExpressionValidator ID="regExCardNo" runat="server" ControlToValidate="txtCardNo" CssClass="clsValidationErrMsg" Display="dynamic" ValidationGroup="Login" />
<asp:TextBox ID="txtPassword" runat="server" MaxLength="16" value="thegardensclub123" TextMode="Password" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Password':this.value;" />
<asp:RequiredFieldValidator ID="reqPassword" runat="server" ControlToValidate="txtPassword" CssClass="clsValidationErrMsg" Display="dynamic" ValidationGroup="Login" />
<asp:RegularExpressionValidator ID="regExPassword" runat="server" ControlToValidate="txtPassword" CssClass="clsValidationErrMsg" Display="dynamic" ValidationGroup="Login" /><br/>
<%-- <u><asp:LinkButton ID="lnkForgotPwd" runat="server" CausesValidation="False" Text="Forgot your password?" /></u>
--%> <asp:Button runat="server" ID="btnLogin" Text="Log In"/>
</form>
The first snippet is my master page, and the second is my login page.
The problem is, if i dont remove the in master page my textbox in login page, the textbox can not be placed in the panel.
If i remove the in master page, its shows me this error "Control 'ctl00_MainContent_oSM' of type 'ScriptManager' must be placed inside a form tag with runat=server."
If i remove the in login, also the textbox can not be placed in the panel. So what should i do?
I have a button created inside a cell in my aspx.cs file like so:
tcedit.Text = "<button id='btnClr' onclick="func1(document.getElementById('sysconfig" + count + "'));return false;" class='ButtonNoWidth' style='height:19px;'>edit</button>";
Here's the corresponding function in .aspx
function func1(row, ignoreList) {
//code
func2(row.getAttribute("key"), row.getAttribute("val"), row.getAttribute("dispval") == "true", row.getAttribute("dontencrypt") == "true");
}
function func2(key, val, display, dontencrypt) {
document.getElementById("txtKey").value = key;
document.getElementById("txtValue").value = val;
document.getElementById("chkDisplayValue").checked = display;
document.getElementById("chkDontEncryptValue").checked = dontencrypt;
//code
}
In the .asp file, I have a standard form dataTable that is static on the page and whenever a button is clicked from a list of elements, it updates the form with the data from that element, allowing the editing and saving of any changes to the data.
<form id="Form1" method="post" runat="server">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr id="dataTable" runat="server" visible="true">
<td>
<table border="0" cellpadding="0" cellspacing="10">
<tr>
<td class="FieldPromptText">
Key:
</td>
<td>
<asp:DropDownList ID="ddKey" runat="server" CssClass="Field" Width="450" onchange="LoadKeyValueFromList(this)"></asp:DropDownList>
<br />
<asp:TextBox ID="txtKey" runat="server" CssClass="Field" Text="" Width="450" onkeyup="SetKeyList(this.value);"></asp:TextBox>
</td>
</tr>
<tr>
<td class="FieldPromptText">
Value:
</td>
<td>
<asp:TextBox ID="txtValue" runat="server" CssClass="Field" Text="" Width="450" TextMode="MultiLine" Height="60"></asp:TextBox>
</td>
</tr>
<tr>
<td class="FieldPromptText" style="white-space: nowrap;">
Display Value:
</td>
<td style="white-space:nowrap;" class="FieldPromptText">
<asp:checkbox id="chkDisplayValue" runat="server" CssClass="Field" checked="false"></asp:checkbox>
Don't Encrypt:
<asp:checkbox id="chkDontEncryptValue" runat="server" CssClass="Field" checked="false"></asp:checkbox>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" id="btnAddKeyValue" runat="server" onclick="AddKeyValue();" class="ButtonNoWidth" value="Submit" />
<button id="btnClr" onclick="ClearKeyVal();" class="ButtonNoWidth">Clear</button>
</td>
</tr>
<tr>
<td id="tdConfirmation" runat="server" colspan="2" class="FieldPromptText" style="color: #0026ff"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
What I'm trying to do is move that form that is currently static on the page, to a modal popup of the same form. A huge majority of the examples I've seen online all use the ajaxcontroltoolkit, I would like to avoid any additional packages and do this with only javascript/jquery. I tried using bootstrap, but the css messed with mine
You can use Twitter Bootstrap and to make sure that the bootstrap CSS doesn't mess with the other elements on your page you can try the following work around:
Create a new empty style sheet e.g.modal.css.
Move all.modal style rules from bootstrap.css to modal.css.
Move all.fade style rules from bootstrap.css to modal.css.
Move all.close style rules from bootstrap.css to modal.css.
Add a reference to modal.css on your web page.
Complete example:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="Content/modal.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Header</h4>
</div>
<div class="modal-body">
<h1>Modal Body</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</body>
<link rel="Stylesheet" type="text/css" href="Styles/EIStyling.css" />
</head>
<body>
<form id="BookOperator" runat="server" visible="True">
<asp:HiddenField ID="hfGlobal_UserSelectedStartBookingTime" runat="server" ></asp:HiddenField>
<asp:HiddenField ID="hfGlobal_UserSelectedEndBookingTime" runat="server" ></asp:HiddenField>
<asp:HiddenField ID="hfGlobal_SelectedUserID" runat="server" ></asp:HiddenField>
<asp:HiddenField ID="hfSelectedBookingCancelID" Value="0" runat="server" ></asp:HiddenField>
<ul>
<li class="ul" ><a href="Home.aspx" class="Mnu" >Home</a></li>
<li class="ul" ><a class="Mnu" style="cursor:pointer" >Bookings</a>
<ul class="dropdown">
<li class="li" ><a href="BookVehicle.aspx" class="MnuItem" >Book Vehicle</a></li>
</ul>
</li>
<li class="ul" ><a class="Mnu" style="cursor:pointer" >Account </a>
<ul class="dropdown">
<li class="li" ><a href="Change_Password.aspx" class="MnuItem" >Change Password</a></li>
<li class="li" ><a id="LogOut" runat="server" href="LogIn.aspx" onclick="fncLogout()" class="MnuItem" >Log Out</a></li>
</ul>
</li>
</ul>
<div class="divCalPosition">
<asp:Calendar ID="clndrBookings" runat="server"
BackColor="White" BorderColor="Black" Font-Names="Verdana"
Font-Size="8pt" ForeColor="Black" Height="180px"
onselectionchanged="Calendar1_SelectionChanged" Width="230px"
FirstDayOfWeek="Monday" BorderStyle="Solid" CellSpacing="1"
NextPrevFormat="ShortMonth">
<DayHeaderStyle Font-Bold="True" Height="8pt" Font-Size="8pt"
ForeColor="#333333" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Size="9pt" ForeColor="White" Font-Bold="True" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TitleStyle BackColor="#333399"
Font-Bold="True" Font-Size="11pt" ForeColor="White" BorderStyle="Solid"
Height="12pt" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
</asp:Calendar>
</div>
<div id="confirmBooking" runat="server" style="display: none" align="center">
<p class="p" >Please enter a Destination and Project Code, and
<br /> click "Accept" to complete booking, or press "Cancel" to return to previous screen.</p>
<table>
<tr>
<td><asp:Label ID="lblDestination" runat="server" CssClass="lblBook" >Destination:</asp:Label></td>
<td><asp:TextBox ID="txtDestination" runat="server" align="center" Width="230px" ></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblProjCode" runat="server" CssClass="lblBook" >Project Code:</asp:Label></td>
<td><asp:TextBox ID="txtProjCode" runat="server" align="center" Width="230px" ></asp:TextBox></td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnCstm" runat="server" align="center" onclick="btnCstm_Click"
Text="Custom Booking" Width="110px" />  
<asp:Button ID="btnMkeBook" runat="server" align="center" OnClientClick="return invalidInfo(this)" onclick="btnMkeBook_Click"
Text="Accept" Width="80px" />  
<asp:Button ID="btnCancel" runat="server" align="center" onclick="btnCancel_Click"
Text="Cancel" Width="80px" />
</td>
</tr>
</table>
</div>
<!--Invalid Date Modal -->
<div class="modal fade" id="InvalidDateModal" role="dialog" style="display:none;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<%--<button type="button" class="close" data-dismiss="modal">×</button>--%>
<h4 class="modal-title">Warning!</h4>
</div>
<div class="modal-body">
<p> End date cannot be less than Start date.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Invalid Custom Info Modal -->
<div class="modal fade" id="InvalidCusInfoModal" role="dialog" style="display:none;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-header">
<h4 class="modal-title">Warning!</h4>
</div>
<div class="modal-body">
<p> Destination and Project Code fields cannot be left empty! Make sure all information is filled out properly. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!--Invalid Info Modal -->
<div class="modal fade" id="InvalidInfoModal" role="dialog" style="display:none;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-header">
<h4 class="modal-title">Warning!</h4>
</div>
<div class="modal-body">
<p> Destination and Project Code fields cannot be left empty! Make sure all information is filled out properly. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!--Invalid Missing Date Modal -->
<div class="modal fade" id="MissingDateModal" role="dialog" style="display:none;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<%--<button type="button" class="close" data-dismiss="modal">×</button>--%>
<h4 class="modal-title">Warning!</h4>
</div>
<div class="modal-body">
<p> End date cannot be left empty! Make sure all information is filled out properly.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="cnclOrEditBooking" runat="server" style="display:none;" align="center" onclick="lblOnClickEvent_Click">
<p class="p" align="center" >Would you like to Delete or Edit your booking?</p>
<asp:Button id="btnUpdateBooking" align="center" runat="server" Text="Edit Booking" OnClick="btnUpdateBooking_Click" Width="100px" />  
<asp:Button id="btnDelBooking" align="center" runat="server" Text="Delete Booking" Width="102px" OnClick="btnDelBooking_Click" />  
<asp:Button id="btnEditBack" align="center" runat="server" Text="Back" OnClick="btnCancel_Click" Width="100px" />
</div>
<div id="divBookingCnclCnfrm" runat="server" style="display:none;" align="center" >
<p class="p" align="center" > Are you sure you want to delete your booking?</p>
<asp:Button id="btnYes" align="center" runat="server" Text="Yes" OnClick="btnYes_Click" Width="50px" />  
<asp:Button ID="btnNo" align="center" runat="server" Text="No" OnClick="btnNo_Click" Width="50px" />
</div>
<div id="CustomBooking" runat="server" style="display:block;" align="center" >
<p class="p" >PLEASE NOTE THAT CUSTOM BOOKING ONLY APPLIES FOR FULL DAY (08:00 - 17:00) BOOKINGS! <br />
<br /> Enter Destination and Project Code, <br /> and then pick the Start date and the End date, and
<br /> click "Accept" to complete booking, or click "Cancel" to return to previous screen.</p>
<table>
<tr>
<td>
<asp:Label ID="lblCustomDestination" runat="server" CssClass="lblBook" >Destination:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtCustomDestination" runat="server" align="center" Width="230px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCusProjCode" runat="server" CssClass="lblBook" >Project Code:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtCusProjCode" runat="server" align="center" Width="230px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblStartDate" runat="server" CssClass="lblBook" >Start Date:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtStartDate" runat="server" align="center" Width="150px"
ReadOnly="True" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEndDate" runat="server" CssClass="lblBook" >End Date:</asp:Label>
</td>
<td>
<input type="text" id="calCustomBookEndDate" size="17" runat="server"
readonly="readonly" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnCustomBook" runat="server" align="center"
OnClientClick="return invalidInfoCustom(this)" onclick="btnCustomBook_Click"
Text="Accept" Width="80px" />  
<asp:Button ID="btnCustomCancel" runat="server" align="center" onclick="btnCancel_Click"
Text="Cancel" Width="80px" />
</td>
</tr>
</table>
</div>
<div id="OpsEditBooking" runat="server" style="display:block; height:400px" align="center" >
<table style="height: 119px">
<tr>
<td>
<asp:Label ID="lblEditDestination" runat="server" CssClass="lblBook" >Destination:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtEditDestination" runat="server" align="center" Width="230px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEditProjCode" runat="server" CssClass="lblBook" >Project Code:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtEditProjCode" runat="server" align="center" Width="230px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEditStartTime" runat="server" CssClass="lblBook" >Start Time:</asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlStartTimes" runat="server" AutoPostBack="True"
onselectedindexchanged="ddlStartTimes_SelectedIndexChanged" >
<asp:ListItem>08:00</asp:ListItem>
<asp:ListItem>08:30</asp:ListItem>
<asp:ListItem>09:00</asp:ListItem>
<asp:ListItem>09:30</asp:ListItem>
<asp:ListItem>10:00</asp:ListItem>
<asp:ListItem>10:30</asp:ListItem>
<asp:ListItem>11:00</asp:ListItem>
<asp:ListItem>11:30</asp:ListItem>
<asp:ListItem>12:00</asp:ListItem>
<asp:ListItem>12:30</asp:ListItem>
<asp:ListItem>13:00</asp:ListItem>
<asp:ListItem>13:30</asp:ListItem>
<asp:ListItem>14:00</asp:ListItem>
<asp:ListItem>14:30</asp:ListItem>
<asp:ListItem>15:00</asp:ListItem>
<asp:ListItem>15:30</asp:ListItem>
<asp:ListItem>16:00</asp:ListItem>
<asp:ListItem>16:30</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEditEndTime" runat="server" CssClass="lblBook" >End Time:</asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlEndTimes" runat="server" >
<asp:ListItem>08:30</asp:ListItem>
<asp:ListItem>09:00</asp:ListItem>
<asp:ListItem>09:30</asp:ListItem>
<asp:ListItem>10:00</asp:ListItem>
<asp:ListItem>10:30</asp:ListItem>
<asp:ListItem>11:00</asp:ListItem>
<asp:ListItem>11:30</asp:ListItem>
<asp:ListItem>12:00</asp:ListItem>
<asp:ListItem>12:30</asp:ListItem>
<asp:ListItem>13:00</asp:ListItem>
<asp:ListItem>13:30</asp:ListItem>
<asp:ListItem>14:00</asp:ListItem>
<asp:ListItem>14:30</asp:ListItem>
<asp:ListItem>15:00</asp:ListItem>
<asp:ListItem>15:30</asp:ListItem>
<asp:ListItem>16:00</asp:ListItem>
<asp:ListItem>16:30</asp:ListItem>
<asp:ListItem>17:00</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnAcceptEdit" runat="server" align="center"
OnClientClick="return invalidInfoEditBooking(this)" onclick="btnAcceptEdit_Click"
Text="Accept" Width="80px" />  
<asp:Button ID="btnEditCancel" runat="server" align="center" onclick="btnCancel_Click"
Text="Cancel" Width="80px" />
</td>
</tr>
</table>
</div>
<asp:Panel ID="pnlEmpDisp" runat="server" BackColor="Transparent" ScrollBars="Auto" >
<div id="dvInfo" runat="server" style="display:block" >
</div>
</asp:Panel>
<asp:Button id="btnLogOut" runat="server" onclick="btnLogOut_Click" style="display:none;" />
</form>
</body>
</html>
I have a booking system that allows you to book, delete or edit your booking.When clicking the delete button,
a <div> with the delete confirmation pops up with the two buttons, Yes and No. If you click Yes,
the booking gets deleted and the user is redirected back to the Home page, where you can view and make other bookings as well.
This works well during first execution, but if you make another booking and try to delete it, the confirmation <div>,
the one with Yes and No doesn't appear at all until you click the Home button and begin the delete process,
then it will show. This is my .aspx and .cs code
</div>
<div id="divBookingCnclCnfrm" runat="server" style="display:none;" align="center" >
<p class="p" align="center" > Are you sure you want to deleted your booking?</p>
<asp:Button ID="btnYes" align="center" runat="server" Text="Yes" OnClick="btnYes_Click" Width="50px" />  
<asp:Button ID="btnNo" align="center" runat="server" Text="No" OnClick="btnNo_Click" Width="50px" />
</div>
protected void btnDelBooking_Click(object sender, EventArgs e)
{
divBookingCnclCnfrm.Style["display"] = "block";
dvInfo.Visible = false;
VehEditBooking.Visible = false;
BuildVechGrid();
}
Since you're using server side controls, lets just keep it simple and use properties that are available for the control.
Change this line:
<div id="divBookingCnclCnfrm" runat="server" style="display:none;" align="center" >
to
<div id="divBookingCnclCnfrm" runat="server" visible="false" align="center" >
Then in the delete button event write:
protected void btnDelBooking_Click(object sender, EventArgs e)
{
divBookingCnclCnfrm.Visible = true;
dvInfo.Visible = false;
VehEditBooking.Visible = false;
BuildVechGrid();
}
Please test and see if it helps.
I have a radcombobox with checkboxes turned on. I wrote a jQuery script to add a click event to all of them. What I need to move on to the next step is a way to get the combobox in which that item/checkbox resides. Something like this:
$(."comboBoxTag.find(":checkbox").click(
function(){
var cboObject = $(this).???
});
this way I can do things like access the telerik api methods like cboObject.get_items();
I have the control tagged with a CSS class called "AssigneeTag", but doing a .closest(".AssigneeTag") isn't returning anything...
any ideas?
UPDATE:
As requested:
<h1>Tickets Assigned to Me</h1>
<rad:RadListView runat="server" ID="lsvTickets">
<ItemTemplate>
<div id="divContainer" class="divContainer">
<div id="divTicketHeader" class="divTicketHeader">
<asp:Table runat="server" ID="tblTicketHead" Width="100%" CellSpacing="0" CellPadding="5" HorizontalAlign="Center">
<asp:TableRow HorizontalAlign="Left">
<asp:TableCell Width="25%">
<asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Subject") %>' Font-Bold="true" />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="lblStatus" runat="server" Text='<%#Eval("Status.Key") %>' />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="lblReportedBy" runat="server" Text='<%#Eval("CreatedBy.Key") %>' />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="lblDateOpened" runat="server" Text='<%#Eval("DateOpened") %>' />
</asp:TableCell></asp:TableRow></asp:Table></div><div id="divTicketBody" class="divComments">
<rad:RadListView runat="server" ID="lsvActions" DataSource='<%#Eval("Comments") %>' ItemPlaceholderID="ph1" ClientIDMode="Static">
<ItemTemplate>
<div id="divComment" class="divComment">
<asp:Table runat="server" ID="tblComment" CellPadding="5">
<asp:TableRow>
<asp:TableCell Width="15%" HorizontalAlign="Center">
<rad:RadBinaryImage runat="server" ID="imgCommenter" Width="50" Height="50" /><br />
<asp:Label ID="Label5" runat="server" Text="[action author]" /><br />
<asp:Label ID="Label6" runat="server" Text='<%#Eval("CreateDate", "{0:MMM d, yyy hh:mm}") %>'
CssClass="commenterText"/><br />
</asp:TableCell><asp:TableCell>
<asp:Label ID="Label7" runat="server" Text='<%#Eval("CommentText") %>' />
</asp:TableCell></asp:TableRow></asp:Table></div></ItemTemplate><LayoutTemplate>
<center>
<div id="divAddComment" style="width: 500px;" class="CommentTopLevel">
<div id="divCommentControls" style="margin: 8px 0px 8px 0px;">
<asp:HiddenField runat="server" ID="hfID" Value='<%#Eval("TicketID") %>' />
<rad:RadComboBox runat="server" ID="cboStatus" DataSource='<%#GetStatuses() %>' DataTextField="Status" DataValueField="Support_StatusID" CssClass="StatusTag" EnableViewState="true" />
<rad:RadCombobox runat="server" ID="cboAssignTo" DataSource='<%#GetAssignees() %>' DataTextField="Name" DataValueField="Guid" ItemDataBound="Assignees_Bound" CssClass="AssigneeTag" CheckBoxes="true" OnItemChecked="AssigneeChecked" />
<rad:RadTextBox runat="server" ID="txtComment" TextMode="MultiLine" Width="500" Height="100" CssClass="CommentBox" /><br />
</div>
<div style="height: 35px;">
<div style="float:right; margin: 3px 0 0 0; ">
<rad:RadButton runat="server" CssClass="submitTag" ID="btnSubmit" Text="Submit" /><br />
<div class="SubmitStatus"></div>
</div>
</div>
</div>
</center>
<asp:PlaceHolder ID="ph1" runat="server" />
</LayoutTemplate>
</rad:RadListView>
</div>
</div>
</ItemTemplate>
</rad:RadListView>
This is a listview with another listview nested in the itemtemplate. in the itemtemplate of the inner list resides the controls. The combobox im referring to is named cboAssignTo. It is a Telerik combobox, so it does not work like a traditionial DropDown menu, which I think is what is really complicating this on top of the fact that the comboboxes are dynamically generated. I was able to do things like $(this).closest(".rcbTag") to get the values of the other combobox called cboStatus, but this other combobox involves a bit more as it has checkboxes.
EDIT:
Here is a watered down easier to read version of what stage I'm at. This is the HTML generated by a single instance of this combobox:
<div id="lsvTest" class="RadComboBox RadComboBox_Default RcbTag" style="width:160px;">
<table summary="combobox" style="border-width:0;border-collapse:collapse;table-layout:fixed;width:100%">
<tr class="rcbReadOnly">
<td style="margin-top:-1px;margin-bottom:-1px;width:100%;" class="rcbInputCell rcbInputCellLeft">
<input name="lsvTest" type="text" class="rcbInput" id="lsvTest_Input" value="" style="display: block;" readonly="readonly" />
</td>
<td style="margin-top:-1px;margin-bottom:-1px;" class="rcbArrowCell rcbArrowCellRight">
<a id="lsvTest_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
</td>
</tr>
</table>
<!-- 2012.1.215.40 -->
<div class="rcbSlide" style="z-index:6000;">
<div id="lsvTest_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default " style="float:left;display:none;">
<div class="rcbScroll rcbWidth" style="width:100%;">
<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />One</li>
<li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />Two</li>
<li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />Three</li>
</ul>
</div>
</div>
</div>
<input id="lsvTest_ClientState" name="lsvTest_ClientState" type="hidden" />
</div>
Just looking at this, I feel like clicking a checkbox and then using $(this).closest(".RcbTag") should traverse all the way to the top and grab the outer div, but it is not.
As with the other question, I think your life will be easier if you stick with the Telerik-sanctioned methods. Here is how you could do it using them:
<script language="javascript" type="text/javascript">
function OnClientItemChecked(sender, eventArgs) {
var item = eventArgs.get_item();
var combo = item.get_comboBox(); // Now you have a reference to the parent ComboBox
}
</script>
And the RadComboBox itself:
<telerik:RadComboBox ID="RadComboBox1" runat="server"
OnClientItemChecked="OnClientItemChecked" CheckBoxes="true">
</telerik:RadComboBox>
I solved similar issues using jQuery parent() calls, did you try this?
Using teleriks drag and drop demo I'm able to reproduce the functionality, however, what I want to do is if the browser isn't HTML5 compliant I want to load a different function. Below is the code i'm using.
<script type="text/javascript">
var $ = $telerik.$;
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
$("<span><strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong></span>"));
}
}
function added(sender, args) {
if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
}
}
</script>
I realize that you want to replace this section with the code you want:
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
How do I include whats below in this in the .replaceWith(
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
</telerik:RadAsyncUpload>
<br />
<telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
<div style="position:relative;">
<table>
<tr>
<td id="controlContainer">
<telerik:RadUpload
ID="RadUpload1" runat="server"
MaxFileInputsCount="5"
OverwriteExistingFiles="false" />
<telerik:RadProgressArea id="progressArea1" runat="server"/>
<asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
</td>
<td>
<div class="smallModule">
<div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
<asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
<asp:Repeater ID="repeaterResults" runat="server" Visible="False">
<HeaderTemplate>
<div class="title">Uploaded files in the target folder:</div>
</HeaderTemplate>
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FileName")%>
<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
<br />
</ItemTemplate>
</asp:Repeater>
</div></div></div></div>
</td>
</tr>
</table>
</div>
</div>
This is how I did it, by creating additional divs and hiding elements based on divs
<script type="text/javascript">
var $ = $telerik.$;
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
$(""));
}
}
function added(sender, args) {
if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
$(".nonHTML5").replaceWith(
$(""));
}
}
</script>
<div class="wrapper">
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
</telerik:RadAsyncUpload>
<br />
<telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
</div>
<div class ="nonHTML5" style="position:relative;">
<table>
<tr>
<td id="controlContainer">
<telerik:RadUpload
ID="RadUpload1" runat="server"
MaxFileInputsCount="5"
OverwriteExistingFiles="false" />
<telerik:RadProgressArea id="progressArea1" runat="server"/>
</td>
<td>
<div class="smallModule">
<div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
<asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
<asp:Repeater ID="repeaterResults" runat="server" Visible="False">
<HeaderTemplate>
<div class="title">Uploaded files in the target folder:</div>
</HeaderTemplate>
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FileName")%>
<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
<br />
</ItemTemplate>
</asp:Repeater>
</div></div></div></div>
</td>
</tr>
</table>
</div>
<asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
</td>
</tr>