We Keep Coding

Why jquery-jcrop is destroying my Leaflet map when I use the destroy() function?

I've created a very simple functional example with jcrop that creates a square on an image:
$('#container').Jcrop({
onSelect: function(c){
alert(JSON.stringify(c));
this.destroy()
}
})
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
<img src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg" id="container">
In this example, the function this.destroy() works as I expect, it destroys the shadow layer that jcrop creates on my image. So far, everything is fine. However, when I try to do the same thing with leaflet, it doesn't work at all. Here is what I've tried:
var mymap = L.map('container', {
center:[-23.553670644165493, -46.648217439651496],
zoom:18,
maxZoom:19,
zoomControl:false,
attributionControl:false
});
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);
$('#container').Jcrop({
onSelect: function(c){
alert(JSON.stringify(c));
this.destroy()
}
})
#container{
height: 100%;
position: absolute;
z-index: 0;
}
<meta charset="UTF-8">
<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />
<!-- jQUERY JCROP-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
<div id="container" style="height:100vh; width: 100vw"></div>
I followed the same logic from my first sample, but after selecting a part of the map, the function destroy() is also destroying the Leaflet map (that doesn't happen when it's an image). Does anyone know what could be happening? Could it be a conflict that jcrop has with Leaflet and what I'm trying to do will not be possible without modifying the libraries?

I ended up solving it with a workaround that creates a different div element that uses the same space that the Leaflet map is using... The solution is the following:
var mymap = L.map('container', {
center:[-23.553670644165493, -46.648217439651496],
zoom:18,
maxZoom:19,
zoomControl:false,
attributionControl:false,
renderer: L.canvas()
});
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);
const id = "aux-container"
createFakeMap(id)
$('#'+id).Jcrop({
onSelect: function(c){
alert(JSON.stringify(c));
this.destroy()
}
})
// auxiliary function
function createFakeMap(id){
const div = document.body.appendChild(document.createElement('div'));
document.body.appendChild(div);
div.setAttribute("id", id);
div.style.height = '100vh';
div.style.width = '100vw';
}
<meta charset="UTF-8">
<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />
<!-- jQUERY JCROP-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
<div id="container" style="height:100vh; width: 100vw; position: absolute; z-index:1"></div>
I've created the div element using Javascript instead of HTML because the destroy function is going to destroy this element all the times that I execute it. With Javascript, I can create it again dynamically when I need it, while not destroying my map and its state.

It looks like you're attaching Jcrop and Leaflet to the same #container element. It looks like calling Jcrop.destroy() is removing everything associated with that element.
Can you use two separate elements for these two libraries? Maybe attach Leaflet to a wrapper or parent element of the one that you're using to call Jcrop.
Here's my version on using two separate elements for the map and the Jcrop component.
<html>
<head>
<meta charset="UTF-8">
<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />
<!-- jQUERY JCROP-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
<style type="text/css">
.wrapper {
position: relative;
height:100vh;
width: 100vw;
}
#cropper {
height:100%;
width: 100%;
}
#map {
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.jcrop-holder {
z-index: 600;
background: transparent !important;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="cropper"></div>
<div id="map"></div>
</div>
<script>
var mymap = L.map('map', {
center:[-23.553670644165493, -46.648217439651496],
zoom:18,
maxZoom:19,
zoomControl:false,
attributionControl:false
});
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);
$('#cropper').Jcrop({
onSelect: function(c){
console.log(c);
console.log(c.x);
console.log(c.y);
console.log(c.w);
console.log(c.h);
this.destroy();
}
})
</script>
</body>
</html>

How to output result of codemirror in iframe?

I am trying to make a HTML code player in which you enter html and get result in iframe. it works good if i only use textarea and output in iframe. but if i use code mirror and try putting coremirror value into iframe it shows me code in iframe instead of showing me result.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="codemirror/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" href="codemirror/codemirror/theme/neo.css">
<script src="codemirror/codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/codemirror/mode/css/css.js"></script>
<script src="codemirror/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="codemirror/codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/codemirror/addon/hint/css-hint.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/addon/hint/show-hint.css">
<style>
body {
background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
</head>
<body>
<div id="codeeditor"></div>
<iframe>Example</iframe>
<button>RUN</button>
<script>
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "<html><body><h1>Helloworld</h1></body></html>",
mode: "css",
theme: "neo",
extraKeys: {"Ctrl-Space": "autocomplete"}
});
$("button").click(function(){
$("iframe").contents().find("body").html($("#codeeditor").html());
})
</script>
</body>
</html>

Do not take editor contents using jQuery, instead use codemirror method getValue like this:
$("button").click(function(){
$("iframe").contents().find("body").html(editor.getValue());
})

