Goal: I would like to have a Dropdown list that shows the color green if someones if Availability is True, and red is someones Availability is False.
NOTE: I need to do it without jQuery (I was just told we are not allowed to use jquery in our project).
Problem/Background:
The only way I could get anything to show was with CSS and placing it on the Dropdown list itself, as seen in the first row of this image for Prof Smith. You'll see the next row with Prof. Jones is displaying the actual boolean value from the database in the dropdown, although I want a colored circle.
I'd like it to be within the dropdown box itself. It should also (eventually) be able to update the value in the DB if they make a change.
How can I get these circles to show inside the dropdown box?
What I want it the dropdown to look like:
What it actually looks like:
What I've done:
Tried CSS on the DropdownList as well as the ListItem, and inside of the listitem.
I have also tried SVG but that didn't insert into the ListItem at all
I've tried adding CSS through the C# code but couldn't get it to work that way
CSS:
.dot {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
}
.greendot {
background-color: #89C742;
}
.reddot {
background-color: #fe0505;
}
aspx/html:
<asp:DropdownList runat="server" id="ddl1" class="dot greendot">
<asp:ListItem ID="LT1"></asp:ListItem>
<asp:ListItem ID="RT1"></asp:ListItem>
</asp:DropdownList>
<asp:DropdownList runat="server" id="ddl2">
<asp:ListItem ID="LT2"></asp:ListItem>
</asp:DropdownList>
C#:
LT2.Text = professorStatsList[1].Available.ToString();
I don't think you can create rounded option element without creating a complete copy of the DDL with div elements like in this example. But the closest you can get is something like this.
Give the DDL a class, in this case RoundedDDL
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="RoundedDDL">
<asp:ListItem Text="" Value=""></asp:ListItem>
<asp:ListItem Text="" Value="True"></asp:ListItem>
<asp:ListItem Text="" Value="False"></asp:ListItem>
</asp:DropDownList>
Then with CSS make it round and remove the arrow with appearance: none;. You can style the select elements by value with option[value="True"]
<style>
.RoundedDDL {
appearance: none;
width: 30px;
height: 30px;
border-radius: 15px;
border: 1px solid black;
background-color: white;
cursor: pointer;
}
select option {
background-color: white;
}
select option[value="True"] {
background-color: green;
}
select option[value="False"] {
background-color: red;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
And then some javascript to add the correct class to the DDL when a specific value has been selected.
<script>
$('.RoundedDDL').bind('change', function () {
var $this = $(this);
$this.removeClass('green');
$this.removeClass('red');
if ($this.val() === 'True') {
$this.addClass('green');
} else if ($this.val() === 'False') {
$this.addClass('red');
}
});
</script>
I would just create some images and implement these CSS classes:
.available {
background-image:url('images/available.png');
}
.unavailable {
background-image:url('images/unavailable.png');
}
and would make sure that the items have the class you expect (set the CssClass attribute)
Also, you may want to implement a new Control class which extends ListItem, has a logical value for available and in the correct event (maybe PreRender, but I'm not sure) you set the CssClass to the correct value. That would separate your concerns.
I'm not sure if I misunderstood your question, but I understand that you want to put the circle inside each ListItem.
One way to do this is to use a customizable selectmenu using jQuery UI, but if you want to keep the circle in the selected item you will have to make a small change, for this I have used the answer to this question as a base: Keep picture with Selectmenu of jQuery UI
ASPX/JS/CSS Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", { html: item.element.html() });
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#<%=dpwTest.ClientID%>")
.iconselectmenu({
create: function (event, ui) {
var widget = $(this).iconselectmenu("widget");
$span = $('<span id="' + this.id + 'selected" class="status-selected"> ').html(" ").appendTo(widget);
// Keep always the selected item class (for example, when the page load a specific item)
$span.attr("style", $(this).children(":selected").data("style"));
},
change: function (event, ui) {
$("#" + this.id + 'selected').attr("style", ui.item.element.data("style"));
}
})
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons status");
});
</script>
<style>
.ui-selectmenu-menu .ui-menu.status .ui-menu-item-wrapper {
padding: 15px 10px 0 30px;
padding-bottom: 10px;
}
.ui-selectmenu-menu .ui-menu.status .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-selectmenu-text {
padding-left: 2em;
}
.status-selected {
position:absolute;
right:auto;
margin-top:-12px;
top:50%;
}
.ui-icon, .ui-widget-content .ui-icon {
background-image: none;
}
.ui-selectmenu-button.ui-button {
text-align: left;
white-space: nowrap;
width: 7em;
}
</style>
<form id="form1" runat="server">
<div>
<label for="dpwTest">Prof. Smith</label>
<asp:DropDownList ID="dpwTest" runat="server">
<asp:ListItem Text="Yes" Value="True" data-class="status" data-style="height: 25px; width: 25px; background-color: green;border-radius: 50%; display: inline-block;" />
<asp:ListItem Text="No" Value="False" data-class="status" data-style="height: 25px; width: 25px; background-color: red;border-radius: 50%; display: inline-block;" />
</asp:DropDownList>
</div>
</form>
</body>
</html>
Result:
This is it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">person1    </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">person2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">person3</a>
</div>
</li>
</ul>
</div>
</nav>
<Script>
var avaliability = [true, false, false];
var x = document.getElementsByClassName('dropdown-item');
for (var i = x.length; i--;) {
if (avaliability[i] === true) {
x[i].innerHTML = `person  <span class="badge badge-success"
style="border-radius: 100%;">  </span>`
} else {
x[i].innerHTML = `person  <span class="badge badge-danger"
style="border-radius: 100%;">  </span>`;
}
}
</Script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
check
https://jsfiddle.net/yubeog4c/
just get the values into availability array and it should converted to boolean types.
Thanks!!!!
I am trying to load an xml file but getting the following error.
DTD must be defined before the document root element.
the xml file is generated by others, i found that there are html elements in the xml file. How do i delete the html in the xml file using c#?
Updated:
Hi, I sorry that i cannot show to full xml file due to company p&c. But below are the html part that i mention.
<?xml version="1.0" encoding="UTF-8"?>
<loanreservation>
<loanid></loanid>
<status>WEB_REQUEST</status>
<requesterid>abc</requesterid>
<borrowerid>abc</borrowerid>
<borrowerorgid>abc</borrowerorgid>
<borrowerlocid>abcborrowerlocid>
<authcontactid></authcontactid>
<escalationcontactid></escalationcontactid>
<specialinstructions>specialinstructions>
<internalnotes></internalnotes>
<usestartdate>2018-09-03</usestartdate>
<useenddate>2018-09-17</useenddate>
<mustshipdate>2018-08-30</mustshipdate>
<mustreceivedate>2018-10-01</mustreceivedate>
<checkoutdate></checkoutdate>
<checkindate></checkindate>
<intendeduse></intendeduse>
<reason></reason>
<shiptolocid>abc</shiptolocid>
<shipaddress1></shipaddress1>
<shipaddress2></shipaddress2>
<shipaddress3></shipaddress3>
<shipaddress4></shipaddress4>
<shippostalcode></shippostalcode>
<shipcity></shipcity>
<shipstate></shipstate>
<shipprovince></shipprovince>
<shipcountry></shipcountry>
<shiptocontactid></shiptocontactid>
<shiptocontactphone></shiptocontactphone>
<shiptocontactfax></shiptocontactfax>
<shiptocontactemail></shiptocontactemail>
<returnpickuplocid></returnpickuplocid>
<returnpickupcontactid></returnpickupcontactid>
<returnpickupcontactphone></returnpickupcontactphone>
<returnpickupcontactfx></returnpickupcontactfx>
<returnpickupcontactemail></returnpickupcontactemail>
<returnpickuplocation></returnpickuplocation>
<returnpickupaddress1></returnpickupaddress1>
<returnpickupaddress2></returnpickupaddress2>
<returnpickupaddress3></returnpickupaddress3>
<returnpickupaddress4></returnpickupaddress4>
<returnpickuppostalcode></returnpickuppostalcode>
<returnpickupcity></returnpickupcity>
<returnpickupstate></returnpickupstate>
<returnpickupprovince></returnpickupprovince>
<returnpickupcountry></returnpickupcountry>
<loanorgpoolid></loanorgpoolid>
<contactloginid></contactloginid>
<lastupdate></lastupdate>
<createdate></createdate>
<approvalcontactid></approvalcontactid>
<approveddate></approveddate>
<shippingwaybill></shippingwaybill>
<shippingcarrier></shippingcarrier>
<shippingnoofboxes></shippingnoofboxes>
<shippingtotalweight></shippingtotalweight>
<returnwaybill></returnwaybill>
<returncarrier></returncarrier>
<returnnoofboxes></returnnoofboxes>
<returntotalweight></returntotalweight>
<reservationitems>
<item>
<loanid></loanid>
<equipno></equipno>
<assetno></assetno>
<manufacturer></manufacturer>
<manufmodelno></manufmodelno>
<serialno></serialno>
<options></options>
<chassisno></chassisno>
<slotno></slotno>
<configid></configid>
</item>
</reservationitems>
<accessories>
<item></item>
</accessories>
</loanreservation>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/base-font.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/template.css">
<link rel="stylesheet" type="text/css" href="../css/dashboard.css">
<link rel="stylesheet" type="text/css" href="../css/tabs.css">
<link rel="stylesheet" type="text/css" href="../css/webforms.css">
<link rel="stylesheet" type="text/css" href="../css/im.css">
<link rel="stylesheet" type="text/css" href="../css/ice_infoline.css">
<link rel="stylesheet" type="text/css" href="../css/internal_portal.css">
<script language="JavaScript" src="../scripts/dhtml-base.js"></script>
<script language="JavaScript" src="../scripts/common.js"></script>
<script language="JavaScript" src="../scripts/jquery-min.js"></script>
<script language="JavaScript" src="../public/locale-script.aspx"></script>
<script language="JavaScript" src="../scripts/template.js"></script>
<script language="JavaScript" src="../scripts/dhtml-menus.js"></script>
<script language="JavaScript" src="../scripts/report-definition.js"></script>
<script language="JavaScript" src="../webfx/scripts/webforms-ui.js"></script>
<script src="../webfx/scripts/webforms.js"></script>
</head>
<body style="height: 100%;">
<div style="position: fixed; top: 0px; width:60px; height: 100%; background-color: #555555;"></div>
<div style="margin-left:0px; height: 100%">
<div style="display: table; height: 100%; width: 100%">
<div style="display: table-row; width=100%">
<div style="border-bottom:6px #e90029 solid; margin-bottom: 10px; ">
<div class="bodycontainer">
<a style="display: inline-block;" href="http://www.keysight.com"><img src="../acom-lf/keysight-logo.png"></a>
<span style="display: inline-block; color: #555555; font-size: 20pt; font-weight: bold; vertical-align: top; padding-top: 20px; margin-left: 30px" >Infoline</span>
</div>
</div>
</div>
<div style="display: table-row; width=100%; height: 100%">
<div class="bodycontainer" style=" ">
<h1>System maintenance</h1>
</div>
</div>
<div style="display: table-row; width=100%">
<div style="color: #909090; background-color: black; padding: 8px; padding-left:50px; margin-top: 20px; font-size: 9pt;" class="bodycontainerhf">
</script></strong>
</div>
</div>
</div>
</div>
</body>
</html>
For the coding part, i'm just doing as below:
xmlDoc.Load(Server.MapPath("./Request/") + FileUpload1.FileName);
What I'm doing is just loading the xml file.
I have a css that fires when I click a button to indicate an error if a field on the form is empty .
However this only works when the page is not within a masterpage.
When the page is within a masterpage and I click the button I get this error:
this is the code on the css:
[ Alert validate ]*/
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
border-radius: 3px;
padding: 4px 25px 5px 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 12px;
pointer-events: none;
font-family: Ubuntu-Regular;
color: #c80000;
font-size: 14px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f12a";
font-family: FontAwesome;
display: block;
position: absolute;
color: #c80000;
font-size: 18px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 18px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
#media (max-width: 992px) {
.alert-validate::before {
visibility: visible;
opacity: 1;
}
}
and this is the code in my page:
<%# Page Title="" Language="C#" MasterPageFile="~/Principal.Master" AutoEventWireup="true" CodeBehind="Usuario.aspx.cs" Inherits="Web.Usuario" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="img/fav.png">
<!-- Author Meta -->
<meta name="author" content="Colorlib">
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>Destinos Naturales S.A</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images2/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts2/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts2/Linearicons-Free-v1.0.0/icon-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css2/util.css">
<link rel="stylesheet" type="text/css" href="css2/main.css">
<!--===============================================================================================-->
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!--
CSS
============================================= -->
<link rel="stylesheet" href="css/linearicons.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Start Contact Area -->
<section class="contact-area" id="contact">
<div class="container-fluid">
<div class="row align-items-center d-flex justify-content-start">
<div class="col-lg-6 col-md-12 contact-left no-padding">
<div style=" width:100%;
height: 545px;" id="map"></div>
</div>
<div class="col-lg-4 col-md-12 pt-100 pb-100">
<form class="login100-form validate-form flex-sb flex-w">
<span class="login100-form-title p-b-51">
Usuario
</span>
<div>
<asp:TextBox ID="txtid" class="input100" type="numeric" readonly="true" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "La cédula es requerida">
<asp:TextBox ID="txtCedula" placeholder="Ingrese la Cédula" class="input100" type="numeric" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "El nombre es requerido">
<asp:TextBox ID="txtNombre" placeholder="Ingrese el Nombre" class="input100" type="text" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "los Apellidos son requeridos">
<asp:TextBox ID="txtApellidos" placeholder="Ingrese los Apellidos" class="input100" type="text" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "El usuario es requerido">
<asp:TextBox ID="txtUsuario" placeholder="Ingrese el Usuario" class="input100" type="text" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "La contraseña es requerida">
<asp:TextBox ID="txtContrasena" placeholder="Ingrese la Contraseña" class="input100" type="password" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-t-3 p-b-24">
<div class="contact100-form-checkbox">
</div>
<div>
</div>
</div>
<div class="container-login100-form-btn m-t-17">
<asp:Button ID="btnGuardar" class="login100-form-btn" runat="server" Text="Guardar" OnClick="btnGuardar_Click" />
</div>
</form>
</div>
</div>
</div>
</section>
<!-- End Contact Area -->
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="vendor2/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor2/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="vendor2/bootstrap/js/popper.js"></script>
<script src="vendor2/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor2/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor2/daterangepicker/moment.min.js"></script>
<script src="vendor2/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="vendor2/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="js2/main.js"></script>
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/parallax.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
</asp:Content>
the master page should look like this:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<%--all meta tags--%>
<%--all scripts put here will be available to every page that uses this master.--%>
<asp:ContentPlaceHolder id="head" runat="server">
<%--note this content placeholder in the head. don't put anything in it yet.
it will be available to pages that use this master.--%>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<%--add script tags and links-to-js before the closing body tag.
they will be available to every page that uses this master page.--%>
</body>
</html>
a form that uses the master page will look like this:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<%--this is the content placeholder from the head of the master.
add styles and links-to-css for use on just this page.--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
content for this page.
<%--add scripts for just this page.--%>
</asp:Content>
I have a <asp:Button> button in a <form> and it is "connected" to the C# code. My C# code should redirect users to the homepage (Homepage.html). Something like this:
protected void Inlog_button_Click(object sender, EventArgs e)
{
Response.Redirect("~/Homepage.html");
}
But, instead redirecting to the Homepage, the action will reload the page with: Login.aspx?ctl00=Inloggen.
Why is the app "ignoring" my written C# action?
Here is the whole HTML code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="OSGS_KANTINE_WEB.login" %>
<!DOCTYPE html>
<html class=" j-feature-js j-feature-no-touch j-feature-opacity j-feature-csstransitions" lang="nl-NL"><head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="https://u.jimdo.com/">
<link rel="dns-prefetch" href="//assets.jimstatic.com/">
<link rel="dns-prefetch" href="https://image.jimcdn.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://u.jimdo.com/" crossorigin="anonymous">
<link rel="preconnect" href="//assets.jimstatic.com/" crossorigin="anonymous">
<link rel="preconnect" href="https://image.jimcdn.com" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<meta property="st:section" content="">
<meta name="twitter:card" content="app">
<meta name="twitter:app:id:iphone" content="588950703">
<meta name="twitter:app:id:ipad" content="588950703">
<meta name="twitter:app:id:googleplay" content="com.jimdo">
<title>Login</title>
<link rel="icon" type="image/x-icon" href="logo_lyceum.ico" />
<link rel="canonical" href="http://osgs-kantine-site-design.jimdo.com/login-1/">
<style>
html,body{margin:0}.hidden{display:none}.n{padding:5px}#cc-website-title a {text-decoration: none}.cc-m-image-align-1{text-align:left}.cc-m-image-align-2{text-align:right}.cc-m-image-align-3{text-align:center}
.subbutton {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.subbutton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.subbutton span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.subbutton:hover span {
padding-right: 25px;
}
.subbutton:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #f4511e;
}
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=password]:focus {
border: 3px solid #f4511e;
}
</style>
<link href="https://u.jimdo.com/www400/o/s2080dbef3339dc21/layout/dm_0daae465c1d01048b40b213ad7efcc70/css/layout.css?t=1456656473" rel="stylesheet" type="text/css" id="jimdo_layout_css">
<script src="//www.googletagmanager.com/gtm.js?id=GTM-WDBL3P&l=_jimdoDataLayer" async=""></script><script src="https://www.google-analytics.com/analytics.js" async=""></script><script src="//www.googletagmanager.com/gtm.js?id=GTM-WDBL3P&l=_jimdoDataLayer" async=""></script><script src="https://www.google-analytics.com/analytics.js" async=""></script><script> /* <![CDATA[ */ /*! loadCss [c]2014 #scottjehl, Filament Group, Inc. Licensed MIT */ window.loadCSS = window.loadCss = function(e,n,t){var r,l=window.document,a=l.createElement("link");if(n)r=n;else{var i=(l.body||l.getElementsByTagName("head")[0]).childNodes;r=i[i.length-1]}var o=l.styleSheets;a.rel="stylesheet",a.href=e,a.media="only x",r.parentNode.insertBefore(a,n?r:r.nextSibling);var d=function(e){for(var n=a.href,t=o.length;t--;)if(o[t].href===n)return e.call(a);setTimeout(function(){d(e)})};return a.onloadcssdefined=d,d(function(){a.media=t||"all"}),a}; window.onloadCSS = function(n,o){n.onload=function(){n.onload=null,o&&o.call(n)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in n&&n.onloadcssdefined(o)} /* ]]> */ </script> <script>
// <![CDATA[
onloadCSS(loadCss('//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css') , function() {
this.id = 'jimdo_web_css';
});
// ]]>
</script><link media="all" href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="stylesheet"><link id="jimdo_web_css" media="all" href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="stylesheet">
<link href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="preload" as="style">
<noscript>
<link href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="stylesheet"/>
</noscript>
<script>
//<![CDATA[
var jimdoData = {"isTestserver":false,"isLcJimdoCom":false,"isJimdoHelpCenter":false,"isProtectedPage":false,"cstok":"b7572c81c13157a7c0f12ff29ba267b86ecc2b30","cacheJsKey":"5142cd437b8c2d4dc78374d706a685d16d36a82e","cacheCssKey":"5142cd437b8c2d4dc78374d706a685d16d36a82e","cdnUrl":"\/\/assets.jimstatic.com\/","minUrl":"\/\/assets.jimstatic.com\/app\/cdn\/min\/file\/","authUrl":"https:\/\/a.jimdo.com\/","webPath":"http:\/\/osgs-kantine-site-design.jimdo.com\/","appUrl":"http:\/\/a.jimdo.com\/","webserver":"http:\/\/web403.jimdo.com\/","cmsLanguage":"nl_NL","isFreePackage":true,"mobile":false,"isDevkitTemplateUsed":true,"isTemplateResponsive":false,"websiteId":"s2080dbef3339dc21","pageId":2147754849,"packageId":1,"shop":{"deliveryTimeTexts":{"1":"Levertijd: 1-3 dagen","2":"Levertijd: 3-5 dagen","3":"Levertijd: 5-8 dagen"},"checkoutButtonText":"Naar de kassa","isReady":false,"currencyFormat":{"pattern":"\u00a4 #,##0.00;\u00a4 #,##0.00-","convertedPattern":"$ #,##0.00","symbols":{"GROUPING_SEPARATOR":".","DECIMAL_SEPARATOR":",","CURRENCY_SYMBOL":"\u20ac"}},"currencyLocale":"nl_NL"},"tr":{"gmap":{"searchNotFound":"Het ingevoerde adres kon niet worden gevonden of bestaat niet.","routeNotFound":"De route kon niet berekend worden. Mogelijke oorzaken: het vertrekadres is niet precies genoeg aangegeven of te ver van het aankomstadres verwijderd."},"shop":{"checkoutSubmit":{"next":"Volgende stap","wait":"Een moment geduld"},"paypalError":"Helaas is er iets verkeerd gegaan. Probeer het nog een keer!","cartBar":"Naar de winkelwagen","maintenance":"Deze webwinkel is tijdelijk helaas niet bereikbaar. Probeer het later nog eens.","addToCartOverlay":{"productInsertedText":"Het product is aan de winkelwagen toegevoegd.","continueShoppingText":"Verder winkelen","reloadPageText":"Opnieuw laden"},"notReadyText":"Het opzetten van deze webwinkel is nog niet volledig afgerond.","numLeftText":"Er zijn op dit moment niet meer dan {:num} exemplaren van dit artikel beschikbaar.","oneLeftText":"Er is helaas nog maar \u00e9\u00e9n exemplaar van dit product beschikbaar."},"common":{"timeout":"Er is een fout opgetreden. De door jou gekozen actie werd onderbroken. Probeer het later nog een keer."},"form":{"badRequest":"Er is een fout opgetreden. De invoer kon helaas niet verzonden worden. Probeer het later nog een keer!"}},"jQuery":"jimdoGen002","isJimdoMobileApp":false,"bgConfig":{"id":82641349,"type":"color","color":"rgb(255, 255, 255)"},"responsiveBreakpointLandscape":767,"responsiveBreakpointPortrait":480,"copyableHeadlineLinks":false};
// ]]>
</script>
</head>
<body style="background-color: rgb(255, 255, 255);" class="body cc-page j-m-flash-styles j-m-gallery-styles j-m-video-styles j-m-hr-styles j-m-header-styles j-m-text-styles j-m-emotionheader-styles j-m-htmlCode-styles j-m-rss-styles j-m-form-styles j-m-table-styles j-m-textWithImage-styles j-m-downloadDocument-styles j-m-imageSubtitle-styles j-m-flickr-styles j-m-googlemaps-styles j-m-blogSelection-styles j-m-comment-styles j-m-jimdo-styles j-m-profile-styles j-m-guestbook-styles j-m-promotion-styles j-m-twitter-styles j-m-hgrid-styles j-m-shoppingcart-styles j-m-catalog-styles j-m-product-styles-disabled j-m-facebook-styles j-m-sharebuttons-styles j-m-externalSource-styles j-m-formnew-styles j-m-callToAction-styles j-m-turbo-styles j-m-spacing-styles j-m-googleplus-styles j-m-dummy-styles j-footer-styles cc-pagemode-default cc-content-parent jqbga-container jdbga-web--color" id="page-2147754849">
<div id="cc-inner" class="cc-content-parent">
<header><div class="navigation-colors">
<div class="tpl-topbar-wrapper">
<div class="tpl-title-wrapper">
<div id="cc-website-title" class="cc-single-module-element"><div id="cc-m-10956465649" class="j-module n j-header"><h1 class="cc-within-single-module-element j-website-title-content" id="cc-m-header-10956465649">OSG Schoonoord Kantine Website</h1></div></div>
</div>
<nav class="tpl-navigation"><div data-container="navigation"><div class="j-nav-variant-nested"><ul class="cc-nav-level-0 j-nav-level-0"><li id="cc-nav-view-2147752549" class="jmd-nav__list-item-0">--- Home ---</li><li id="cc-nav-view-2147754849" class="jmd-nav__list-item-0 cc-nav-current j-nav-current jmd-nav__item--current">Login</li><li id="cc-nav-view-2147754949" class="jmd-nav__list-item-0">Voorwaarden</li><li id="cc-nav-view-2147755049" class="jmd-nav__list-item-0">Contact</li></ul></div></div>
</nav><div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="logo-wrapper">
<div id="cc-website-logo" class="cc-single-module-element"><div id="cc-m-10956474449" class="j-module n j-imageSubtitle"><div class="cc-m-image-container"><figure class="cc-imagewrapper cc-m-image-align-1">
<img srcset="https://image.jimcdn.com/app/cms/image/transf/none/path/s2080dbef3339dc21/image/i2d821423f9ea4bff/version/1456656485/image.png 184w" sizes="(min-width: 184px) 184px, 100vw" id="cc-m-imagesubtitle-image-10956474449" src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2080dbef3339dc21/image/i2d821423f9ea4bff/version/1456656485/image.png" alt="" class="" data-src-width="184" data-src-height="144">
</figure>
</div>
<div class="cc-clear"></div>
</div></div>
</div>
<div class="clear"></div>
</header>
<div class="content-wrapper content-options-box cc-content-parent">
<section class="content-options-css content-options-inner cc-content-parent"><div class="breadcrumbs breadcrumb-options">
<div data-container="navigation"><div class="j-nav-variant-breadcrumb"><ol><li itemscope="true" itemtype="http://data-vocabulary.org/Breadcrumb" class="cc-nav-current j-nav-current"><span itemprop="title">Login</span></li></ol></div></div>
</div>
<div id="content_area" data-container="content">
</div>
<div id="content_start">
</div>
<div id="formDiv">
<div id="form_div" runat="server" class="j-module n j-htmlCode ">
<form>
Stamnummer:
<p></p>
<input class="stname"type="text" />
<p></p>
Wachtwoord:
<p />
<input class="pass" type="password" />
<p />
<asp:Button ID="Inlog_button" runat="server" Text="Button" click="Inlog_button_Click"/>
</form>
</div>
<div id="cc-m-10956595049" class="j-module n j-callToAction ">
<div class="j-calltoaction-wrapper j-calltoaction-align-1">
</div>
</div>
</div>
</section>
</div>
<aside class="sidebar-options-box"><section class="sidebar-options-css sidebar-options-inner"><div data-container="sidebar"><div id="cc-matrix-2937969949"></div></div>
</section></aside><footer class="footer-options"><div class="tpl-footer-wrapper">
<div id="contentfooter" data-container="footer">
<div class="copyright-footer"> <p class="pull-left"> <strong>Copyright 2016 - Hugo Woesthuis</strong></p> </div>
</div>
</div>
</footer><aside class="tpl-shoppingcart">
</aside>
</div>
<script> /*<![CDATA[*/ (function(){ if (!window.GoogleAnalyticsObject) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','_jc_tracker'); } else { window._jc_tracker = window[window.GoogleAnalyticsObject]; } _jc_tracker('create', 'UA-54647672-2', { name: 'JC_TRACKER', alwaysSendReferrer: true, cookieDomain: location.hostname, cookieName: '_jc_tracker', siteSpeedSampleRate: 50, anonymizeIp: true }); var cParams = { 'page': location.hostname }; if (location.hash.indexOf('jc=') > -1) { var source = "garbled"; var passedSource = location.hash.match(/jc=([^&$]+)/); if (passedSource && passedSource[1]) { source = decodeURIComponent(passedSource[1]); } cParams = { campaignName: 'jimdo internal campaign', campaignMedium: 'link', campaignSource: source }; } _jc_tracker('JC_TRACKER.send', 'pageview', cParams); if (window.addEventListener && window.performance && performance.timing) { window.addEventListener('load', function() { if (performance.timing.domContentLoadedEventStart > 0) { var timeToContentLoaded = performance.timing.domContentLoadedEventStart - performance.timing.domLoading; _jc_tracker('JC_TRACKER.send', 'timing', 'page speed', 'time to content loaded', timeToContentLoaded); } }); } }()); /* ]]> */ </script><!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WDBL3P" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>
//<![CDATA[
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','_jimdoDataLayer','GTM-WDBL3P');
// ]]>
</script>
<!-- End Google Tag Manager -->
<script id="" type="text/javascript">(function(){try{var a=Math.max(document.documentElement.clientWidth,window.innerWidth||0),b=Math.max(document.documentElement.clientHeight,window.innerHeight||0);_jc_tracker&&_jc_tracker("JC_TRACKER.set","metric1",a);_jc_tracker&&_jc_tracker("JC_TRACKER.set","metric2",b);_jc_tracker("JC_TRACKER.send","event")}catch(c){}})();</script>
</body>
</html>
Thanks in advance.
1) You must send the whole page in <form> attribute. There is no partial send in asp.Net.
2) Input element cannot reach codebehind this way. You can easily do what you want to do by using asp.Net button object instead.
1.from should be <form runat=server>
2.Your click event should be onclick.
Then it will work.
<form runat=server>
Stamnummer:
<p></p>
<input class="stname"type="text" />
<p></p>
Wachtwoord:
<p />
<input class="pass" type="password" />
<p />
<asp:Button ID="Inlog_button" runat="server" Text="Button"
onclick="Inlog_button_Click"/>
</form>
Until my brain get bleeding, still I can't solve this problem. I have to use jQuery timepicker on my textbox in mvc3-View.
Inside my Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Script/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Script/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Script/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="tabs">
<ul id="menu">
<li id="menu-first-item">
#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<div id="render">
#RenderBody()
</div>
</div>
</div>
</body>
</html>
Inside the Create View:
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').timepicker({});
});
</script>
<div id="page-title" class="text-indent">
<h2>
Create new shift</h2>
<div id="Optiontab">
#Html.ActionLink("Browse", "Index")
</div>
</div>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div class="fieldset">
<div class="editor-label">
#Html.LabelFor(model => model.WorkDuration)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.WorkDuration)
#Html.ValidationMessageFor(model => model.WorkDuration)
</div>
</div>
}
The id of the textbos is "WorkDuration". The timepicker doesn't show.
Now, what I've missed? Hope someone could help. Thanks!
**
EDIT
**
I've found the answer, this should work now:
Inside layout.cshtml
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
<link type="text/css" href="#Url.Content("~/Content/jquery-ui-titoms.css")" rel="stylesheet" />
<style type="text/css">
#ui-datepicker-div, .ui-datepicker{ font-size: 80%; }
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-sliderAccess.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#WorkDuration, #AbsentTrigger, #LateTrigger, #StartTime, #EndTime").timepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false },
showSecond: true,
timeFormat: 'hh:mm:ss'
});
});
</script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
Reference:
Timepicker theme not working
Thanks for all responses!!
There must be some issue with the naming of your WorkDuration text box.
But if the text box name definitely contains WorkDuration then the jquery attribute contains selector will apply the time picker.
From your comment below it seems that you may not have referenced your scripts correctly, Asp.Net MVC names the folder that holds the javascript files as Scripts while your code is referencing a folder named Script.
You can ensure you have the correct folder name by dragging any files you wish to reference from their folder onto your layout page.
I could get the timepicker to work by using the code below.
Scripts and CSS:
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css" />
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
HTML:
<input type="text" id="WorkDuration" name="example_WorkDuration" />
JQuery:
<script type="text/javascript">
$(document).ready(function () {
$('input[name*="WorkDuration"]').timepicker({});
});
</script>
Have you tried without, the timepicker addon, and used just simply datepicker?
like this:
$( "#WorkDuration" ).datepicker();
Instead of:
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').timepicker({});
});
</script>
Use:
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').datepicker();
});
</script>
This should work
use this jquery:
jquery.ptTimeSelect.js
Time:
$(document).ready(function () {
var uId = 'ptTimeSelect_' + jQuery.ptTimeSelect._counter;
$("#incidenttime").ptTimeSelect();
$("#incidenttime").click(function () { $.ptTimeSelect.openCntr('' + uId + ''); });
$("#incidenttime").focus(function () { jQuery.ptTimeSelect.openCntr('' + uId + ''); });
$("#incidenttime").keypress(function (event) {
if (event.keyCode == 13) {
jQuery.ptTimeSelect.setTime();
return false;
}
});
});
It is a best way i think so.