cropper is not a function on is not a function - javascript

I'm trying to make use of cropper plugin by fengyuanchen but meeting quite an impossible error
I constantly get into Uncaught TypeError: canvas.cropper is not a function even though I already tried everything I searched in your guide and even issues but I couldn't solve it. I try to initialize a cropper in canvas when my button is clicked, like this
$('#crop-mode').click(function(e){
var canvas=$('#image-display canvas')[0];
var options={
viewMode:0,
dragMode:'crop',
aspectRatio: NaN,
preview:'.extra-preview',
responsive:true,
cropBoxMovable: true,
cropBoxResizable: true,
autoCropArea:0.8
};
canvas.cropper(options);
canvas.on({
'build.cropper': function (e) {
console.log(e.type);
},
'built.cropper': function (e) {
console.log(e.type);
},
'cropstart.cropper': function (e) {
console.log(e.type, e.action);
},
'cropmove.cropper': function (e) {
console.log(e.type, e.action);
},
'cropend.cropper': function (e) {
console.log(e.type, e.action);
},
'crop.cropper': function (e) {
console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
},
'zoom.cropper': function (e) {
console.log(e.type, e.ratio);
}
});
});
I'm completely in vain
There is also another error: canvas.on is not a function
I don't know why. I already include jQuery 3.1

From the jQuery docs:
Attach an event handler function for one or more events to the selected elements.
Now, canvas after var canvas=$('#image-display canvas')[0]; is not a selected element. It's the first property of the selected element. $() will return a selected element (if found, obviously), but $()[0] is something completely else. Drop the [0].

First, make sure you have the library loaded with jquery:
<script src="/path/to/jquery.js"></script>
<script src="/path/to/cropper.js"></script>
Cropper is a jquery extension, thus instead of:
var canvas=$('#image-display canvas')[0];
do:
var canvas=$('#image-display canvas');

Be sure to download the correct package with
npm install cropper
Please don't use this
npm install cropperjs
as Cropper.js is not a jQuery plugin.

This will work definitely >> after following every step correctly as mention in link-https://www.npmjs.com/package/ngx-image-editor .
do only this.>>> goto your angular node module find >>>ngx-image-editor/esm5/ngx-image-editor.js >>> here you can import>>>import {default as Cropper} from 'cropperjs'; and refresh your node module and save ...

Even if you are with jQuery you have to import the cropper library file,
<script src="/plugin/cropper/cropper.js"></script>
<script src="/plugin/cropper/jquery-cropper.js"></script>
<link href="'/plugin/cropper/cropper.css'" rel="stylesheet" type="text/css"/>
Remember! You still have to have jQuery above this all.

Related

Summernote v0.7.0 on change callback issue

Having a simple set up for summernote.
<div id="summernote">data-here</div>
$('#summernote').summernote({
height: 200, // set editor height
focus: true,
callbacks // any callbacks didn't worked, onChange, onBlur etc..(any tip on how to add proper callbacks here)
});
I tried to make jquery code to catch on change event of my summernote, like:
$('#summernote').on("summernote.change", function (e) {
# Problem here when deleting (keyboard backspace, calls twice)
-some code here-
}
My problem with the summernote.change is that when deleting text/content using keybord's backspace, the callback (on change) triggers twice instead.
Thus my inside function runs twice too.
Any idea on this guys, Thanks in advance.
I tried to recreate the issue. But it works fine for me.
$(document).ready(function() {
$('#summernote').summernote({
height: 200, // set editor height
focus: true,
callbacks: {
onInit: function() {
console.log('Summernote is launched');
},
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
}
}
});
$('#summernote').on('summernote.change', function(we, contents, $editable) {
console.log('summernote.change', contents, $editable);
});
});
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
<div id="summernote">data-here</div>
Note: You should use either of the events onChange in callbacks or summernote.change not both.
As I know, it’s a known issue (https://github.com/summernote/summernote/issues/2888), but nobody tried to fix it.
So, I use it like this :
var mySec = 100;
var myEvent;
$('#summernote').on("summernote.change", function (e) {
clearTimeout(myEvent);
myEvent = setTimeout(function(){
console.log(e) // do something!
}, mySec);
});
I hope this will help you :)

jQuery Cropper Plugin: Keep Image on top-left on zoom event

