This was working on Friday, and now isn't. I've got this at the beginning of a UserControl:
<link type="text/css" href="/App_Themes/css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#MainContent_ucSearchControl_dpPickupStart").datepicker();
$("#MainContent_ucSearchControl_dpPickupEnd").datepicker();
});
</script>
And further down, this:
<td><asp:TextBox id="dpPickupStart" runat="server" style="width: 65px"/></td>
<td><asp:TextBox id="dpPickupEnd" runat="server" style="width: 65px"/></td>
Which results in (in the rendered page) input controls with:
name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupStart" id="MainContent_ucSearchControl_dpPickupStart"
name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupEnd" id="MainContent_ucSearchControl_dpPickupEnd"
And yet, every time the page loads, I get an Object Expected javascript error which points to the $(document).ready location.
What am I missing?
EDIT: Firebug is reporting that:
$ is not defined
[Break On This Error] $(document).ready(function () {
Being a user control you cannot guarantee that the relative path to your JS files will always be correct depending on the location of the parent page in the file system hierarchy.
Therefore change you JS script tags as follows to use the Control.ResolveUrl method which converts a URL into one that is usable on the requesting client.
<script src='<%=ResolveUrl("~/Scripts/jquery-1.5.1.min.js")%>' type="text/javascript"></script>
<script src='<%=ResolveUrl("~/Scripts/jquery-ui-1.8.11.custom.min.js")%>' type="text/javascript"></script>
Or reference from a CDN for added performace bonus of caching.
jQuery hosted on google
jQuery UI hosted on google
That error is caused due to Jquery not available. I think Swaff's solution should work(+1). Check if you have the Jquery-1.5.1.min.js file is available in Scripts folder of your solution. Or it could also be that your Scripts folder is renamed.
HTH.
Related
I want to loop through all the referenced Javascript files on an ASP.Net page.
In other words, I want to enumerate all the
<script src="a.js" type="text/javascript"></script>
<script src="b.js" type="text/javascript"></script>
<script src="c.js" type="text/javascript"></script>
tags on a page.
Of course, I can't do this because they are not actually visible to ASP.Net. They do not have a runat="server" tag on them. And, of course, if you add a runat="server" tag to them, then ASP.Net is going to actually try to run the javascript on the server (perhaps the only time where runat="server" has a real use!)
Am I out of luck here? I think I am, but it is worth asking.
Are they all in the <head> of the page? If so make the head runat=server, then I'm pretty sure they become part of the Page.Header.Controls collection
The error i get seems to be centered around jquery finding what it's in (window,document, etc.). Right now i'm just trying to implement the jQuery datepicker. the project has a master page, where i placed my script references.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.8.5.custom.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.datePicker.js"></script>
<script type="text/javascript" src="Scripts/date.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
in my aspx file for the page i am trying to implement the date picker, the code looks like this.
i placed this in the header place holder
<script type="text/javascript" charset="utf-8">
$(window).ready(function () {
$("#<%=this.tbTestPass.ClientID %>").datePicker();
});
</script>
This is the asp control i am trying to apply the datepicker to.
<asp:TextBox ID="tbTestPass" runat="server" Width="120px"></asp:TextBox>
I have tried document and window for jquery context, but they both throw the same error. What noob mistake am i making?
Verify Jquery(.js) file folder path is resolved properly from the application as well as in the IIS.
i had the same situation, i had Jquery.js file under Scripts folder(Scripts/Jquery.js).
but when i went to iis, i am not able to see the Scripts folder.
later i came to know there there is an Script virtual directory in IIS when is taking precedence over the local Script folder.
found that linking to http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js fixed the object missing. pointing to a local file was not working. not sure why, but this will do and suit my needs i think.
I've been trying to find out what's going on with my page for more than an hour.. What I'm trying to do here is to call a javascript function when the page loads, but for some reason it says "object required" then its pointing to my onload event in the body tag. This is what I have..
<head id="Head1" runat="server">
<!-- JAVASCRIPT -->
<script src="JScript/jquery-1.2.6.pack.js" language="javascript" type="text/javascript"></script>
<script src="JScript/stepcarousel.js" language="javascript" type="text/javascript"></script>
<script src="JScript/Carousel.js" language="javascript" type="text/javascript"></script>
<script src="JScript/TopNav.js" language="javascript" type="text/javascript"></script>
<!-- CSS -->
<link href="Style/audiorage.css" rel="stylesheet" type="text/css" />
<link href="Style/carousel.css" rel="stylesheet" type="text/css" />
<link href="Style/tabs.css" rel="stylesheet" type="text/css" />
<title>Audio Rage - Home</title>
</head>
<body onload="javascript:TopNavPageInitialize();">
<form id="form1" runat="server">
<!-- HIDDENFIELDS & SCRIPTS -->
<input type="hidden" value="Main Navigation" id="hdnTabActiveOnLoad" />
and I have this files in this structure
localhost/mytest/JScript/jquery-1.2.6.pack.js
localhost/mytest/JScript/stepcarousel.js
localhost/mytest/JScript/Carousel.js
localhost/mytest/JScript/TopNav.js
localhost/mytest/mypage.aspx
My TopNav.JS has this function
function TopNavPageInitialize()
I also get "Unexpected call to method or property access." in my carousel but I'm not really worried about it I think if I can fix this maybe that 2nd error that I'm getting can be fixed. Thanks!
I'm confused. What am I missing. Thanks.
Since you're using jQuery:
$(document).ready(function(){
// Your code here
});
use that or
$(window).load(function () {
// run code
});
that--depending on what you're going for.
Ready just means the dom is ready but images aren't loaded. Load means everything is done loading.
Of course, it sounds like you've got other issues. But this is a much better option than using inline onload events.
like?
$(window).load(function() {
alert('x');
});
$(window).load(function funcName() {
alert('x');
});
both says object expected
It looks to me like your scripts aren't loading properly.
To really see what's going on use either Firebug in Firefox, or the developer tools (press F12) in IE8. (If you're still using IE7/6 google IE Developer Toolbar - it will be a start).
Once you're using one of those, you can then see what scripts are being loaded, or whether you're getting 404's or similar for them.
Also, as an aside, you don't need the
language="javascript"
attributes any more.
I am using ASP.NET 3.5 with MasterPages. My master page has the script references to jquery and jquery UI. My web page that uses the master page has a script reference for a custom javascript file for that page. This javascript file has jquery calls in it (i.e. document.ready --> set up input boxes as calendars).
When I run the website in debug from Visual Studio, the input boxes are not set as calendars. However, if I copy the script from the external file and include it in a script block in the web page, the input box becomes a calendar.
I also have an element in the child page (not sure if that makes a difference). I have referenced the external javascript file in the ScriptManager and outside of the ScriptManager and neither work.
Why does jQuery not work in an external javascript file when the jQuery script reference resides in the master page?
Any help would be appreciated.
Thanks
MASTER PAGE CODE
<head id="Head1" runat="server">
<title>Customer Agreement Lifecycle Management System </title>
<link rel="stylesheet" type="text/css" href="~/calms.css" />
<link href="css/ui-lightness/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-1.3.2.min.js") %>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-ui-1.7.1.custom.min.js") %>"></script>
</head>
CHILD PAGE CODE
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script src="<%=ResolveUrl("~/js/rule.js") %>" type="text/javascript"></script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
I want to thank everyone for their suggestions but I made a "bone-headed" mistake. The tags were mistakenly still in the external js file. Once removed, everything works as expected. I apologize for taking up everyone's time (and somewhat embarrassed).
Thanks.
Is the external script include below the jquery script? Maybe it's the order in which the scripts are being loaded and run...
Are you sure the reference to the jQuery file in the child object appears in the head of the HTML document?
If not, put a ContentPlaceHolder in the tag and put the references you need in each child page.
I'm trying to add a script reference to jQuery in my master page so that it will work for any page. It currently looks like this
<script type="text/javascript" src="jquery.js"></script>
The problem is that the path is always relative to the executing aspx page so this will only work if the "jquery.js" file is located in the same folder. To make it work I have to change the line to:
<script type="text/javascript" src="../../jquery.js"></script>
This is obviously less than ideal because it will only work for pages that are two levels deep from the root folder. If I try the following, IIS throws an error about an unexpected character.
<script runat="server" type="text/javascript" src="~/jquery.js"></script>
Any ideas?
EDIT: I forgot to mention as well that the script MUST be in the head tag
The current top answer throws a "ASP.NET Ajax client-side framework failed to load." error when I add it to my master page. Its thrown from javascript and not the .Net compiler. If I move the ScriptManager to the head section where it should be I get a compile error about the ScriptManager needing to be inside a form tag.
The third answer throws a "Illegal characters in path." exception from the compiler
EDIT 2: When I add that line to my head tag I get this error from IIS.
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
SOLVED: I took the edited response from the answer below and put it inside an asp:ContentPlaceHolder element
You could use a ScriptManager:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/jquery.js" />
</Scripts>
</asp:ScriptManager>
EDIT: If you absolutely need this in your <head> section, you could do something like:
<head>
<script type="text/javascript"
src="<%= Page.ResolveClientUrl("~/jquery.js") %>"></script>
</head>
EDIT 2: According to the comments, if you are observing that
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
you may need to change the above to use the data-binding syntax:
<head>
<script type="text/javascript"
src="<%# Page.ResolveClientUrl("~/jquery.js") %>"></script>
</head>
Try <%# instead of <%= in Master page under head section
<script type="text/javascript"
src="<%# ResolveUrl("~/YourScriptFolder/YourJQueryOrJavascript.js") %>">
</script>
Then in Code Behind of Master page under Page_Load Event
Page.Header.DataBind();
Now you are good to go with either jQuery and JavaScript as well as CSS just you need to change your path in ResolveUrl which file you want to handle CSS, JavaScript, jQuery.
If you're not going to us asp:ScriptManager or absolute paths then you can do it like this:
<script runat="server" type="text/javascript"
src='<%= Page.ResolveUrl("~/jquery.js") %>'></script>
I do not know whether you guys found the solution to your problem or not. I was facing the same problem and going nuts to figure out why do I get "jQuery is undefined" error on the plugins i use. I tried all the solutions i get from the internet but no luck at all.
But, suddenly something splash on my mind that may be the script files should be in order. So, I moved the jquery referece to first position and everything start working like charm.
Remember guys, if you're using any plugins with jquery, make sure you use the folloing order of setting reference to those fiels.
reference to the jquery library
reference to the other subsequent plug-in libraries and so on...
e.g.:
"script src="js/jquery-1.3.2.min.js" type="text/javascript"...
"script src="js/jqDnR.min.js" type="text/javascript"...
"script src="js/jquery.jqpopup.min.js" type="text/javascript"...
"script src="js/jquery.bgiframe.min.js" type="text/javascript"...
Always make sure you must put the jquery reference to first and then the subsequent libraries.
Hope, this solves your problem especially when you use with MasterPages. Its very strange that it works no matter what order you use when you don't use MasterPages but when you do, then it somehow requres the proper order.
Good luck and happy coding,
Vincent D'Souza
Look at How to Run a Root “/”. This should fix all your issues regarding unresolved .js file paths. You basically reconfigure the VS Dev server to run your application as localhost:port/ as opposed to the regular localhost:port/application name/ making name resolution work the same way as it does on IIS.
For absolute path of the file for any page use it following:
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/jquery.js") %>"></script>
<script type="text/javascript" src="/full/path/to/jquery.js"></script>
If this script tag goes directly to the browser, then you unlikely can substitute your site's root there. At least not on the server. So you can:
Deploy site to the root of domain
name and use absolute paths
(simplest solution).
Insert this
link with server control.
Preprocess resulting HTML before
sending it to the client (with
HttpResponse.Filter).
You can also use <base> HTML tag:
<base href="http://www.domain.com"></base>
and then all the links in header section are relative to base address:
<script type="text/javascript" src="scripts/jquery.js"></script>
It's often useful when you have multiple publishing destinations, like local dev web server, demo server, etc. You just replace that base URL.
<body>
<script language="javascript" src='<%= this.ResolveClientUrl("~/full/path/to/jquery.js") %>' type="text/javascript"></script>
</body>