<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryValidation.Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function checkValidity() {
var container = document.getElementById("toggle");
alert("uspeh!");
var inputArray = container.getElementsByTagName("input");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="toggle">
<asp:Label ID="lblName" runat="server" Text="Vnesi ime: "></asp:Label>
<span><asp:TextBox ID="txtName" runat="server" data-errormessage="Внесете име" data-class="required"></asp:TextBox></span>
<br />
<asp:Label ID="lblSurname" runat="server" Text="Vnesi prezime: "></asp:Label>
<span><asp:TextBox ID="txtSurname" runat="server" data-errormessage="Внесете презиме" data-class="required"></asp:TextBox></span>
<br />
<asp:Label ID="lblNickname" runat="server" Text="Vnesi nadimak: "></asp:Label>
<span><asp:TextBox ID="txtNickname" runat="server" data-errormessage="Внесете надимак" data-class="required"></asp:TextBox></span>
<br /><br />
<asp:Button ID="btnSend" runat="server" Text="Send"
OnClientClick="checkValidity(); return false;" onclick="btnSend_Click" />
</div>
</form>
</body>
</html>
Updated.
I have no idea why no pop-up shows up. Any idea? Thanks in advance!
Try
<asp:button text="Click me" onclientclick="window.checkValidity();" />
By doing
<script language="javascript" type="text/javascript">
function checkValidity() { }
</script>
You declare a function to the global scope. In the context of a browser it is the same as doing:
window.checkValidity = function() { };
Related
In a simple web form Pikaday works nice but when I'm using this in a content page it doesn't work, for better understanding I'm giving the code......Thanks in advance
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Test2.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/pikaday.css" rel="stylesheet" />
<link href="css/theme.css" rel="stylesheet" />
<script src="js/pikaday.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
and content page code
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="ContentPage.aspx.cs" Inherits="Test2.WebForm2" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<h4>This is from content page</h4>
<asp:TextBox ID="tbxFromDate" runat="server"></asp:TextBox>
<asp:TextBox ID="tbxToDate" runat="server"></asp:TextBox>
<script type="text/javascript">
var picker1 = new Pikaday({
field: document.getElementById('tbxFromDate'),
theme: 'dark-theme'
});
var picker2 = new Pikaday({
field: document.getElementById('tbxToDate'),
theme: 'dark-theme'
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I don't understand what I'm missing
The problem is that tbxFromDate and tbxToDate do not exist in the HTML. Because the Controls are in a Content Control, their ID's are changed to ensure there are no duplicates.
Their ID probably looks something like this: ContentPlaceHolder1_tbxFromDate.
So you need to reference them by their ClientID. So use
<script type="text/javascript">
var picker1 = new Pikaday({
field: document.getElementById('<%= tbxFromDate.ClientID %>'),
theme: 'dark-theme'
});
var picker2 = new Pikaday({
field: document.getElementById('<%= tbxToDate.ClientID %>'),
theme: 'dark-theme'
});
</script>
Im using the jquery dialog box and i am trying to stop the postback from happening when calling the dialog, so its basically handled on client side.
I am calling the dialog open from my Treeview's SelectedNodeChanged
protected void tvTreeList_SelectedNodeChanged(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", string.Format("ParentNodeClick('{0}','{1}')", lblDescText, lblTitleText), true);
}
this is my javascript function
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
Is there any way i can do this? Already tried to use this but it doesnt seem to work.
$("#dialog").parent().appendTo(jQuery("form:first"));
Full html on masterpage
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web Data Source</title>
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<link href="Style/jquery.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
</head>
<body>
<form id="form1" runat="server" style="align-content:center; height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="dialog" title="">
<p></p>
</div>
<div runat="server" style="text-align:center;">
<h1 style="color:#505050;">Datastatus from Data servers</h1>
</div>
<asp:ContentPlaceHolder ID="cphContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
and my treeview
<div id="TreeList">
<asp:TreeView ID="tvTreeList" runat="server" OnSelectedNodeChanged="tvTreeList_SelectedNodeChanged" >
<NodeStyle CssClass="NodeStyle"/>
<HoverNodeStyle CssClass="HoverNodeStyle"/>
<SelectedNodeStyle CssClass="SelectedNodeStyle" />
</asp:TreeView>
</div>
In master page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
In content place holder i have tried
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
$(function () {
$("input[id$='TextBox1']").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>
</asp:Content>
I have tried in asp page working fine. i don't know why its not working in master page.
This will Work for you...
<script type="text/javascript">
$(document).ready(function() {
$("input[id$='TextBox1']").datepicker();
});
</script>
You could also give it a class of something like CssClass="datePicker" and use that to grab it with jQuery:
$(".datePicker").datepicker();
Use Like, In Your Page where Datepicker is Located
Place it at bottom of Page where you Datpicker is located,
Put This Jquery
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="DATEPICKER.JS" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[id$='TextBox']").datepicker();
});
</script>
change ur content page code to this, remove datepicker style from master page
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>
<script type="text/javascript">
`$(function () {
$("input[id$='TextBox1']").datepicker();
});
</script>
</asp:Content>
if not working!!! please write ur html result from this content in ur browser here
I would like to use 'slideToggle()' to show/hide a set of controls. I found this code on the web and am trying to get it to work in a test application. When I put the script within the Content control and click the button, the web site seem to run the script because the application is busy for a couple of seconds. However, when I try to debug the javascript, I can't view it in the debugger. When I put the script in the section of the Site.Master page, I can see the code in the debugger but it does not run when I click the button.
This is my code in the Site.Master page:
In the section it is as follows:
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
This is the script within the Content control:
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent">
<script type="text/javascript">
$(document).ready(function () {
var Button1 = $("[id$='_Button1']");
var Button2 = $("[id$='_Button2']");
var Panel1 = $("[id$='_Panel1']");
Button1.click(function (e) {
Panel1.slideDown();
e.preventDefault();
});
Button2.click(function (e) {
Panel1.slideUp();
e.preventDefault();
});
});
</script>
</asp:ContentPlaceHolder>
</section>
</div>
This is the markup on the site page:
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<asp:Button ID="Button1" runat="server" Text="Show Panel" />
<asp:Button ID="Button2" runat="server" Text="Hide Panel" />
<br /><br />
<asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" style="display:none;" BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
Hello World!
</asp:Panel>
</asp:Content>
Using this code, the button at least looks like it is calling the script.
Can anybody see what I am doing wrong?
Thanks!
Updated Code
This script will toggle the panel although it is showing initially and I would like it to be hidden intially and also I would like the script to be run from the Site.Master page, if possible.
This is in the Default.aspx file:
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<script type="text/javascript">
$(function () {
$("#<%=Button1.ClientID %>").click(function (evt) {
evt.preventDefault();
$("#<%=Panel1.ClientID %>").slideToggle('slow');
});
});
</script>
<asp:Button ID="Button1" runat="server" Width="200px" Text="Show Panel" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server">
This is within the Panel.
</asp:Panel>
I add the jquery path in the Site.Master page within the section:
<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
How can I get the script to run from Site.Master page?
Thanks.
Try the following code:
<script type="text/javascript">
$(document).ready(function () {
$("[id$=Button1]").on("click",function (e) {
$("[id$=Panel1]").slideDown();
return false;
});
$("[id$=Button2]").on("click",function (e) {
$("[id$=Panel1]").slideUp();
return false;
});
});
</script>
i am trying to enable a checkbox in my checkboxlist. The only thing that does not work in my solution is to remove the disabled attribute from the span in IE9, it works in FF:
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function enablebut() {
$('#CheckBoxList1_0').removeAttr('disabled');
$('#CheckBoxList1_0').closest('span').removeAttr('disabled');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<button onclick="enablebut();">enable</button>
<div>
<asp:CheckBoxList ID="CheckBoxList1" Enabled='false' runat="server">
<asp:ListItem Text="een"></asp:ListItem>
<asp:ListItem Text="twee"></asp:ListItem>
</asp:CheckBoxList>
</div>
</form>
</body>
</html>
Add type="button" attribute to prevent the submit (postback).
<button type="button" onclick="enablebut();">enable</button>
Or
<input type="button" onclick="enablebut();" value="enable"/>
I think instead of passing a function through javascript, you should write the following code inside document.ready function since you are using jQuery
$(document).ready(function () {
$('#CheckBoxList1_0').attr('disabled','');
})
EDIT: with whole page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#CheckBoxList1_0').attr('disabled','');
})
</script>
</head>
<body>
<form id="form1" runat="server">
<button type="button">enable</button>
<div>
<asp:CheckBoxList ID="CheckBoxList1" Enabled='false' runat="server">
<asp:ListItem Text="een"></asp:ListItem>
<asp:ListItem Text="twee"></asp:ListItem>
</asp:CheckBoxList>
</div>
</form>
</body>
</html>
Its not wroking in IE8, here is the below code
<asp:CheckBoxList ID="chkList" runat="server" Enabled="false" >
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
</asp:CheckBoxList>
<asp:Button ID="btnFoo" runat="server" Text="Test" />
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#<% = btnFoo.ClientID %>').click(function () {
//var targetValue = 2;
var items = $('#<% = chkList.ClientID %> input:checkbox');
for (var i = 0; i < items.length; i++) {
//alert(i);
//if (items[i].value == targetValue) {
items[i].checked = true;
// break;
//}
}
$('#<%= chkList.ClientID %> input:checkbox').removeAttr('disabled'); return false;
})
});