We Keep Coding

How to use jQuery to load codepress

I am using codepress in a CMS to edit files in the filesystem. Everything works nicely, however when trying to load the same page using jQuery load() function, codepress seems to break.
My javascript code looks like this which loads the php file with codpress, however codepress seems to not fire.
$('.content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#rightColWrap').fadeOut(150, function(){
$('#rightColWrap').load('/?url=developer/edit-file.php&open=' + fileName, function(){
$('#rightColWrap').fadeIn(150);
});
});
});
Digging into codepress.js I see this at the end of the file but I'm not understanding if there is something I could add to my initial on click event listner script to help codpress fire.
if(window.attachEvent) window.attachEvent('onload',CodePress.run);
else window.addEventListener('DOMContentLoaded',CodePress.run,false);
Here is the link to codepress on sourceforge
https://sourceforge.net/projects/codepress/

To be logic : when the data are loaded, we want to initialize CodePress.
So your code should look like :
$('.content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#rightColWrap').fadeOut(150, function(){
$('#rightColWrap').load('/?url=developer/edit-file.php&open=' + fileName, function(){
CodePress.run();
$('#rightColWrap').fadeIn(150);
});
});
});
If this didn't work please provide error from the console.
Edit : corrected answer, seen Robson França's comment.
Last issue was that CodePress.run; should have been written CodePress.run();

The answer was that we needed to add parentheses to CodePress.run and after the fadeIn() call.
$('#content').on('click', '#fileSystemWrap a', function (event) {
event.preventDefault();
var fileName = $(this).data('file');
$('#content').fadeOut(150, function(){
$('#content').load('/?url=developer/edit-file.php&open=' + fileName, function(){
$('#content').fadeIn(150, function(){
CodePress.run();
});
});
});
});

Multiple Dropzone in a single page