I'm using this awesome plugin "Cropper" to upload Images of a specific size.
So far, evertything works fine, but:
When I call:
function moveImageToZero() {
$("#target").cropper('moveTo',0,0);
}
from a button click or inside the
on('ready') event of the cropper element like this
$("#target").on('ready', function () {
moveImageToZero();
});
the canvas DOES move to the top-left corner.
Anyway, calling the 'moveTo' function from inside an Event-Handler of a cropper element:
$("#target").on('zoom',function () {
moveImageToZero();
});
nothing actually happens.
Functions are invoked properly and do not throw errors or exceptions.
Does someone have a solution for this?
I'm trying to keep the Image/Canvas always fixed to the top-left corner.
Any help is highly appreciated!
Try this:
$("#target").on('ready', function () {
moveImageToZero(this.cropper);
});
function moveImageToZero(cropper) {
cropper('moveTo',0,0);
}
I'm not sure it works, but when I used cropper last time, I used native js cropper lib, and code looked like that:
const cropper = new Cropper(imageEl, {
aspectRatio: this.aspectRatio
background: false,
rotatable: true,
zoomable: !!this.aspectRatio,
movable: false,
checkCrossOrigin: false,
crop: (e) => {
// on cropp event
},
ready: function () {
self.cropper = this.cropper; // so I use it outside in my function/class
}
});

Javascript CallBack with same function name in multiple pages

My objective is to perform Auto-Complete feature of the same context in multiple pages/Views, for same input having the same class name (i.e. Client Name to be auto complete for many pages like Create and Edit View and others).
Since I need to call the jquery's autocomplete() in each page, I had written in
Views\Shared_Layout.cshtml
page of my project so the auto complete feature will available where required. The code I had written in _Layout.cshtml is as follows:
<script>
$(document).ready(function () {
//common
$('.form-control.salescode').autocomplete({
minLength: 4,
source: '#Url.Action("GetAccountManager", "AccountManager")',
select: callBackSalesCodeLookUp
});
});
</script>
Then any View (Create or Edit) which requires, the auto-complete feature have this code called:
<script>
function callBackSalesCodeLookUp(event, ui)
{
event.preventDefault();
var selectedArr = ui.item.value.split("|");
var accountManagerID = selectedArr[0];
var accountManagerName = selectedArr[1];
$('.form-control.salescode').val(accountManagerID);
}
</script>
However, when I ran the project, I am getting an error for pages which have not having the following code, which is as expected:
function callBackSalesCodeLookUp(event, ui)
{
event.preventDefault();
var selectedArr = ui.item.value.split("|");
var accountManagerID = selectedArr[0];
var accountManagerName = selectedArr[1];
$('.form-control.salescode').val(accountManagerID);
}
The error I am getting, is in Chrome as :
jquery-3.1.1.js:3855 Uncaught ReferenceError: callBackSalesCodeLookUp
is not defined
at HTMLDocument. (Login?ReturnUrl=%2FAccountOpeningRegister%2FCreate:393)
at mightThrow (jquery-3.1.1.js:3570)
at process (jquery-3.1.1.js:3638)
I want to less the code, and which is the reason I made up something like this. I will be glad to know if there is any better way of coding this.
Thank You
Check if the function exists in the window before calling it.
<script>
if (typeof callBackSalesCodeLookUp == 'function') {
$(document).ready(function () {
//common
$('.form-control.salescode').autocomplete({
minLength: 4,
source: '#Url.Action("GetAccountManager", "AccountManager")',
select: callBackSalesCodeLookUp
});
});
}
</script>

Jquery ui Resizable handle not working in append element function

I'm using jQuery UI Resizable, and I will use custom handles. To do that, I follow this answer but I get same problem like this, so I try their answer but still not working. Can someone help to make this working? This is my fiddle problem https://jsfiddle.net/suiko/155zzw2p/3/
$(document).on({mouseenter: function (e) {
var elmnt_col = $(this);
$(elmnt_col).append("<div class='overlay' id='overlay-column'><div class='overlay-menu-action' id='overlay-menu-column'><div class='overlay-label' id='overlay-label-column'>Column</div></div></div>");
$(elmnt_col).find('#overlay-column').append("<div class='resize-handle ui-resizable-handle ui-resizable-e' id='right-resize-handle'></div>");
$(elmnt_col).resizable({
handles: {
e: '#right-resize-handle'
}
});
}, mouseleave: function (e) {
$("#overlay-column").remove();
}}, ".custom-column");

Adding jQuery code to wordpress

I am trying to add the following code to Wordpress but it doesn't seem to work. The same code in a fiddle works.
Please help.
$(".box").hover(
function (e) {
$('.box').not(this).addClass('grey')
}, // over
function (e) {
$('.box').removeClass('grey')
} // out
);
You have to wrap it in the noConflict mode. Like:
jQuery(function($){
// Your jQuery code here, using the $
});
See: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
So, that would boil down to
jQuery(function($){
$(".box").hover( function (e) {
$('.box').not(this).addClass('grey');
}, // over
function (e) {
$('.box').removeClass('grey');
} // out
);
});

Categories