JQuery - cannot read property 'Editor' of undefined - javascript

I'm trying several WYSIWYG HTML5/JQuery editors. However, with both Bootstrap WISWYG and Summernote, I get 'cannot read property 'fn' of undefined' or 'cannot read property 'Editor' of undefined. I'm just using the standard files out there on GitHub. Anyone familiar with these errors using JQuery plugins?
EDIT
I'm now trying Bootstrap WISWYG
Within my body I have
<div id="editor">Editor</div>
In my js, I have
$(document).ready(function() {
$('#editor').wysihtml5();
});
However, the error I get is:
Cannot read property 'Editor' of undefined (line 157)
Line 157:
var editor = new wysi.Editor(this.el[0], options);
JSFiddle: http://jsfiddle.net/MgcDU/8125/
EDIT 2
I forgot to include one JS file. However, after including it I get a new error:
Uncaught TypeError: Cannot read property 'firstChild' of undefined
The lines of code that the error refers to:
if (isString) {
element = wysihtml5.dom.getAsDom(elementOrHtml, context);
} else {
element = elementOrHtml;
}
while (element.firstChild) <<<Error

The thing is you are using a DIV element instead of a textarea there are also dependencies missing. Checking the Bootstrap WYSIHTML5 page it says:
Dependencies:
bootstrap-wysihtml5.js
bootstrap-wysihtml5.css
wysihtml5
Twitter Bootstrap
Then your document should look something like:
<!DOCTYPE html>
<header>
<title>HTML5 Editor</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Of course place sources in your own server, do not leech bandwidth -->
<script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.io/lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://jhollingworth.github.io/src/bootstrap-wysihtml5.css">
</header>
<body>
<textarea class="editor"></textarea>
<script type="text/javascript">
$(document).ready(function(){
$('.editor').wysihtml5();
});
</script>
</body>
For further reference, please check: Wysihtml5 #Usage

"cannot read property 'fn' of undefined"
usually means that the script does not have script being loaded into DOM. You might are missing jQuery file? I have often noticed that it is becoming a practice for jQuery scripts to be loaded right in the bottom of HTML, right before
</body>
But, it always works so well if I loaded only one Jquery file in header meanwhile the rest of other jquery plugin scripts loaded in the bottom of the html file.

Related

'$' was used before it was defined .hover

I'm trying to get a background gif to play when I hover over a link, and reset and play as you hover over it again.
It works exactly as I want it in this jsFiddle.
When I write my code up in Brackets I get this warning -> $' was used before it was defined. $("#hover").hover(function () {
I have included the Javascript in the head of my HTML like:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="main.js"></script>
<head>
The HTML, CSS and JavaScript are the same as in the jsFiddle.
Checked in browser also, doesn't work. i get this warning ---> imain.js:10 Uncaught ReferenceError: $ is not defined at main.js:10 My page in its entirety can be seen here. jepen84.github.io/github.io
You get the error because jQuery does not load.
To load jQuery, you used:
<script type="text/jquery" src="jquery-3.2.1.js"></script>
jQuery is not a programming language. It's solely a javascript library providing some convenient features.
In your <script>-tag, change type="text/jquery" to type="text/javascript" and it will load the file.

Uncaught TypeError: $(...).datepicker is not a function(anonymous function)

