We Keep Coding

How to reinitialize a dropzone element

I want to use dropzone to display thumbnails of images that I already have on the server. I am creating a CMS for a property website. The server has images associated with Sites of properties. When the page loads, the init function of my dropzone displays the relevant image for a given site as a thumbnail in the dropzone.
There is a drop down box on the page which lets the user select another site. When they do this I want the dropbox object to basically do what's in the init function again. Make a call to the server and display the thumbnails that are associated with this different site.
I haven't been able to get a solution yet (obviously). Typically I will get something like, "dropzone still attached" with stuff I have tried. I can't seem to see anything in the docs that is useful.
Any help would be appreciated :)
//my dropzone object
var myDropzone = $('#featured-development-dropzone').dropzone({
url: '#Url.Action("SaveFeaturedDevelopmentImage","Homepage")',
maxFiles: 1,
addRemoveLinks: true,
init: function () {
var myDropzone = this;
$("select").on('click', function () {
myDropzone.removeAllFiles(true);
});
var siteID = $('#siteDropdown').find(':selected').val();
$.ajax({
url: '#Url.Action("GetFeaturedDevelopmentImage", "Homepage")',
data: { siteID: siteID },
type: 'GET',
success: function (data) {
console.log(data);
if (data.data != null) {
var mockFile = {
name: data.filename,
size: data.fileSize
};
// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);
console.log(typeof (data));
// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "data:image/png;base64," + _arrayBufferToBase64(data.data));
myDropzone.emit("complete", mockFile);
}
}
});
this.on("sending", function (file, xhr, formData) {
formData.append("SiteID", siteID);
formData.append("imageTypeID", 4);
console.log(formData);
});
}
});
var prevSiteID;
$("select").on('click', function () {
prevSiteID = this.value;
}).change(function () {
var newSIteID = this.value;
// potentially put code here that will reinitialize the dropbox and display images associated with different site.
console.log(prevSiteID);
console.log(newSIteID);
changeFeaturedDevelopment(prevSiteID, newSIteID);

I belive you need to recall that function again. Since when you are triying to attach a new image, the dropzone zone is already defined in the page load. Or you call the init again or try to reset it, so the dropzone can reattach another image.

How to load images from a directory using jquery

I am toying with the following code trying to take images from a set directory, and preload them. I do not want to load the images into a div, but rather preload them in the memory using the normal:
new Image().src = "/wp-content/themes/NCHERM_Theme/images/home4-events.jpg";
I am rather new to jquery so looking for some help to finalize this:
window.onload = function($) {
var folder = "images/preload";
$.ajax({
url : folder,
success: function (data) {
//go through each item in folder
$.each(data, function(i,filename) {
//take each item and run into the normal preload method
setTimeout(function() {
// preload images
new Image().src = filename;
}, 1000);
});
}
});
};
running this in wordpress I get `403 forbbiden' on the url for the folder before i can even test if this is working

Make sure you have added reference of JQuery inside your <script> tag. JQuery Library is missing.
<script src="../../jquery.min.js" type="text/javascript"></script>
For your reference: $.ajax is not a function

Try this code if it work for you.
window.onload = function($) {
var folder = "images/preload";
$.ajax({
url : folder,
success: function (data) {
//go through each item in folder
$.each(data, function(i,filename) {
//take each item and run into the normal preload method
setTimeout(function() {
// preload images
var $img=$("<img />",{"src":filename});
$('#target_id').append($img);
}, 1000);
});
}
});
};

You can solve 403 error by adding:
Options +Indexes
On .htaccess file.

Hearer document.addEventListener (function () {function as in the example

I'm having a little problem that I do not know how to solve, I'm trying to run an example that is in ngcordova site but without success.
When I use the plugin $ cordovaInAppBrowser.open ({...
it usually works but to place the event listener
document.addEventListener (function () {... it does not open the link
in cordovaInAppBrowser.open $ ({...
I need to use the event listener to use the functions
necessary application, I can not understand what is
going on I am using the example without touching on
anything
Can someone help me ?
Here is the sample code
module.controller('ThisCtrl', function($cordovaInAppBrowser) {
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'no'
};
document.addEventListener(function () {
$cordovaInAppBrowser.open('http://ngcordova.com', '_blank', options)
.then(function(event) {
// success
})
.catch(function(event) {
// error
});
$cordovaInAppBrowser.close();
}, false);
$rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event){
});
$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
// insert CSS via code / file
$cordovaInAppBrowser.insertCSS({
code: 'body {background-color:blue;}'
});
// insert Javascript via code / file
$cordovaInAppBrowser.executeScript({
file: 'script.js'
});
});
$rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event){
});
$rootScope.$on('$cordovaInAppBrowser:exit', function(e, event){
});
});
Only need to open an external page but document.addEventListener listener (function () {not let me open and I need him to be present as in the sample code to work correctly.

The only solution I found was this direct opening the window and making the necessary changes directly to the external page, thank the help of all.
Here's the code I used
var options = {
       location: 'yes'
       clearcache 'yes'
       toolbar: 'no'
    };
   
$ Scope.ircadastro = function () {
$ CordovaInAppBrowser.open ('url', '_blank', options)
    }

Dropzone JS Global Events

I might have this wrong but Dropzone JS seems to do things in a very odd way. http://www.dropzonejs.com/#events
This is the recommended method of adding an event
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("addedfile", function(file) { alert("Added file."); });
}
};
This assumes you know what myAwesomeDropzone is. But if you create them programatically then you may not know what myAwesomeDropzone is. It could be anything, e.g. if you have three different Dropzones on the page based on some ID then the identifier won't be myAwesomeDropzone or even guessable.
It would be handy to be able to do
$(".dropzone").on("addedfile", function(file) {
alert("hello");
});
But it does not work. I just want to be able to attach a global event to all my dropzones.

If you have several dropzones in the same page, and you need for each one to have a different configuration, you have to initialize each one separately.
As I see you are using jQuery know that you can also initialize the dropzone elements using the Dropzone jQuery plugin already included in dropzone.
As example imagine that each dropzone accepts a different file type:
Dropzone.autoDiscover = false;
$("#dropzone1").dropzone({
url: 'urlForDropzone1.php',
acceptedFiles: 'application/pdf',
init: function(){
this.on("addedfile", function(file) {
alert("Added" + file.name + " on Dropzone 1.");
}),
this.on("success", function(file) {
alert(file.name " Uploaded from Dropzone 1")
})
}
});
$("#dropzone2").dropzone({
url: 'urlForDropzone2.php',
acceptedFiles: 'image/*,.jpeg,.jpg,.png,.gif',
init: function(){
this.on("addedfile", function(file) {
alert("Added" + file.name + " on Dropzone 2.");
}),
this.on("success", function(file) {
alert(file.name " Uploaded from Dropzone 2")
})
}
});
Notice that first you need to disable the autodiscover feature, then initialize each dropzone separately, the url are optional, don't need to include them if you already have them in the html.

You can append dropzone very similar as in your 2nd snippet. When you attach the configuration directly when initializing the dropzone.
new Dropzone(".dropzone", {
url: 'someUrl',
addedfile: function () {
alert('Hallo');
}
});

The below works, my issue was that I had dropzone.js included twice which made Dropzone.autoDiscover = false; be ignored.
Dropzone.autoDiscover = false;
$(".dropzone").on("addedfile", function(file) {
alert("hello");
});

Allow only external links in TinyMCE

I'm using TinyMCE in my webapplication, and allowing people to use link in it.
This is my config:
var editor = tinymce.init({
plugins: "link",
selector: this.$el.find("#shortdesc")["selector"],
toolbar: "bold italic | undo redo | link unlink",
link_list: [
],
menubar: false,
relative_urls: false,
link_assume_external_targets: true,
setup: function (editor) {
editor.on("change", function (e) {})
}
});
The issue I'm trying to solve is that I want let people insert only external links. In the current situation, when the user click on the link button and confirm, it shows this popup
My goal is to avoid showing this popup and use only http:// prefixed links.
I'm using the last version of tinyMCE.
As far as I could understand relative_urls options does not fit my necessities.
Any ideas?

Actually I solved overriding the tinymce.editor.convertURL function
setup: function (editor) {
var fn = editor.convertURL;
editor.convertURL = convertURL_;
function convertURL_(url, name, elm){
fn.apply(this, arguments);
console.log(arguments);
var regex = new RegExp("(http:|https:)?\/\/");
if (!regex.test(url)) {
return url = "http://" + url
}
return url;
}
}

Based on an answer found here, I wrote the following compact solution for your problem:
editor.on('init',function(e) {
// reference to original windowManager function
var fn = editor.windowManager.open;
// override with your own version of the function
editor.windowManager.open = function(t,r){
// make sure you only target the 'insert link' dialog
if(t.title == 'Insert link'){
// reference to the subumit function of the dialog
var oldsubmit = t.onSubmit;
// override the submit function
t.onSubmit = function(e){
// append the "http://" prefix here, note that the URL is contained within the property 'href' of data.
// also see link/plugin.js
if(!e.data.href.match(/(ftp|https?):\/\//i)){
e.data.href = "http://" + e.data.href;
}
// submit original function
return oldsubmit(e);
}
// after overwriting the submit function within the windowManager, make sure to call the original function
fn.apply(this, [t,r]);
}
// use return instead of apply to prevent bugs in other dialogs
else{
return fn(t,r);
}
}
});

You should copy the link plugin, rename it to something like "mylink", adjust all references to link to mylink and modify the code so that the popup will not show up and the link url is checked for "https"/"http",