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.
Related
I'm now using casperjs for web crawling. Almost everything is good, but I faced some trouble. First, my code is like below.
casper.start().each(SOME_URLS, function(self, URL) {
self.thenOpen(URL, function() {
self.then(function() {
var getDatas = function() {
var title = $('SOME_SELECTOR').map(function() {
return $(this).text();
}).get();
return {
title: title
};
}
data = self.evaluate(getDatas);
console.log(JSON.stringify(data));
});
});
}).run();
I want to get some data from webpage to 'data' variable. Sometimes data is perfectly good(on console.log), but sometimes, data is empty!
Why this happening? What did I wrong?
The problem is you cant call casper.start more than once. Your loop needs to inside the casper.start function or inside a casper.then
See this excellent SO answer to help you do this.
Basically only call casper.start once and place your loop inside a casper.then
I'm currently developing a firefox extension and I need to know when the user closed the browser , so I can call a function. I've searched firefox addon sdk documentation and I haven't found anything. Is there a solution to my problem?
require("sdk/system/unload").when(function(reason) {
if (reason === 'shutdown') {
handleShutdown();
}
if (reason === 'disable') {
handleShutdown();
}
});
tried this?
<script type="text/javascript">
$(document).ready(function(){
window.onbeforeunload = function() {
var msg =" If you're not interested please let us know what we can do to improve."
return msg;
} });
</script>
$('.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){
...
});
I have a few lines of jQuery codes that load external pages when the links are clicked.
$(document).ready(function() {
$(".link").click(function (e) {
e.preventDefault();
var $urlToLoad = $(this).attr('href');
$("#loadarea").load($urlToLoad, function(data){
$("#loading").fadeIn('fast').fadeOut('fast');
$("#loadarea").hide().fadeIn('slow');
return false;
});
});
});
This works fine. However, when I add this one single line of additional code, which is essential on this page, "$ is undefined" error shows up.
I've tried every single technique at http://api.jquery.com/jQuery.noConflict/ but, I can't resolve the conflict.
function goto(id, t){
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#slide a').removeClass('active');
$(t).addClass('active');
}
I've tried var jq=jQuery.noConflict(); to replace $ but this doesn't solve the problem.
I guess I do not understand enough of jQuery to resolve this conflict and I would really appreciate anyone who can explain what is going on so that I can learn from this.
So all together, it looks like this:
<script>
$(document).ready(function() {
$(".link").click(function (e) {
e.preventDefault();
var $urlToLoad = $(this).attr('href');
$("#loadarea").load($urlToLoad, function(data){
$("#loading").fadeIn('fast').fadeOut('fast');
$("#loadarea").hide().fadeIn('slow');
return false;
});
});
});
function goto(id, t){
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#slide a').removeClass('active');
$(t).addClass('active');
}
</script>
Then I have one inline code to fire the script.
(a class="active" href="#" onClick="goto('#kr', this); return false">test
Strange thing is, that even with the error, it fires on second click.
/////////////////////////////////////
The conflict/error was resolved by converting the inline javascript.
Thanks to Huangism below.
I would just rewrite the anchor from
<a class="active" href="#" onClick="goto('#kr', this); return false">test</a>
To
<a class="active" href="#kr">test</a>
For the jquery
$('.active').on('click', function() {
var $this = $(this);
var id = $this.attr('href');
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#slide a').removeClass('active');
$this.addClass('active');
return false;
});
$(document).ready(function() {
});
Should be rewritten as:
jQuery(function($) {
});
That might help you out here.
It's probably to do with the order that you're including your js files in, make sure that jquery is the first loaded file.
I recently had a question on getting checkbox validation working on the client side within a MVC project. This question was successfully answered, but raised another query.
In order for my checkbox validation to work I needed to add the following bits of javascript directly into jquery.validate.unobtrusive.js:
$jQval.addMethod("mustbetrue", function (value, element, param) {
// check if dependency is met
if (!this.depend(param, element))
return "dependency-mismatch";
return element.checked;
});
adapters.add("mustbetrue", function (options) {
setValidationValues(options, "mustbetrue", true);
});
this worked great, but I'm unhappy about having to change this file just in case Microsoft or the validation plugin boys update the file in the future. If I'm not still working on the project this file may be overwritten without people realising it's been customised.
So with that in mind I tried adding this into an external javascript file:
$.validator.addMethod("mustbetrue", function (value, element, param) {
// check if dependency is met
if (!this.depend(param, element))
return "dependency-mismatch";
return element.checked;
});
$.validator.unobtrusive.adapters.add("mustbetrue", function (options) {
setValidationValues(options, "mustbetrue", true);
});
Unfortunately now the client side script on my checkboxes doesn't run. Can anyone see what I'm doing wrong?
Thanks in advance
S
Sniffer,
The more I look at this, the more I shake my head (at myself).
Upon further review, Darin's method will work, provided that you add one line to his page script:
<script type="text/javascript">
$.validator.unobtrusive.adapters.addBool("mustbetrue", "required");
$.validator.unobtrusive.parse();
</script>
Whenever you make a change (such as adding a new adapter), you must re-parse the unobtrusive validation attributes. Since the last action in jquery.validate.unobtrusive.js is the parsing of the attributes, and the adapter is being added after the parsing, re-parsing solves this issue.
counsellorben
P.S. This solves your issue, but still leaves unresolved the issue of how to add other custom validators which do not use built-in methods from jquery.validate.js without modifying jquery.validate.unobtrusive.js.
P.P.S. I found the answer for adding custom validation methods. In order to add custom validation mmethods without modifying jquery.validate.unobtrusive.js, you need to "borrow" some of its code to add to your page script. Adding a custom method then looks like the following:
<script type="text/javascript">
var $jQval = $.validator,
adapters,
data_validation = "unobtrusiveValidation";
function setValidationValues(options, ruleName, value) {
options.rules[ruleName] = value;
if (options.message) {
options.messages[ruleName] = options.message;
}
}
$jQval.addMethod("mustbetrue", function (value, element, param) {
// check if dependency is met
if (!this.depend(param, element))
return "dependency-mismatch";
return element.checked;
});
$.validator.unobtrusive.adapters.add("mustbetrue", function (options) {
setValidationValues(options, "mustbetrue", true);
});
$jQval.unobtrusive.parse();
</script>
Unobtrusive validation is giving me nothing but grief.
In a very very simple test page, this works:
$(document).ready(function () {
jQuery.validator.unobtrusive.adapters.add(
'mustbetrue', ['properties'], function (options) {
options.rules['mustbetrue'] = options.params;
options.messages['mustbetrue'] = options.message;
}
);
jQuery.validator.addMethod('mustbetrue', function (value, element, params) {
// check if dependency is met
if (!this.depend(param, element)) {
return "dependency-mismatch";
}
switch (element.type) {
case "checkbox":
return element.checked;
break;
case "hidden":
return (value == 'true' || value == 'True');
break;
default:
alert('type = ' + element.type);
return true;
break;
}
});
});
However, when I move this code to my more complex form, suddenly it stops working and I have no idea why and no time to delve into the unobtrusive code to try and find out.
counsellorben's solution works in my more complex form.
If anyone can point me to a site that explains in detail how to properly add a custom validator to unobtrusive validation, I will be forever greatful. Each site I visit has a different solution.
I have no problem adding this code to an external javascript file, which i pilfered from This site
// Custom validator for checkboxs
jQuery.validator.unobtrusive.adapters.add("brequired", function (options) {
//bool-required for checkboxes
if (options.element.tagName.toUpperCase() == "INPUT" &&
options.element.type.toUpperCase() == "CHECKBOX")
{
options.rules["required"] = true;
if (options.message) {
options.messages["required"] = options.message;
}
}
});
Are you certain that you put your script AFTER the jquery scripts in your page? Mine is the last in the list.