I'm using this jquery plugin ajaxFileupload in our project. My design is I have a file upload control and set the opacity to 0.01 and then using an anchor link, I trigger the file upload control click event. This works fine until I try to click the anchor link the second time which it doesn't open the file dialog box.
Here is my code.
$(".btnUpload").live("click", function () {
$(".lblUploadError").text("");
$(".fleAttachment").trigger("click");
});
$(".fleAttachment").change(function () {
var reg = /^.*\.(jpg|JPG|gif|GIF|jpeg|JPEG)$/;
var vals = $(this).val(),
val = vals.length ? vals.split("\\").pop() : "";
if (reg.test(vals) == false) {
$(".lblUploadError").text("Invalid Image Type. We only accept .GIF or .JPG");
} else {
ajaxFileUpload();
eval($(".btnRefreshAttachmentList").attr("href"));
}
});
I don't see any error in the console so it makes it difficult to debug it.
Change
$(".fleAttachment").change(function() {
to
$(".fleAttachment").live('change', function() {
$( document ).on( "click", ".fleAttachment", function() {
//--> Logic Here // jQuery 1.7+
});
this.value="";
at the end should work
Related
I was working with wkhmtltopdf and found that I have a problem with it.
I am using the html page to also preview the content in a browser prior to converting to PDF.
But to make it more readable in my preview, I have added some css on the page: (In javascript/jQuery on document ready)
$(document).ready(function () {
if(window.location.href.indexOf("preview") > -1 && window.location.href.indexOf(".pdf") == -1) {
appendCSStoHtml();
}
});
function appendCSStoHtml() {
$("body").css({"background-color":" #F0F8FF"});
$("#previewHtml").css({
"margin-left":"15%",
"margin-right":"15%",
"margin-top":"15px",
"max-width":"1024px"});
$("#previewHtml > h2").css({"margin-left":" 15px"});
}
So this is all good and dandy, but when I generate my PDF based on this HTML page, then the css is also renderend inside my PDF and the outlining and background are also present inside the PDF.
I don't want this to happen, I only want my css style elements to be renderen on the HTML page and not inside the PDF.
How can I achieve this?
I tried with the following:
$(document).ready(function () {
if(window.location.href.indexOf("preview") > -1 && window.location.href.indexOf(".pdf") == -1) {
appendCSStoHtml();
}
});
But that did not matter.
Any ideas?
it's me again.
Not sure if there is something that resembles what I am looking for.
Thus I made my own.
I added a page parameter and check this in the code to see if it's true or false:
<script type="text/javascript">
$(document).ready(function () {
var url_string = window.location.href;
var url = new URL(url_string);
var renderCss = url.searchParams.get("renderCss");
if(renderCss == 'true') {
appendCSStoHtml();
}
});
function appendCSStoHtml() {
$("body").css({"background-color":" #F0F8FF"});
$("#previewHtml").css({
"margin-left":"15%",
"margin-right":"15%",
"margin-top":"15px",
"max-width":"1024px"});
$("#previewHtml > h2").css({"margin-left":" 15px"});
}
</script>
I disabled the built-in pop up event. Now I want to implement a double click function on each cell of the month view.
Does anyone know how to do it?
You can add an event handler to the add event of the scheduler in the scheduler options like this:
add: (e) => {
// Place your code here.
e.preventDefault();
}
or in case you would rather not use arrow function:
add: function(e) {
// Place your code here.
e.preventDefault();
}
Calling e.preventDefault() will disable the built-in "add" event handling which is showing the popup window. You mentioned you already disabled it but this is a good way to do it if you did it in another way.
e will contain the slot's start and end time as well as the resource details, if you use resources.
You may want to associate the event with k-event class of an scheduler.
$("#scheduler").on("dblclick", '.k-event', function (e) {
var scheduler = $("#scheduler").getKendoScheduler();
var element = $(e.target).is(".k-event") ? $(e.target) : $(e.target).closest(".k-event");
var event = scheduler.occurrenceByUid(element.data("uid"));
alert("Start Date : " + event.start + ", End Date: " + event.end);
});
Demo Link
Try this it worked for me.
edit: function (e) {
e.preventDefault(); //prevent popup editing
var dataSource = this.dataSource;
var event = e.event;
if (event.isNew()) {
setTimeout(function () {
//dataSource.add(event);
editEvent(event); // your own function to call
});
}
else {
}
}
Example:
Jsfiddle
If the page is loaded the first time, the CKEditor is working right and the value of the editor can be edited. After hitting the button "ajax" which is calling the following function (cursor must be in the editor field):
function ajax_call() {
var html = "<textarea id=\"textarea\"><p>test 1</p><p>test 2</p><p>test 3</p></textarea><script type='text/javascript'>jQuery(document).ready(function() { ckEditor('textarea'); });<\/script>";
$.post("/echo/html/", { html: html }, function(data){
jQuery('#target').html(data);
});
}
it isn't possible to click on the text in IE11 to edit the value. Clicking beyond the text or left of it enabels the editor again.
Looks like creation of new textarea after CKEDITOR is initiated brakes editor in IE. Though i just tried to set data directly on instance of CKEDITOR and it worked fine,rather than creating new textarea tag.
function ajax_call() {
var html = "<p>test 4</p><p>test 5</p><p>test 6</p>";
$.post("/echo/html/", { html: html }, function(data){
//jQuery('#target').html(data); <-- Removed from original
CKEDITOR.instances['textarea'].setData(data)// <-- Added
});
}
function ckEditor(id) {
CKEDITOR.replace(id, {
language : 'de',
});
}
jQuery(document).ready(function() {
ckEditor('textarea');
});
Here is working example:
http://jsfiddle.net/2wq86gqs/15/
The only type of documentation I can find referencing to "drop zone" is
localization.dropFilesHere String(default: "drop files here to upload")
Sets the drop zone hint.
Now how can I set the dropzone to the whole page like Blueimp?
Why not just override the default dropzone size? You can increase the size using basic css.
var $dropzone = $("div.k-dropzone");
$dropzone.css("height", "mycustomHeight");
$dropzone.css("width", "mycustomWidth");
Good luck.
This should delegate the drop event from "largedroparea" to kendo upload
<div id="largedroparea"></div>
<input type="file" name="files" id="photos" />
<script>
$("#photos").kendoUpload({
async: {
saveUrl: "save",
removeUrl: "remove"
}
});
// Setup the dnd
$('#largedroparea').on('dragenter', handleDragEnter);
$('#largedroparea').on('dragover', handleDragOver);
$('#largedroparea').on('dragleave', handleDragLeave);
$('#largedroparea').on('drop', handleDrop);
function handleDragEnter(e) {
}
function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
// Explicitly show this is a copy.
e.originalEvent.dataTransfer.dropEffect = 'copy';
}
function handleDragLeave(e) {
}
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var event = jQuery.Event("drop");
event.originalEvent = e.originalEvent;
$('#photos em').trigger(event);
}
</script>
With the current version of Kendo UI Uploader it's not possible to increase the dropzone size.
Possible alternatives :
Create a div surrounding your page , whenever the files are dropped in this div create a List like filesToUpload of the dropped files and then assign this list to the files option of kendo upload.
files: filesToUpload,
Steps to grab the dropped files:
Stop the default behaviour in the drop event of your dropzone div
$("#yourDropzoneDiv").on("dragover", function (event) {
event.preventDefault();
event.stopPropagation();
});
$("#yourDropzoneDiv").on("dragleave", function (event) {
event.preventDefault();
event.stopPropagation();
});
$("#yourDropzoneDiv").on("drop", function (e) {
e.preventDefault();
e.stopPropagation();
var filesToUpload = [];
for (var i = 0; i < e.originalEvent.dataTransfer.files.length; i++) {
var objDroppedFiles = {};
objDroppedFiles['name'] = e.originalEvent.dataTransfer.files[i].name
objDroppedFiles['size'] = e.originalEvent.dataTransfer.files[i].size
objDroppedFiles['extension'] = e.originalEvent.dataTransfer.files[i].type.split('/')[1]
filesToUpload.push(objDroppedFiles);
}
$("#droppedUploader").kendoUpload({
multiple: true,
async: {
saveUrl: "Upload.aspx",
autoUpload: true
},
files: filesToUpload,
upload: fileUploadDropped,
template: kendo.template($('#droppedFileTemplate').html())
});
}
This way you will be able to see the dropped files in your kendo uploader.
Have you tried using CSS to accomplish that? Simply:
div.k-dropzone {
height:150px;
}
This will make your dropzone bigger. Please do not that it pushes the file list downward.
Hope it helps.
Does anyone know how I can attach an onpaste event in CKEditor 3.x?
I basically want to grab CTRL + V data and add few text to it and then add it to the editor.
I have looked around but have not found a definitive answer. CKEditor forum is of not much help.
This should do the trick
var editor = CKEDITOR.instances.YourInputControlName;
editor.on('paste', function(evt) {
// Update the text
evt.editor.setData(evt.editor.getData() + ' your additional comments.');
}, editor.element.$);
Your both examples are a little bit synthetic.
At first, editor.getData() gets all the content of editor, so if you want to process only pasted data, you need to get ev.data.html and paste to correct place.
editor = CKEDITOR.instances.editor1;
editor.on('paste', function (evt) {
var editor = evt.editor;
evt.stop(); // we don't let editor to paste data, only for current event
// show loader that blocks editor changes
$.post('clean.php', {html: evt.data.html}, function (data) {
editor.insertHtml( data.html ); // text will be inserted at correct place
// hide loader
}, 'json');
});
Don't use functions editor.setReadonly(true/false), you won't be able to paste text in correct place (in cases with async data processing).
This example edits the content to be pasted by removing all img elements.
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.on('paste', function (ev) {
ev.data.html = ev.data.html.replace(/<img( [^>]*)?>/gi, '');
});
});
editor = CKEDITOR.instances[id];
editor.on('paste', function (evt) {
evt.stop();
var data = evt.data.dataValue;
if (window.chrome || window.safari) {
// removing span wrapper on webkit browsers.
data = $(data).html();
}
evt.editor.insertHtml(data);
});
I know it's an old question, but thought I'd add my version of aliaksej's answer as it allows the use of a custom 'cleaner' - it didn't quite work for me until I modded it as below.
editor = CKEDITOR.instances[id];
editor.on('paste', function (evt) {
evt.stop();
$.post('/actions/clean.php', {html: evt.data.dataValue}).done(function (data) {
evt.editor.insertHtml(data);
}, 'json');
});