Resolve conflict between multiple YouTube Playlist plugin instances

I have a page which uses a custom YouTube playlist plugin found here https://github.com/Giorgio003/Youtube-TV
When I have a single instance of the player on a page it works great, but if I try to add two or more players, only one will render.
This is a sample page with two playlists:
<!doctype html>
<html lang="en">
<head>
<title>YouTube TV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/ytv.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body{
background: #eee;
margin: 0;
padding: 0;
}
.test-title{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="container">
<div class="col-md-9 col-lg-11">
<div>
<h4 class="test-title">Testing Responsive YouTube Playlist</h4>
</div>
<div id="responsive1"></div>
<div id="responsive2"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="src/ytv.js"></script>
<script>
var apiKey = 'ThisIsAValidKey';
window.onload = function(){
window.controller = new YTV('responsive1', {
playlist: 'PLaK7th3DkkqgBtr94FWKF5HNlbNIHWkww',
responsive: true
});
};
window.onload = function(){
window.controller = new YTV('responsive2', {
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};
</script>
</body>
</html>
I moved the API key out of ytv.js into a global variable.
// Set apiKey as global var
// var apiKey = 'ThisIsAValidKey';
Other than that, the js is the same as found here.
How can I modify this plugin to allow multiple instances?
Update:
I have also renamed the window vars with no change in result.
window.controller1 = new YTV(...);
window.controller2 = new YTV(...);
Solution:
As inferred from the marked answer below
window.onload = function(){
$('#responsive1').ytv({
playlist: 'PL6x-m6zFmZvueGe7XnT0z1Qlsn2zUs5_F',
responsive: true
});
$('#responsive2').ytv({
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};

By looking at the Youtube code, I could see it already handles multiple jQuery instance.
if ((typeof jQuery !== 'undefined')) {
jQuery.fn.extend({
ytv: function(options) {
return this.each(function() {
new YTV(this.id, options);
});
}
});
}
I created a quick fiddle: https://jsfiddle.net/pj8kpbzw/
Please check the console as it prints two instances.

pickmeup plugin of jquery not working

I want the calendar to show as soon as I click the input textbox. I searched everywhere but couldn't get any help. I would be really appreciated if you will help me as I am a beginner.
Here is my code:
<link href="CSS_File/StyleSheet.css" rel="stylesheet" />
<link href="CSS_File/pickmeup.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
input.pickmeup({ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>

I've gone through with your code and this library, now the mistake you are making is you are using this library as jQuery plugin, this is not jQuery based plugin, that's why if you want to initialize the calendar with your input then use it like this: pickmeup('input', <optionObj>);,
Also one of your line is not making any kind of sense, as your requirement is to display the calendar when user click on input, and the line of code which you written :
$('.Reservation .demo').pickmeup({ flat: true })
first of all there is no demo class under Reservation dom, and another thing is as per the pickupme framework, if you want to show a calnder on UI (which will replace your UI element with the calander) then you need to initilize it same not as jquery plugin, below example
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
pickmeup('.Reservation',{ flat: true });
});
</script>
This is my asp.net code
<div class="Reservation"></div> <!-- it will replaced as calander on UI -->
BTW, here your Code, which I refined and it is started showing calendar:
Solution:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
pickmeup('input',{ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>

I hope this will reach your requirement.. apply css for styles.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

I am wondering why I cannot override jquery function onRegionOver. The WAMP index.html file is shown below

I am wondering why I cannot override jquery function onRegionOver. The WAMP index.html file is shown below. Please tell me how I can use the WAMP console to debug this problem.
The jquery plugin I am trying to make work on my Windows 7 Internet Explorer IE7 browser here is http://jvectormap.owl-hollow.net/.
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jquery-jvectormap-1.1.1.css"
type="text/css" media="screen"/>
<script src="jquery.js"></script>
<script src="jquery-jvectormap-1.1.1.min.js"></script>
<script src="us-aea-en.js"></script>
</head>
<body>
<div id="USA-map" style="width: 1200px; height: 800px"></div>
<script language="javascript">
function processOrder() {
var pluginContainer = $("#USA-map");
pluginContainer.vectorMap(
{map: 'us_aea_en'},
{onRegionOver: function(event, code){
alert('Hello');
}
});
}
</script>
<script type="text/javascript" src="foo.js"></script>
</body>
</html>

.vectorMap() function accepts a single object with multiple parameters, while you're passing 2.
Presumably the call should look like:
pluginContainer.vectorMap(
{
map: 'us_aea_en',
onRegionOver: function(event, code){
alert('Hello');
}
}
);
References:
http://jvectormap.com/examples/world-gdp/
http://jvectormap.com/documentation/javascript-api-v1/jvm-worldmap/