I'm using Dropzone without creating a dropzone form. It works great for me in this way.
But in this case I can not create another instance of Dropzone in my page.
var myDropzone1 = new Dropzone(
document.body,
{
url : "upload1"...
.
.
. some parameters
};
var myDropzone2 = new Dropzone(
document.body,
{
url : "upload'"...
.
.
. some parameters
};
When I do this, I'm getting the error Dropzone already attached.

It's possible, but you can't bind a second dropdzone on the same element, as you did. 2 Dropzones on one element makes no sense. 2x document.body in your solution atm. Try this...
HTML:
<form action="/file-upload" class="dropzone" id="a-form-element"></form>
<form action="/file-upload" class="dropzone" id="an-other-form-element"></form>
JavaScript:
var myDropzoneTheFirst = new Dropzone(
//id of drop zone element 1
'#a-form-element', {
url : "uploadUrl/1"
}
);
var myDropzoneTheSecond = new Dropzone(
//id of drop zone element 2
'#an-other-form-element', {
url : "uploadUrl/2"
}
);

I want to add something here because I have experienced problems with multiple dropzones on the same page.
In your init code you must remember to include var if putting a reference otherwise it isn't dealing with this instance of the dropzone rather trying to access/relate to the others.
Simple javascript but makes a big difference.
init: function(){
var dzClosure = this;
$('#Btn').on('click',function(e) {
dzClosure.processQueue();
});

Note: I'm not using Ajax in order to upload the image on server. For Ajax, One can use url. Attaching the doc DropzoneDoc. It's works like action.( Something like that. Check my solution you can get some idea to do it in your case.
When I working we dropzone, I faced a similar issue working with the Meteor framework.
In the case of Meteor Framework, dropzone is initialized in the below code. This will look different to you, it's the way to initialize in the Meteor framework.
In your case, you can find similarities when using the dropzone library.
Params are added as
params='{name: "Image1"}'
{{> dropzone url=getDropZoneImageUploadURL id='candidate-identity-photo-proof'
init=initFunction params='{name: "Image1"}'
acceptedMimeTypes= 'image/jpeg,image/png,image/jpg' maxFiles=1
success=uploadSuccessHandler maxFilesize=2 dictDefaultMessage= "Photo
ID Proof Photo"
previewsContainer='#upload-photo-id-holder'
previewTemplate=previewTemplateString}}
when the file is getting uploaded check "this" context as mentioned below code. You can use the params value to distinguish the image.
var initFunction = function () {
this.on("addedfile", function () {
if (this.files[1] != null) {
this.removeFile(this.files[0]);
}
});
this.on("sending", function (file, xhr, formData) {
console.log(this); // Here you can get the value
formData.append("type", "image");
});
this.on("error", function (fileInfo, errorMessage) {
var message = "ERROR";
showNotification("error", { message: message }, {});
});
};

Dropzone event handling not giving any life sign

i'm using dropzone to build an interface to an online storage api, for uploading files. I've to upload multiple files and to make an ajax call everytime a file is uploaded so that an input field of the hidden form below get added. It's not a big deal for itself, i just have to add a call to the init property of dropzone (i'm not creating a custo dropzone, i'm just using the default one). So at line 1581 i wrote:
Dropzone.options = {
init: function() {
this.on("addedfile", function(file) { alert("added file"); });
}
};
but when i add i file to the dropzone nothing happens.
I'm processing multiple files, so am I calling the wrong event? maybe should i call successmultiple? this is the dropzone tutorial. Any idea?

if you have a form, with an id="my-awesome-dropzone" like in the example
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone"></form>
You have to create a config object in the same document, i.e. in the header
<script src="./path/to/dropzone.js"></script>
<script >
//"myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("addedfile", function(file) { alert("Added file."); });
}
};
</script>
If instead of this, you are creating the dropzone by
var myDropzone = new Dropzone("form.myFormClass"); //or something like this
you have to add the options as the second parameter
var myDropzone = new Dropzone("form.myFormClass", {
init: function() {
this.on("addedfile", function(file) { alert("Added file."); });
}
});

Multiple dropzone.js - single page

Rather than having multiple file uploads on a single dropzone element - is it possible to have multiple dropzone elements on a single page?
It seems dropzone isn't even triggering after the select dialog when there are multiple elements,each with their own dropzone initialized

The typical way of using dropzone is by creating a form element with the class dropzone:
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone"></form>
That's it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. You can then access the dropzone element like so:
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: function(file, done) {
if (file.name == "justinbieber.jpg") {
done("Naha, you don't.");
}
else { done(); }
}
};

As far as i know , you can create your own dropzone , then it's possible to have multiple dropzone elements.
// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
// jQuery
$("div#myId").dropzone({ url: "/file/post" });

Yes, you can have an unlimited amount of dropzones on a single page.
Example:
<form action="/controller/action">
<div class="dropzoner" id="dropzone1"></div>
<div class="dropzoner" id="dropzone2"></div>
</form>
<script>
Dropzone.autoDiscover = false; // Very important
InitializeDropzones();
function InitializeDropzones() { // You only need to encapsulate this in a function if you are going to recall it later after an ajax post.
Array.prototype.slice.call(document.querySelectorAll('.dropzoner'))
.forEach(element => {
if (element.dropzone) {
element.dropzone.destroy();
} // This is only necessary if you are going to use ajax to reload dropzones. Without this, you will get a "Dropzone already exists" error.
var myDropzone = new Dropzone(element, {
url: "/controller/action",
headers: {
"headerproperty": value,
"headerproperty2": value2
},
});
})
}
</script>
Some notes that might save someone time when dealing with multiple dropzones:
After reloading any elements via ajax that have a dropzone attached to them, you will need to reinitialize that dropzone onto the element.
For instance:
myDropzone.on("success", function (response) {
toastr[show a toastr];
$("#ContainerThatHasDropzones").load("/controller/action/" + id, function() {
Dropzone.discover(); // This is very important. The dropzones will not work without this after reloading via ajax.
InitializeDropzones();
});

How to call AJAX function from a popup appeared using "Colorbox - a jQuery lightbox plugin"?

I'm using PHP,Smarty, jQuery, Colorbox jQuery plugin, etc. for my website. All the necessary files required have been included in index.tpl file, so I've not mentioned those files here. They are getting included and working fine.
From one smarty template file I'm calling the Colorbox popup. The code for it is as follows:
edit
{literal}
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".inline_edit_transaction_details").colorbox({href:$(this).attr('href'),width:999, height:999});
});
</script>
{/literal}
The lightbox is also getting displayed properly. For your reference I'm attaching the screenshot here.
Now I want to call a jQuery AJAX function upon clicking on Update link as shown in the attached image. For testing purpose I put an alert message at the beginning of AJAX function but not able to call it. For your reference I'm putting the code from smarty template below.
The code from the Colorbox popup(Smarty template) is as follows:
<td><a class="edit_user_transaction_status" href="{$control_url}{$query_path}?op=edit_user_transaction&page={$page}&txn_no={$user_transaction_details.transaction_no}&transaction_data_assign={$user_transaction_details.transaction_data_assign}&user_id={$user_id}{if $user_name!=''}&user_name={$user_name}{/if}{if $user_email_id!=''}&user_email_id={$user_email_id}{/if}{if $user_group!=''}&user_group={$user_group}&{/if}{if $user_sub_group!=''}&user_sub_group={$user_sub_group}{/if}{if $from_date!=''}&from_date={$from_date}{/if}{if $to_date!=''}&to_date={$to_date}{/if}{if $transaction_status!=''}&transaction_status={$transaction_status}{/if}{if $transaction_no!=''}&transaction_no={$transaction_no}{/if}">Update</a></td>
The jQuery AJAX function is as below:
$(document).ready(function() {
//This function is use for edit transaction status
$(".edit_user_transaction_status").click(function() { alert("Hello");
$(".edit_user_transaction_status").bind('click', function(){
$.colorbox.close();
});
e.preventDefault();
//for confirmation that status change
var ans=confirm("Are you sure to change status?");
if(!ans) {
return false;
}
var post_url = $(this).attr('href');
var transaction_status_update = $('#transaction_status_update').val();
$.ajax({
type: "POST",
url: post_url+"&transaction_status_update="+transaction_status_update,
data:$('#transaction_form').serialize(),
dataType: 'json',
success: function(data) {
var error = data.login_error;
$(".ui-widget-content").dialog("close");
//This variables use for display title and success massage of transaction update
var dialog_title = data.title;
var dialog_message = data.success_massage;
//This get link where want to rerdirect
var redirect_link = data.href;
var $dialog = $("<div class='ui-state-success'></div>")
.html("<p class='ui-state-error-success'>"+dialog_message+"</p>")
.dialog({
autoOpen: false,
modal:true,
title: dialog_title,
width: 500,
height: 80,
close: function(){
document.location.href =redirect_link;
}
});
$dialog.dialog('open');
}
});
});
});
I tried a lot to make a call to this function but couldn't give a call. It's also not giving any errors when I checked in console of firebug. So I think no syntactic errors are there. Can anyone help me in calling this function? Thanks in advance.

$(".edit_user_transaction_status").click(function(e) {
e.preventDefault(); // apply in click event not outside
alert("Hello");
});
or
$(".edit_user_transaction_status").bind('click', function(e){
e.preventDefault(); // apply in click event not outside
$.colorbox.close();
});
reference e.preventDefault