I'm deploying some code to a website and when I do the JavaScript does not run. I get the error:
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object.
The code it is using is
#model MVCMasterDetail.DataAccess.cwwoLoadCurrentWorkOrderActualsResult[]
<script type="text/javascript">
$(document).ready(function () {
$(".grid-toggle").click(function () {
$(this).closest("table").find("tbody").show();
});
$(".hide-rows").click(function () {
$(this).closest("table").find("tbody").hide();
});
});
</script>
#Html.Partial("MasterDetailMasterPartial")
And what calls uses it is:
<td colspan="4"> Details<br/>Show- Hide</td>
Any help is appreciated.
Based off your comment in Ashley Ross's answer, it looks like your trying to add jQuery using a relative path. it also looks like you're using MVC. In MVC, the way you want to reference a file in html is:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")"></script>
Also, it doesn't matter if your script tag goes in the head tag or not. The only difference it makes is loading. By putting it in the head tag, you're telling the browser to download the js file before it begins to load the body, which can be nice, but can also increase page load times. For faster page download, you actually want to put your script tags towards the bottom of your body tag, which defers downloading the js file until after the rest of the page has loaded. This results in faster page load times, but can cause some funky behaviors if you aren't anticipating it.
You need to include jQuery before any other scripts. It sounds like you have something like
<script type="text/javascript" src="customScriptThatUsesjQuery.js"></script>
<script type="text/javascript" src="jquery-x.y.z.min.js"></script>
instead of
<script type="text/javascript" src="jquery-x.y.z.min.js"></script>
<script type="text/javascript" src="customScriptThatUsesjQuery.js"></script>
Check that it appears in your HTML source before any other scripts that use it.
you have to add reference to jquery lib in <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
Related
I've used this plugin with an html input and it worked with no problems,
however, when I try to implement using an asp.net textbox it doesn't work at all
Does someone know how can I implement it within a textbox from asp.net?
or maybe know if its possible to do so.
This is what I want to achieve using an asp.net textbox:
http://opensource.teamdf.com/number/examples/demo-as-you-type.html
Thank you so much, I really hope someone can enlighten me
UPDATE: code added.
asp.net control:
<asp:TextBox ID="txtNumberFormat" runat="server"></asp:TextBox>
References:
<script type="text/javascript" language="javascript" src="../../js/jquery.number.js"> </script>
<script type="text/javascript" language="javascript"src="../../js/jquery.number.min.js"></script>
JavaScript Code:
<script type="text/javascript">
$(function(){
$('#txtNumberFormat.ClientID').number( true, 2 );
});
</script>
Your jQuery is looking for a control that is literally named "txtNumberFormat.ClientID". You need
$('#<%= txtNumberFormat.ClientID %>').number( true, 2 );
so asp.net resolves the fully qualified client id inside your selector.
I have 3 java-script files in my project, I use ajax minifier to concate them with command,
copy bootstrap.js+space.txt+jquery-1.8.2.js + space.txt + one.js + space.txt many.txt
ren many.txt many.js
"C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\AjaxMin" many.js -o common.js
It creates common.js file, but when I add it in my page, it gives javascript error says,
$ is not defined, but I have already include jquery-1.8.2.js in common.js...
in my page I include it in head section with code,
<script src="js/common.js" type="text/javascript"></script>
when I do same for css file, it works...
can anyone give me good solution...?
You should include jquery before including common.js like,
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
Or in yours javascripts files do something like :
;(function(window, $, undefined) {
// your code and functions here
})(window, window.jQuery);
Trying to get my head around how to integrate fancyBox with an aspx c# website.
For example where does this code go:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
the Site.master page? or each individual .aspx file?
How about this one:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
I assume this goes in the html part:
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
Put this between the <head> tags on the master page.
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
I'd put this on your page
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
and then your link and images etc, where you need them.
You can place it on Master page one time, and there is no problem if you do not have any fancybox class on the page.
All the script code, go on master page, the html code can be anywhere (master or other pages that use the master).
When you have downloaded the fancybox it comes with a bunch of samples right click on the .html page and view the source that makes you easier how to use them.
Here is the demo for you
Ok, this is strange. I would hope it's something I'm doing wrong and not that MS has two technologies that simply don't work together. (UPDATE: See bottom of post for Script tag order in HEAD section)
I'm trying to use the dataView template and client-side validation. If I include a reference to:
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
by itself, the dataview template works fine. but if I put in the following references:
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
then I get the following error:
> Error: Type._registerScript is not a
> function Source File:
> http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjaxTemplates.js
> Line: 1
and:
> Error: Sys.get("$listings") is null
> Source File:
> http://localhost:12370/Listings Line:
> 76
Here's the code calling the dataview:
$(document).ready(function () {
LoadMap();
Sys.require([Sys.components.dataView, Sys.scripts.jQuery], function() {
$("#listings").dataView();
Sys.get("$listings").set_data(listings.Data);
updateMap(listings.Data);
});
});
I would really appreciate any help with this one.
Thanks!
UPDATE:
I've tried moving around the order of the last 4 script tags, but to no avail.
You need to ensure that your reference to "jquery.validate.min.js" is AFTER your reference to "jquery.min.js" (or whatever version of the jQuery library you are using). You haven't listed that in your code sample.
Well, I ended up getting jquery validation to work and it doesn't have any conflicts with Start.js. So my script tags end up looking like such:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
The strange thing is, I had to go find the MicrosoftMvcJQueryValidation.js file on the web in someone's example, as it wasn't included in the Scripts folder when I created the solution. Strange.
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Areas/CMS/Content/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/Areas/CMS/Content/js/jquery.jeditable.js"></script>
<script type="text/javascript" src="/Areas/CMS/Content/js/jeditable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".naslov_vijesti").editable('<%=Url.Action("UpdateSettings","Article") %>', {
submit: 'ok',
submitdata: {field: "Title"},
cancel: 'cancel',
cssclass: 'editable',
width: '99%',
placeholder: 'emtpy',
indicator: "<img src='../../Content/img/indicator.gif'/>"
});
});
</script>
</head>
This is head tag of site.master file. I would like to remove this multiline part from head and place it in jeditable.js file, which is now empty. If I do copy/paste, then <% %> part won't be executed. In PHP I would save js file as jeditable.js.php and server would compile code that is in <?php ?> tag. Any ideas how to solve this problem?
Thanks in advance,
Ile
In PHP I would save js file as jeditable.js.php and server would compile code that is in tag.
One thing to keep in mind here is that php is now forced to process that entire javascript file on every request. This is generally a "Bad Thing"TM, and it uses up server resources that could be spend elsewhere.
As Raj Kimal's answer already mentioned, what we do in ASP.Net to handle this in the most efficient way possible is have a short script defined inline with the page that does nothing but assign result of server code to variables. Do this before declaring other scripts, and you can then use these variables in those scripts directly. That way, you don't have to do any extra server work for your external javascript files.
I'll make one addition to Mr Kimal's answer. It's often best to enclose these variables in an object, to help avoid naming collisions. Something like this:
<head runat="server">
<script language="javascript">
var ServerCreated = {
ArticleAction:'<%=Url.Action("UpdateSettings","Article") %>',
OtherVar:'some server data'
}
</script>
</head>
Then your jeditable.js file would look like this:
$(document).ready(function() {
$(".naslov_vijesti").editable(ServerCreated.ArticleAction, {
submit: 'ok',
submitdata: {field: "Title"},
cancel: 'cancel',
cssclass: 'editable',
width: '99%',
placeholder: 'emtpy',
indicator: "<img src='../../Content/img/indicator.gif'/>"
});
});
Define your variable part as a js variable.
var foo = '<%=Url.Action("UpdateSettings","Article") %>';
and place it before the js reference. Then use the varible in your js file.
You can put the script inside an .aspx file and set the content type to text/javascript in the #page directive. You will still be able to use the code tags.
The cost of processing the entire javascript file every request can easily be mitigated by applying server side caching so that shouldn't be a problem. This can be configured in the #page directive as well.
You have a few options, but the key here is that if you need to use the <% %> syntax to get information you need to be in the context of an ASP.NET page.
You "could" move the actual function to an external file, and reference the JS, then add a small inline script block that called the function with two parameters, but that defeats the purpose of what you want.
The real question here, why have the overhead of an additional HTTP request for a single method?