I found few answers on stack overflow but still cant resolve my problem.
I am running on Django but I dont think it is relevant for this error.
I try to make work my date picker java script but I am getting the error
1:27 Uncaught TypeError: $(...).datepicker is not a function(anonymous function) # 1:27fire # jquery-1.9.1.js:1037self.fireWith # jquery-1.9.1.js:1148jQuery.extend.ready # jquery-1.9.1.js:433completed # jquery-1.9.1.js:103
jquery-2.1.0.min.js:4 XHR finished loading: POST "https://localhost:26143/skypectoc/v1/pnr/parse".l.cors.a.crossDomain.send # jquery-2.1.0.min.js:4o.extend.ajax # jquery-2.1.0.min.js:4PNR.findNumbers # pnr.js:43parseContent # contentscript.js:385processMutatedElements # contentscript.js:322
This is all my scripts :
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dateinput').datepicker({ format: "yyyy/mm/dd" });
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#extra-content").hide();
$("#toggle-content").click(function(){
$("#extra-content").toggle();
});
});
</script>
any feedback will be very appreciated
What went wrong?
When you include jQuery the first time:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
The second script plugs itself into jQuery, and "adds" $(...).datepicker.
But then you are including jQuery once again:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
It undoes the plugging in and therefore $(...).datepicker becomes undefined.
Although the first $(document).ready block appears before that, the anonymous callback function body is not executed until all scripts are loaded, and by then $(...) (window.$ to be precise) is referring to the most recently loaded jQuery.
You would not run into this if you called $('.dateinput').datepicker immediately rather than in $(document).ready callback, but then you'd need to make sure that the target element (with class dateinput) is already in the document before the script, and it's generally advised to use the ready callback.
Solution
If you want to use datepicker from jquery-ui, it would probably make most sense to include the jquery-ui script after bootstrap. jquery-ui 1.11.4 is compatible with jquery 1.6+ so it will work fine.
Alternatively (in particular if you are not using jquery-ui for anything else), you could try bootstrap-datepicker.
The error is because you are including the script links at two places which will do the override and re-initialization of date-picker
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dateinput').datepicker({ format: "yyyy/mm/dd" });
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
So exclude either src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
or
src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"
It will work..
if you are using ASP.NET MVC
Open the layout file "_Layout.cshtml" or your custom one
At the part of the code you see, as below:
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
#Scripts.Render("~/bundles/jquery")
Remove the line "#Scripts.Render("~/bundles/jquery")"
(at the part of the code you see) past as the latest line, as below:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
This help me and hope helps you as well.
You just need to add three file and two css links. You can either cdn's as well.
Links for the js files and css files are as such :-
jQuery.dataTables.min.js
dataTables.bootstrap.min.js
dataTables.bootstrap.min.css
bootstrap-datepicker.css
bootstrap-datepicker.js
They are valid if you are using bootstrap in your project.
I hope this will help you.
Regards,
Vivek Singla
Including more than one reference to Jquery library is the reason for the error Only Include one reference to the Jquery library and that will resolve the issue
We need to add the declaration of our jQuery plugin under interface with the same name. We don’t want to mess with the jQuery source code, so we need to create our own type definition file. I’m using React/typescript so just follow these steps
Open nodemodules and go into types folder.
Go into jQuery and open jQuery.d.ts fileand add the below code into interface JQuery<TElement = HTMLElement> extends Iterable {
daterangepicker(options?: any, callback?: Function) : any;
I’m declaring the daterangepicker function (this is the actual function that the API expose) and setting all its arguments as any ( You can go further and use specific types, but in this case, I will keep it simple ).
Now when the typescript compiler sees our interface, it will merge it with the jQuery interface and the error is gone.
That’s all!
This error is occur,because the function is not defined.
In my case i have called the datepicker function without including the datepicker js file that time I got this error.

Uncaught TypeError: undefined is not a function initslider-1.js:1 (anonymous function) AmazingSlider

I have gone through the other posts also. But I didn't get any solution finally I have my own question.
I am trying to add Jquery image slider into my project, I am using Codeigniter Platform as I am running this slider stand alone it is working fine. But not in CI it throws error Uncaught TypeError: undefined is not a function initslider-1.js:1
(anonymous function). Anybody will suggest me any help.
see following are the js files which I am including.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>
Click here to see the ref.
try removing one of the jQuery script-tags.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="sliderengine/jquery.js"></script> -->
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>
Why are you using two jQuery at the same page. try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>

how to resolve Uncaught TypeError: Object #<Object> has no method 'corner' in jquery?

I am using jquery round corner plugin in lifray theme in order to add round corner functionality in all kind of browsers, including IE6 to IE8. i have included the jquery round corner plugin in portla_normal.vm like this :-
<head>
<title>$the_title - $company_name</title>
<script type="text/javascript" src="/html/js/jquery/jquery.js"></script>
<script type="text/javascript" src="$javascript_folder/jquery_roundcorner.js"></script>
<script type="text/javascript" src="$javascript_folder/jquery.corner.js"></script>
$theme.include($top_head_include)
</head>
This is my jquery_roundcorner.js file, when i see on console of the browser getting the error in this file like below.
$(document).ready(function() {
$('#navigation li').corner("round 6px");
$('#navigation a').corner("round 6px");
});
I am geting following error on browser console:
Uncaught TypeError: Object #<Object> has no method 'corner'.
Can any one help me how to resolve this?
<head>
<title>$the_title - $company_name</title>
<script type="text/javascript" src="/html/js/jquery/jquery.js"></script>
<script type="text/javascript" src="$javascript_folder/jquery.corner.js"></script>
<script type="text/javascript" src="$javascript_folder/jquery_roundcorner.js"></script>
$theme.include($top_head_include)
</head>
alter the load javascript order!
you have to make sure the jquery plugin is first loaded!
in my jquery_roundcorner.js i have replaced the above code with the following code. Actually in velocity file also $ is used, there may be conflicts. so lastly i tried this, its working now.
var jq=$.noConflict();
jq(document).ready(function(){
alert('hello alert1 ');
jq('#navigation li').corner("round 6px");
jq('#navigation a').corner("round 6px");
alert('hello alert3 ');
});

Jquery "$.uniform is undefined" error

I am using uniformjs to style some html element but when i try to update an element such as a check box using
$.uniform.update('input[type=checkbox]');
I get the error
$.uniform is undefined
any one else have an idea how to solve this?
I have both jQuery and the uniform.js added to the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.uniform.min.js" type="text/javascript" charset="utf-8"></script>
What's weird is this worked when it was a regular HTML page and stopped working when i made it into a ASP.NET page and added custom form validators. Perhaps there is some clash?
Reason for this error is browser cant identify $.uniform which can be because of following two reasons:
You have not included uniform.js file to your page, check if a similar looking lines is present in your markup.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
You are referencing it before its been loaded (have you included it at the end of the page, after the markup?)
You have to load all your dependencies and the current library itself to make it work.
For your css:
<link rel="stylesheet" href="uniform.default.css" media="screen" />
For your javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
Please, check this JSFiddle that I've build for you, showing uniformjs working.

Categories

Resources