How do I write some client-side script to access a HTML element when .NET has generated the element's ID at runtime?
At present I have this in my ASPX:
<asp:Content ContentPlaceHolderID="middle_area" runat="server">
<asp:Image ID="ImageBarChart" runat="server" />
</asp:Content>
<script>
var oImage = document.getElementById('ctl00_middle_area_ImageBarChart')
</script>
It it working at present, but I doubt it is reliable!
ClientID: Documentation
You would then do <%= ImageBarChart.ClientID %> to put it in your javascript
You can write <%= ImageBarChart.ClientID %>.
Try this:
<asp:Content ContentPlaceHolderID="middle_area" runat="server">
<asp:Image ID="ImageBarChart" runat="server" />
</asp:Content>
<script>
var oImage = document.getElementById('<%= ImageBarChart.ClientID %>')
</script>
You can use the ASP.NET elements Client Id like so:
<%= ImageBarChart.ClientID %>
Related
I don't see any date picker in ASP.NET controls.
Anyone knows how to add it in my my webpage.
I am using VB as my programming language.
Result
I would like to thank everyone who posted the solutions, code and links which helped me to achieve this thread goal. Based on all of the source the below code is the one which works nicely.
Content1
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
And in
Content2
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
Add this inside your [head] Tag.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/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.4/jquery-ui.js"></script>
and use this jquery function in aspx page inside [script] tag
$(function () {
$("#datepicker").datepicker();
$("#datepicker").change(function () {
$('#btnRefresh').click();
});
and add one textbox for display selected date. and button for getting the date in sever side. like this code
<input type="text" id="datepicker" runat="server" clientidmode="Static" />
<asp:Button ID="btnRefresh" runat="server" onclick="btnRefresh_Click" ClientIDMode="Static"
Text="Refresh" AutoPostback="true" style="display:none;"/>
use this onclick event to do want you want..
You're right, there isn't anything built-in.
Personally I would recommend the jQueryUI datepicker - it's reliable and flexible, and it's javascript based, so it doesn't matter what your server-side language is.
See https://jqueryui.com/datepicker/
Once you've added the required references to jQuery and jQueryUI, in your aspx page, add a script section like this:
<script type="text/javascript" language="javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
and then add the "datepicker" class to any textbox controls on the page where you want to use the datepicker:
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
P.S. I can also recommend most of the rest of the jQueryUI package, there are some useful items in there which can speed up your development time and make your apps look nicer and be more usable.
You can implement a datepicker on your page with the help of the Calendar control, using javascript on your page. Try this links for simple methods to do it:
http://www.vbknowledgebase.com/?Id=150&Desc=ASP.Net-DatePicker-using-Calendar-Control
http://www.codedigest.com/Articles/ASPNET/247_DatePicker_Control_in_ASPNet.aspx
http://www.aspsnippets.com/Articles/DateTimePicker-control-for-ASPNet-TextBox-Example.aspx
I want to execute JavaScript when document is ready without much syntax overhead. The idea is to use Site.Master and ContentPlaceholder:
<script type="text/javascript">
$(document).ready(function () {
<asp:ContentPlaceHolder ID="OnReadyScript" runat="server" />
});
</script>
and in inherited pages just write plain code:
<asp:Content ID="Content3" ContentPlaceHolderID="OnReadyScript" runat="server">
$("#Login").focus();
</asp:Content>
It works fine but Visual Studio complains and gives warnings.
Warning in master page is Expected expression at the line <asp:ContentPlaceHolder.
In inherited pages warning is Could not find 'OnReadyScript' in the current master page or pages.
I tried using Writer.Write in master page to render script tag and wrapping code:
<% Writer.Write(#"<script type=""text/javascript"">$(document).ready(function () {"); %>
<asp:ContentPlaceHolder ID="OnReadyScrit" runat="server" />
<% Writer.Write(#"});"); %>
but page rendering terminates after opening script tag is rendered. Html basically ends with
<script type="text/javascript">
How can I make it work?
This is a bug in Visual Studio's syntax highlighting.
Try
<%= #"<script type=""text/javascript"">$(document).ready(function () {" %>
<asp:ContentPlaceHolder ID="OnReadyScript" runat="server" />
<%= #"});" %>
I'm trying to be able to place the error message when using jQuery validation to a asp.net label if the textbox is empty.
please advice how to modify my code to get that!!
here is my code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#aspnetForm").validate({
errorContainer: "#<%=TextBox1 %>",
errorLabelContainer: "#<%=TextBox1 %> #<%=Label1 %>",
wrapper: "li", debug: true,
submitHandler: function() { alert("Submitted!") }
})
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<p style="height: 313px">
<asp:TextBox ID="TextBox1" runat="server" class="required"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label" ></asp:Label>
</p>
</asp:Content>
I think
"#<%=TextBox1 %>"
means write the value of the default property of the textbox, which is the .Text property.
You should use
"#<%=TextBox1.ID %>"
and
"#<%=TextBox1.ID %> #<%=Label1.ID %>"
No to disqualify what you are doing now but I can't wrap my head around why you add a new plugin like JQ validation when you have a simple case of a required field validator which is a built in .net control
I have that works fine without Script manager. but if I add script manager that getting an error: sys undefined.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Block-ui-pageload.aspx.cs" Inherits="Block_ui_pageload" %>
<%# Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divConfirmBox1">
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<input type="button" value="Delete" onclick="showDeleteConfirmation('<%# Eval(" CategoryId")=CategoryId") %=% />')" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divConfirmBox" style="display:none">
Are you sure you want to delete this record?
<input type="button" value="No" />
</div>
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
$(function () {
$('#divConfirmBox1').block({ message: $('#divConfirmBox') });
});
$(function () {
$('#divConfirmBox').click(function (event) {
$('#divConfirmBox1').unblock();
});
});
</script>
initially during the page load . I am blocking the screen(PAge). once the user clicks the button the page is unblocked.
is there anything wrong in the Syntax whiling working with Ajax script manager
You should move the jQuery code into $(document).ready. I suspect you're preventing certain scripts from loading appropriately by running the code inline rather than in .ready. I'm running the same version of jQuery (but not UI block) with ScriptManager in 3.5 right now, no prob.
AJAX is not a thing - its a bunch of technologies put together to achieve asynchronous communication. Yes, you have some JavaScript coding in there, but none of them actually do anything 'ajaxian' - a good example of something really AJAX-style would be an validation of a (registration) form or something like that. You'd set some oberservers for some fields and validate them whilst the user is still making inputs on other fields...
I think what you're looking for is noConflict. It's been a while since I've used asp.net ajax but if I'm not mistaken, there is a $ function defined.
In the web.config we need to add the follwing code within tag.
then the problem was solved
every thing was working fine
Over in this question, Scott writes that it is possible to get the current HTML for what's written in the FCKeditor by using FCKeditorAPI.__Instances['instanceNameHere'].GetHTML();
Could someone provide step-by-step instructions on how to accomplish this in an ASP.NET page? All I currently have so far in the .aspx file is this:
<%# Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<%# Page Title="" Language="C#" ... %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Create a new piece</h2>
<form id="form1" runat="server">
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">
</FCKeditorV2:FCKeditor>
<input id="Submit1" type="submit" value="Submit" runat="server" />
</form>
</asp:Content>
In javascript
Well you can do this here:
<script type="text/javascript">
var oEditor = FCKeditorAPI.GetInstance(’IDFromFCKEditor’);
oEditor.Events.AttachEvent( 'OnSelectionChange', function() {
document.getElementById("PreviewDiv").innerHTML = oEditor.GetHTML(true);
}) ;
</script>
Source http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/JavaScript_API