<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="App_Themes/jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script src="Scripts/jquery-1.3.2.min.js"type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript" >
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
</script>
<form id="form1" runat="server">
<div>
<table border="1px" >
<tr>
<td><asp:Label ID="Label4" runat="server" Text="Text"></asp:Label></td>
<td><asp:TextBox ID="TextBox2" runat="server" ></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="Date"></asp:Label></td>
<td><asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
<input id="myButton" type="button" value="button" />
</td>
</tr></table>
</div>
</form>
</body>
</html>
this is my webform design code..
click function wat written in side script tag is not working...!! Anything wrong.??
.datepicker( "show" ) -->> Call up a previously attached date picker. but I can't see where you initialize your date picker.. call it like this first... $("#datepicker").datepicker();
$(function() {
$("#datepicker").datepicker();
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
});
try to uncomment this line ($("#datepicker").datepicker();) on the demo
demo
Add your script to the document.ready(...) function.
One reason it is not working is that when your script is executed, the myButton element has not yet been added to the DOM, and is thus not found. When using jquery, you should generally wrap your javascript code in the $(document).ready(..) to be sure the DOM is fully loaded when your code is invoked. Try the following:
<script type="text/javascript" >
$(document).ready(function(){
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
});
</script>
from the documentation:
show
Signature:
.datepicker( "show" )
Call up a previously attached date
picker.
so first of all you need to attach it!! eg:
$(document).ready(function() {
var textBox = $('#<%= this.datepicker.ClientID %>');
var icon = $('#myButton');
var datepicker = textBox.datepicker();
icon.click(function() {
datepicker.datepicker('show');
});
});
your you might go with the icon-trigger
Look at the source code that has been generated. Is the id still called myButton and datepicker ? Often the id's are rewritten by asp.net unless specified otherwise and you are using version 4.
You will need to use the client id of the controls, e.g
$("#<%=datepicker.ClientId%>").datepicker("show");
Related
This is my JS for the datepicker.
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#txtage").datepicker();
});
});
</script>
This is my asp server side control.
<asp:TextBox ID="txtage" runat="server" ReadOnly="true"></asp:TextBox>
I want when user reach on this textbox then one calender should open from which they can select age and that date should display into this textbox.
Please tell me how can i do this?
You have several problems. Your ID doesn't match. You're using txtage in one place and txtcity in another. Is that a copy paste error?
If you're using nested templated controls (or a master page), your ID's on the client side are likely different than on the server side. You can change how the ID's on the client side are generated like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.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>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#txtage").datepicker();
});
});
</script>
<td><asp:TextBox ID="txtage" runat="server" ClientIdMode="static" /></td>
You also haven't shown your code for making sure jQuery and jQuery UI are loaded on the page.
I just checked and this one works perfectly :
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="testDatePicker.Default" %>
<!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.11.4/themes/smoothness/jquery-ui.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>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="script.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="myTextBox"></asp:TextBox>
</div>
</form>
</body>
</html>
script.js
$(function() {
$("#myTextBox").datepicker();
});
I may advice you to remove the ReadOnly proprety since the datepicker will try to modify the textBox but not so sure.
Just add .ClientID with the textbox id as follows.
JS
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#<%=txtage.ClientID%>').datepicker();
});
});
Asp.Net takes a property that is TextMode That loads a calendar, which has to be equal "Date" - TextMode="Date".
Example:
<asp:TextBox ID="txtage" TextMode="Date" runat="server" ReadOnly="true"></asp:TextBox>
I need to open a page like a modal dialog .I find an exemple on net but it doesn't work.
In the main page I have this code:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Button Text ="Add New Course" runat="server" ID="btnAddCourse" OnClientClick="showPanel('dialog');return false;"/>
<script type="text/javascript">
function showPanel(panelID) {
$panel = $('#' + panelID);
$.ajax({
url: "/AddNew.aspx",
type: "GET",
dataType: "html",
async: false,
data: { "param": "abcd"
},
success: function (obj) {
// obj will contain the complete contents of the page requested
// use jquery to extract just the html inside the body tag
$content = $(obj).find('body').html();
// then update the dialog contents with this and show it
$panel.html($content);
$panel.dialog();
}
});
}
</script>
<div id="dialog">
</div>
</asp:Content>
When I click the button I need to open the page below .I receive an error that tell that element $ is not recognized.I don't know exactly who is element panel .Must I add a panel control ,but where ?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="AddNew.aspx.cs" Inherits="WebApplicationDialog.AddNew" %>
<!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>Add New Course </title>
</head>
<body>
<form >
<div id="div1">
<table>
<tr><td colspan="3"> <asp:Label ID="lblCourse" runat="server" Text="Add New Course"></asp:Label></td></tr>
<tr><td colspan="3"> </td></tr>
<tr>
<td style="width:40%"> <asp:Label ID="lblName" runat="server" Text="Course Name" ></asp:Label></td>
<td style="width:20%"> </td>
<td style="width:40%">
<input id="txtName" type="text" />
</td>
</tr>
<tr>
<td style="width:40%"> <asp:Label ID="lblDescription" runat="server" Text="Description" ></asp:Label></td>
<td style="width:20%"> </td>
<td style="width:40%">
<input id="txtDescription" type="text" />
</td>
</tr>
<tr><td colspan="3" style="float:right">
<input value ="Save" id="btnSave" type="submit" /> </td></tr>
</table>
</div>
</form>
</body>
</html>
Can somebody help me with this code ,to make it works ?
Thanks
It looks like you are trying to use JQuery to load a page content into a panel but if I'm reading your code right you may not have included the JQuery library, you need to include this line of code in the <head> of your html code. You are also using JQueryUI dialog and will need to reference the JQueryUI library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
For Example
<head>
<title>Page Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<head>
EDIT: I also notice you are using the dialog, which is in JQuery UI, pleasse make sure you reference JQuery UI toolkit as well
EDIT: Have stripped your code into jsFiddle: http://jsfiddle.net/EhPk7/1/
this seems to work for me
You need to add jquery lib reference.
At the top of a page:
<script src="http://code.jquery.com/jquery-1.8.2.min.js"/>
Include jQuery.
Change this line -> $panel = $('#' + panelID); to -> $panel = $('#div1'); and see if it works.
Consider adding jQuery script references on your page, above the jQuery Code that you are using.
Also, add reference jQuery UI
Download jQuery
There is a boolean property/setting called modal on the jQueryUI dialog, this will create a modal-type dialog.
I myself use this:
d.dialog({
autoOpen: true,
closeOnEscape: false,
closeText: '',
modal: true,
draggable: false,
resizable: false,
width: (window.document.width * 0.75),
dialogClass: 'popup loading',
title: 'title'),
});
when you wrap this sort of function in the
$(document).ready(function() {
})
it should popup the moment the DOM is ready..
I'm trying to reset my form using javascript on client side. The code looks like this:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 type="text/javascript" >
function Reset() {
TextBox1.text = "";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Reset()" />
</div>
</form>
</body>
</html>
This of course isn't working, I get the error that Button1 is undefinded. I tried looking control's name within browser (by viewing page source) and using that instead of its ID but that didn't work either.
you need to get the value using getElementById
var mybutton= document.getElementById('Button1');
mybutton.value = ""
I advise you to use jQuery for your javascript code. It's a standard anyway.
After you reference jQuery, you may rewrite your JavaScript as follows:
<script type="text/javascript" >
function resetForm() {
$("#<%=TextBox1.ClientID %>").val("");
}
</script>
If you still do not want to use jQuery, then you need to access your element using its client ID like following:
<script type="text/javascript" >
function resetForm() {
document.getElemenyById("<%=TextBox1.ClientID %>").value = "";
}
</script>
Also, as #Jon pointed out, you need to either rename your OnClientClick value to resetForm() or rename your JavaScript function.
Here's what I have so far but thing aren't really working. (I dragged the jQuery.js file from the Solution Explorer to the area of my html.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SignUpFormTest._Default" %>
<!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.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//fade in the context of whatever is inside the div tag.
$('#name').fadeIn("slow");
});
</script>
</head>
<body bgcolor="#FFFFFF">
<p>
Note that this form doesn't actually do anything
except illustrate the Required Field Validator.
</p>
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<div id="name"><asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage='<img src="../Images/no.png">' runat="server" /></div>
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
<p>
Hint: Try submitting it before you enter something.
</p>
</body>
</html>
When validating the icon just pops up.
No fade in or anything. Also, I know my current solution is hacky, so I'd really like someone to tell me what I should do instead of a creating a DIV tag just for the purpose of one animation.
Make sure the reference to JQuery is valid and use this code:
$(document).ready(function() {
$('#name').hide().fadeIn("slow");
});
If I'm not mistaken, since the div is already visible in your case, jQuery will not fade it in. The hide() method ensures that the div is initially not visible and then fades in slowly.
$(document).ready(function() {
document.getElementById('valTxtName').onpropertychange = function(){
$('#name').fadeIn("slow");
}
});
I have a multiline textbox that by default, is set to ReadOnly. I would like a button on the page to change the control to allow it to be edited. I would like this code to run on the client side because the page renders slowly and I'd like to avoid the post back.
The problem I'm having is the javascript code that I wrote to remove the readonly attribute appears to have no effect. I posted a stripped down example that illustrates the problem for your review.
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" language="javascript">
function EnableEditing() {
var e = document.getElementById("<%=TextBox1.ClientID%>");
var result = e.removeAttribute("readonly");
alert(result);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div> </div>
<asp:TextBox ID="TextBox1" runat="server" ReadOnly="True" TextMode="MultiLine">test</asp:TextBox>
<input id="Button1" onclick="EnableEditing()" type="button" value="Remove RO" />
</form>
</body>
</html>
TextBox1 is the server side id,
try
var e = document.getElementById("<%=TextBox1.ClientID%>");
var result = e.removeAttribute("readonly",0);
or if you dont want the caseinsensitive search
var result = e.removeAttribute("readOnly");//note upercase Only
Use var e = document.getElementById("<%=TextBox1.ClientID%>");
Also, if you want to read the modified text on postback, you can't set the readonly attribute on the server control. You have to set it on the client only, as in: TextBox1.Attributes("readOnly") = "readOnly";