I should be sleeping but this is really bugging me. I can't get a simple javascript alert box to display in my asp.net project. Hopefully someone can see what I'm doing wrong. My test page is this:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="JSTest.aspx.cs" Inherits="Proj.JSTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Header" runat="server">
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" language="javascript" >
$(document).ready(function() {
alert("Working");
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Main" runat="server">
</asp:Content>
The masterpage is pretty standard as well. Here's the header part of it (which I figure is the key bit)
<head runat="server">
<title></title>
<%--<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> --%>
<link href="App_Themes/Default/Default.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="Header" runat="server">
</asp:ContentPlaceHolder>
</head>
I know I must be missing something obvious - probably just need sleep :D. But if anyone can see why this isn't working, that would be great!
Thanks!
Try putting it in another script tag, but without the src attribute.
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
alert("Working");
});
</script>
Or put it in a separate file and include the file using the src attribute.
<script type="text/javascript" language="javascript" src="myJSFile.js"></script>
You are encosing document ready inside the script tag which references jquery. Put that in another script tag like below.
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" language="javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Working");
});
</script>
Should be like...
<script src="Scripts/jquery-1.4.1.js" type="text/javascript" language="javascript" ></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Working");
});
</script>
When you got a bug in javascript code, Firebug and Web inspector will be your best friend.
You can see what's wrong in the page. It might that jQuery library not loaded, the produced HTML contains error, missing tags, etc.
Using Firebug or Web Inspector, you can know what is wrong in the page.
include that script within
<script type="text/javascript>
$(document).ready(function() {
alert("Working");
});
</script>
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 have a content page in ASP.Net web app.
In that I am trying to use Jquery UI Autocomplete. But it does not work. What is wrong in this page? Here is my code:
<asp:Content ID="Content3" ContentPlaceHolderID="contentMainBody" runat="server" >
<link href="Atlas_Css/menu.css" rel="stylesheet" type="text/css" />
<link href="Atlas_Css/jquery.simplyscroll.css" rel="stylesheet" type="text/css" media="all" />
<link href="Atlas_Css/Jquery%20UI.css" rel="stylesheet" type="text/css" />
<script src="JS_AtlasFly/jquery.js" type="text/javascript"></script>
<script src="Scripts/Validations.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery.simplyscroll.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery.simplyscroll.min.js" type="text/javascript"></script>
<script src="JS_AtlasFly/js-image-slider.js" type="text/javascript"></script>
<script src="JS_AtlasFly/accordian.pack.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery-1.9.1.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function ()
{
var availableTags = [ <%= PassFname %> ];
$("#txtFname" ).autocomplete({
source: availableTags
});
}
</script>
<div id="testDiv" runat="server">
<asp:Label ID="lblName" runat="server" Text="F Name"></asp:Label> <asp:TextBox ID="txtFname" runat="server"></asp:TextBox>
</div>
NOTE: the server side variable, PassFname, I am populating in code behind .
In a normal asp.Net page , without using master page (within the same project), Autocomplete works fine.
What is wrong in this page? is it because of master page?
What is the solution for this?
Since the same code behind code works in another page, I am not including it here. I have checked it here also, the string variable is populated on page load. Only autocomplete is not binding.
Any help will be appreciated.
I found the solution to this. I used the clientId of the TextBox directly in
Javascript.
like this:
$("#ctl00_contentMainBody_txtFname").autocomplete({
source: availableTags
});
that solved the binding of autocomplete with the textbox's id.
BTW, using <%=txtFname.ClientID%> doesnot solve the issue. Instead the page stops rendering.
So I used the client Id from page source, and it works.
Thanks to all
I'm trying to create razor #section in one of my views, using umbraco:Macro tag, in order to add scripts/styles specific for each view into head tag.
My current code looks like this(head section of master page):
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="/css/foundation.min.css">
<script type="text/javascript" src="/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/js/responsiveslides.js"></script>
<script type="text/javascript" src="/js/js.js"></script>
<umbraco:Macro runat="server" language="cshtml">
#if(IsSectionDefined("JSIncludes"))
{
#RenderSection("JSIncludes")
}
#if(IsSectionDefined("CSSIncludes"))
{
#RenderSection("CSSIncludes")
}
</umbraco:Macro>
</head>
and this(actual section in view):
<asp:Content ContentPlaceHolderId="ContentPlaceHolderDefault" runat="server">
<umbraco:Macro runat="server" language="cshtml">
#section JSIncludes
{
<script type="text/javascript" src="/js/main_page.js"></script>
}
</umbraco:Macro>
But when i'm trying to open a page, i'm getting "Error loading MacroEngine script (file: )" error on top of my page.
Do anyone know the reason of this?
Would be great, if somebody knew how to add things like this properly.
Thanks in advance.
You don't need to use a razor macro to add page-specific script references, use a ContentPlaceHolder
Master page:
<head>
<asp:ContentPlaceHolder ID="PageScripts" runat="server" />
<asp:ContentPlaceHolder ID="PageStyles" runat="server" />
Content page:
<asp:Content ID="PageScript" runat="server" ContentPlaceHolderID="PageScripts">
<script type="text/javascript" src="/js/main_page.js"></script>
</asp:Content>
Reference
I follow this instruction: http://weblogs.asp.net/dotnetstories/archive/2011/07/01/a-simple-tutorial-on-asp-net-dynamic-data.aspx?CommentPosted=true#commentmessage
I have added the links to my ASP.NET Dynamic Data master page as follow:
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<link href="NewStyles/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
I add this code on the top of my DateTime_Edit.ascx.
<script type="text/javascript">
$(document).ready(function () {
$('#<%=TextBox1.ClientID %>').datepicker();
});
But it doesn't work. Any idea?
I used Page.ResolveURL() in src attribiute. Like this one:
<script src='<%=Page.ResolveURL("~/Scripts/jquery-1.7.2.min.js")%>' type="text/javascript"></script>
Check your Site.master file that the EnablePartialRendering value is false and not true
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false"/>
I have aspx page where only one text box will be a required field. I am using JQuery to validate it.
My problem is the client side validation is not working.
The head section of my page is
<script src="../JavaScript/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
<script src="../JavaScript/CandidateValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
checkRequiredInputs();
});
</script>
The CandidateValidation.js file contains
function checkRequiredInputs(){
$(".requiredField").validate({
rules:{
txtFName:{required: true}
},
messages:{
txtFName:"Name Required"
}
});
}
I have a CSS CLass lin my CSS File like
.requiredField
{
}
The Text box where for this input is
I need a suggestion or solution from you programmers,the most helpful I have ever found, from this helpful sites, waiting for your reply. Thanx in advance
For the code to work you will need to call validate() on the form containing your textbox.
For example:
[WebForm1.aspx]
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Validation.WebForm1" %>
<!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">
<link href="../Css/StyleSheet1.css" type="text/css" rel="Stylesheet" />
<script src="../JavaScript/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
<script src="../JavaScript/CandidateValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
checkRequiredInputs();
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server" clientidmode="Static" >
<asp:TextBox runat="server" ID="txtFName" />
</form>
</body>
</html>
[CandidateValidation.js]
function checkRequiredInputs(){
$("#form1").validate({
rules:{
txtFName:{required: true}
},
messages:{
txtFName:"Name Required"
}
});
}
Setting clientidmode="Static" on form1 will make it have same ID on client side so it can be referenced easily from jQuery.
If you press enter in txtFName TextBox to submit validation will be performed on the form: