ERROR: Kendo"Something" is not a function - javascript

So I am trying to convert my plain HTML/Javascript site (which works fine) into an ASP MVC4 project. What I do is get and XML and use and XSLT to transform. I litreally use the code from here to do that
In my _Layout.cshtml I use razor to load the resource
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
... things...
#Scripts.Render("~/bundles/kendoScripts")
#Scripts.Render("~/bundles/customScript")
#Styles.Render("~/Content/themes/Kendo")
#Styles.Render("~/Content/themes/customCSS")
my view that uses the layout is very straight forward, this is all that is in the page
#using Summ.ExtensionCode
#model SumMVC.Models.SummaryModel
#{
ViewBag.Title = "_Summary";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div data-role="content">
#Html.RenderXml(Model.ProgramFilename, Model.StylesheetFilename, Model.Parameters)
</div>
In #Scripts.Render("~/bundles/customScript"), is a JS file, renderpage.js that has this bit of code $(this).kendoDropDownList(); where this is a select element. But I am getting a error that .kendoDropDownList(); is not a function. The error from firebug: TypeError: $(...).kendoDropDownList is not a function and the errror from GoogleChrome Uncaught TypeError: Object [object Object] has no method 'kendoDropDownList'. It seems that in my bundle the JS file kendo.all.min.js is not begin loaded here is what is looks like
bundles.Add(new ScriptBundle("~/bundles/kendoScripts")
.Include("~/Scripts/kendoui/kendo.web.min.js")
.Include("~/Scripts/kendoui/kendo.all.min.js")
);
....
bundles.Add(new ScriptBundle("~/bundles/customScript")
.....
.Include("~/Scripts/SummaryScript/renderpage.js")
....
);
I am assuming that perhaps the code is being executed before kendo.all.min.js is done loading, but as you can see above renderpage.js is after kendo. Any ideas or insight?
UPDATE
I forgot to add that when I manually load the resource in the MVC project in the head tag
<script type="text/javascript" src="~/Scripts/kendoui/kendo.web.min.js"></script>
<script type="text/javascript" src="~/Scripts/kendoui/kendo.all.min.js"></script>
....
<script type="text/javascript" src="~/Scripts/ExecSummaryScript/renderpage.js"></script>
it works fine.
Update2
Turns out the Kendo JS file is not being loaded at all. I check the resource in the dev console and notice that it not even there.Upon closer inspection I notice that all resources are loaded except some .min.js files. There are a few loaded but some that are not loaded are jquery-ui-1.10.3.min.js, and jquery.browser.min.js.

I knew it was going to be something stupid. Turns out that it's a MVC4 gothcha. I had to rename my file. Appearently it did not like files with extension min.js I found the answer here

Related

Why I get error when I attach reference to js file?

I fill shame to ask this silly question but anyway I get this erorr:
Uncaught SyntaxError: Unexpected identifier
Any time that I add this ref:
<script src="../Scripts/ddd.js"></script>
to index.cshtml page.
Here is index.cshtml page:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../Scripts/ddd.js"></script>
</head>
<body>
<div>
Home
</div>
</body>
</html>
And here is ddd.js file:
(function () {
alert("ddd")
}());
UPDATE
I use asp.net core 2.2
Any idea why I get the error above?
please add reference like this
<script src="~/Scripts/ddd.js"></script>
In ASP.NET Core default root folder is always wwwroot folder. So you need to put your files under wwwroot folder. If you want to refer that file from a regular html file you can use '''
"../Scripts/ddd.js"
'''
However if you refer it in a cshtml page with razor code then you would need
'''
"~/Scripts/ddd.js"
'''
"~" points to root folder in razor syntax.

`Uncaught SyntaxError: Unexpected token <` when referencing existing javascript file

Important edit at bottom of some strange behavior.
I'm trying to include a javascript file into my html via a <script> tag and I'm getting the error Uncaught SyntaxError: Unexpected token <
In case it matters, I'm using the Velocity templating engine.
Any help is greatly appreciated!
Here is my directory structure.
Here is my index.vm file.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Velocity Demo</title>
</head>
<body>
<input type="text" onkeydown="filter(this)"></input>
#foreach ($person in $personList)
<div>
<h4>$person.name</h4>
</div>
#end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/filter.js"></script>
</body>
</html>
And here is the javascript file.
function filter(element) {
$.ajax({
url: '/updateFilter?filter=' + element.value,
success: location.reload(true),
error: location.reload(true)
})
}
Editing to add this image. For some reason this is the filter.js file when I inspect the sources in Chrome.
EDIT: For some reason, every request other than the one I have mapped to the controller, including filter.js, is returning the raw html from index.vm
You have an unnecessary closing tag for your element - pasting your html into plnkr highlights this.
I would also perform a "trial and error" process of elimination, as it may not be the inclusion of the JS file that is the cause.

coffeescript: suppress "ReferenceError"

Currently working through this tutorial on using Backbone.js with coffeescript.
Leveraging the following index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CoffeeScript, Meet Backbone.js: Part N</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript" src="./index.js"></script>
</head>
<body>
<header>
<h1>CoffeeScript, Meet Backbone.js: Part 1</h1>
</header>
</body>
</html>
which loads an index.js file after loading Backbone, jQuery, etc from a cdn. Hoping to work within a script.coffee file that I'd like to have automatically compile into the script.js file loaded by index.html above by running something like coffee script.coffee -c -w.
Trouble is, I'm getting ReferenceErrors when I try to run the above command on the following script.coffee file:
jQuery ->
class ListView extends Backbone.View
el: $ 'body'
initialize: ->
_.bindAll #
#render()
render: ->
$(#el).append '<ul><li>Hello, Backbone!</li></ul>'
list_view = new ListView
For instance:
ReferenceError: jQuery is not defined
...
because, clearly, jQuery is being loaded in the index.html file.
Is there a way to suppress the error reporting from the coffeescript compiler so that it just converts the code without the error?
The options must go before the file, e.g.:
coffee -cw script.coffee
Otherwise, it will try to run script.coffee right then and there as a Node.js script, passing it the options -c and -w. That's not what you want; if you want the CoffeeScript compiler to get the options, it's got to be before the file name.

Referencing JQuery correctly

I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.

How I can put mask Date and Time in TexBoxFor?

I'm working with ASP.Net MVC4 wiht view engine Razor. I like put mask date and time in TexBoxFor I installed for nugget jquery.maskedinput-1.3.min.js and add in the view
(document).ready(function () {
$("#FechaDen").mask("99/99/9999");
$("#HoraDen").mask("99:99:99");
});
But I have this error: Uncaught TypeError: Object [object Object] has no method 'mask'
How I can resolve this problem?
You seem to have forgotted to reference the jquery.maskedinput plugin in your page:
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.maskedinput-1.3.min.js")"></script>
Make sure that the path is correct and that the plugin is actually situated in this folder. Use the Network tab of a javascript debugging tool such as FireBug to ensure that there are no 404 errors with your script references.
Also make sure that you have added this script inclusion after jQuery. Be careful because in the ASP.NET MVC 4 Internet Project Template, the ~/Views/Shared/_Layout.cshtml file renders jquery as a bundle at the end of the DOM:
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
So if you are putting this reference inside your view make sure that this happens inside the scripts section:
#section scripts {
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.maskedinput-1.3.min.js")"></script>
<script type="text/javascript">
$("#FechaDen").mask("99/99/9999");
$("#HoraDen").mask("99:99:99");
</script>
}
Also notice that since this script is now at the end of the DOM I have gotten rid of the $(document).ready call which is no longer necessary (and which you got wrong in the code you have shown because you forgot to prefix it with a $).

Categories