leaflet remove layer from event - events

please help me! It's my simple code:
var сluster = new L.MarkerClusterGroup();
сluster.addTo(map);
var obj = L.marker([56.34265, 30.523397]);
сluster.addLayer(obj);
Why this code:
сluster.removeLayer(obj);
successfully removes obj from cluster, but this:
obj.on('click', function(){
сluster.removeLayer(obj);
});
don't removes on click

Try:
сluster.on('click', function (a) {
сluster.removeLayer(a.layer);
});

Related

How should I save an element in CasperJS

I want to save an element in a variable.
This is my code
var casper = require("casper").create();
var data = "";
casper.start("http://www.naver.com",function(){
data = require('utils').dump(this.getElementsAttribute("#name","cy"));
});
casper.run();
This doesn't work!
If I remove (data =) part, then it makes a log in cmd...
But, I didn't even used this.echo !!
Selector #name doesn't actually exists in www.naver.com
It is too long, so I just used #name for a replacement.
I think you are missing some basic idea about CasperJS... I write a small sample code for you to illustrate extracting data by css selector:
var casper = require("casper").create();
var data;
casper.start("http://stackoverflow.com/users/6571228/cute-developer",function() {
data = casper.evaluate(function () {
return document.querySelector('#user-card > div > div.row.col-content > div.col-left.col-8.about > div.bio > p').textContent;
})
}).then(function () {
casper.echo("result:\n" + data);
});
casper.run();
Output:
$ casperjs evaluate2.js
result:
I wanna be a best Korean woman developer.
Feel free to leave a comment here if you still got some questions about CasperJS...

Problems with multiple dropzone instances

I try to insert two dropzones (http://www.dropzonejs.com/), but I always get "Uncaught Error: Dropzone already attached."
Here is my Code. Can anybody help me.
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#DropzoneTarget_1").dropzone({url: "...."});
$("#DropzoneTarget_2").dropzone({url: "...."});
});
Thanx and greeds
I experienced the same issue if running the same code multiple times.
Prevent this error by destroying the Dropzone object instance, so only 1 instance exists at a time.
if (myDropzone1 != undefined) {
Dropzone.forElement("#DropzoneTarget_1").destroy();
}
var myDropzone1 = $("#DropzoneTarget_1").dropzone({url: "...."});
Maybe you have 'dropzone' class on yours '#DropzoneTarget_1' and '#DropzoneTarget_2'. Remove it and your code will work.
If you need default styles just config yours dropzones with
Dropzone.options.dropzoneTarget1 = {/*option:value*/}
Dropzone.options.dropzoneTarget2 = {/*option:value*/}
Remove "dropzone" class didn´t work, but this solved my problem
$(document).ready(function () {
Dropzone.autoDiscover = false;
$(".dropzone").each(function () {
new Dropzone($(this).get(0), {url: "...."});
});
});
Thanks for your help.

Jquery -> prototype translate

Can anyone help me translate this to prototype
var btn = $('#onestepcheckout-button-place-order');
var btnTxt = $('#onestepcheckout-button-place-order span span span');
var fewSeconds = 10;
btn.click(function(){
btn.prop('disabled', true);
btnTxt.text('Even geduld A.U.B.');
btn.addClass('disabled');
setTimeout(function(){
btn.prop('disabled', false);
btnTxt.text('Bestelling plaatsen');
btn.removeClass('disabled');
}, fewSeconds*1000);
});
Prototype is confusing the sh*t out of me
Try this:
var btn = $('onestepcheckout-button-place-order');
var btnTxt = $$('onestepcheckout-button-place-order span span span')[0];
var fewSeconds = 10;
Event.observe(btn, 'click', function(){
btn.setAttribute('disabled', 'disabled');
btnTxt.innerHTML = 'Even geduld A.U.B.';
btn.addClassName('disabled');
setTimeout(function(){
btn.removeAttribute('disabled');
btnTxt.innerHTML = 'Bestelling plaatsen';
btn.removeClassName('disabled');
}, fewSeconds*1000);
});
I haven't tested it though.
I'm not going to give you the direct copypasta snippet for your problem but you only probably just need to do the following swaps:
$(selector) with $($$(selector))
prop to attr
addClass to addClassName
I'm omitting one more replacement so you can look for it yourself, for added challenge! Protip: search google for "Prototype to jQuery equivalent". So many resources!
Alternatively, you can just use jQuery in jQuery.noConflict mode and wrap the above in a jQuery closure.
(function($) {
// your code above goes here.
})(jQuery)

jquery each on new elements not working

$('.collapse').each(function() {
var title= $(this).siblings('.accordion-heading').find('a');
$(this).on('show hide', function (e) {
if(!$(this).is(e.target))return;
title.parent().toggleClass('active', 300);
title.parent().hasClass('active') ? $('input.party').prop('value', '') : $('input.party').val(title.siblings('.delete').prop('id'));
var id = title.siblings('.delete').prop('id');
var data = {id: id};
$.post("times.php", data, function(result) {
if(title.parent().hasClass('active')){
$('.times').html('');
} else {
$('.times').html($.parseJSON(result));
}
})
})
})
So I am adding a new accordion-group to my html by adding a new party and I wan't all this to work on the newly added elements as well. I didn't find topics that could help me since it is a bit more specific than any random each function (I think).
This future elements thing is new to me, so I would appreciate some explanations or a good link to a place other that the jquery website which I already checked.
Thank you for your time!
Basically what I want to do this replace $(this).on('show hide', function (e) { with something like $(document).on('show hide', $(this), function (e) {. What I just wrote doesn't work though.
If it is just about the event handler, then you can use event delegation to capture the event on dynamically created elements as well.
There is not reason why you have to use .each here, so just omit it:
$(document.body).on('show hide', '.collapse', function() {
var title = $(this).siblings('.accordion-heading').find('a');
if(!$(this).is(e.target))return;
// rest of the code...
});
this will apply on any new objects matching selector
jQuery(document).on('show hide', '.accordion-heading a', function(event){
...
});

Using XPath with CasperJS QuerySelectorAll not working

For some reason when I try running the following code:
var casper = require('casper').create();
var x = require('casper').selectXPath;
var links = [];
casper.start('http://www.website.com');
function getLinks() {
var links = document.querySelectorAll(x('//*[#id="horizontalList"]/li[#class="paddingRight6"]/a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href')
});
}
casper.then(function() {
links = this.evaluate(getLinks);
this.echo(links);
}
casper.run();
Returns a null object, but when I use the very same xpath selector in conjunction with the thenClick method, everything works fine and the url changes. Why on earth is that?
So, it turns out that the querySelectorAll method doesn't actually support XPath. In fact it doesn't come from casperjs at all, and is supported by the browser, which is why it accepts CSS3 selectors, and not XPath. It was tough for me to figure that out so I figured I would put this up in case anyone else had this problem. You have to use CSS3 selectors for this within casperjs so the line:
var links = document.querySelectorAll(x('//*[#id="horizontalList"]/li[#class="paddingRight6"]/a');
Needs to be changed to:
var links = document.querySelectorAll('ul#horizontalList li.paddingRight6 a');
Happy hacking
The below function works for me with Xpath.
function getLinks() {
var links =__utils__.getElementsByXPath('//*[#id="horizontalList"]/li[#class="paddingRight6"]/a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href');
});
}

Resources