Hey I have added jsPdf into my HTML to download the HTML as a PDF, but in IE 9 it doesn't works. It is not downloading any PDF so I searched about this and got the I have to enable the IE shim for this so can you help me out that how I can be able to do that, I have tried to use Downloadify but didn't understand how to pass full HTML file and get the image of that into PDF.
These are the steps, but the support for downloadify is poor.
Add these script tags to the top of your page (changing the path as appropriate to the files in the lib directory of jspdf):
<script src="./js/jspdf/libs/Downloadify/js/downloadify.min.js"></script>
<script src="./js/jspdf/libs/Downloadify/js/swfobject.js"></script>
add a <div id="downloadify"> in your dom. This div should be empty.
Next, add a script tag to the bottom of your page that will run after the DOM has been populated. This script will generate a button in the '#downloadify' div. Put this inside of the script tag:
Downloadify.create('downloadify',{ // this first argument id a dom element id. this is how it knows where to populate the flash button it's creating.
filename: "afilename.pdf",
data: function(){
// generate your pdf here.
var pdf = new jsPDF;
// various other jspdf commands here
return pdf.output();
},
onComplete: function(){
alert('Your File Has Been Saved!');
},
onCancel: function(){
alert('You have cancelled the saving of this file.');
},
onError: function(){
alert('You must put something in the File Contents or there will be nothing to save!');
},
swf: './js/jspdf/libs/Downloadify/media/downloadify.swf', // make sure this links properly to your file as well.
downloadImage: './js/jspdf/libs/Downloadify/images/download.png', // this is the link to the image of the button itself. An ugly default is included. If you want to style the button, you have to create a sprite image of the same kind.
width: 100, // width of the button
height: 30, // 1/4 height of the button image (which has four states present)
transparent: true, // seems to do nothing, set to true or false.
append: false // have not figured out what this does.
});
Related
i use jsPDF and plugin jsPDF-AutoTable
I have a html table i want to print
$('#printFreeRoom').on('click', function (e) {
freeRoomAvailableReport($("#freeRoomTableResult"));
});
function freeRoomAvailableReport(tableId) {
var doc = new jsPDF('p', 'pt');
doc.text("From HTML", 40, 50);
var res = doc.autoTableHtmlToJson(tableId);
doc.autoTable(res.columns, res.data, {
startY: 60
});
doc.output('dataurlnewwindow');
doc.save('test.pdf');
}
nothing is generated when i click on the button.
I created a example on jsfiddle
http://jsfiddle.net/8da5e1fj/
seem like a chrome problem...
tried other example: http://jsfiddle.net/8tLt9yof/10/ and get same result.
You need to add FileSaver.js to use doc.save() also, Chrome has issues with doc.output('dataurlnewwindow')
Hence, here is a working fiddle for doc.save fiddle
And, to open the PDF in new window try this -
var blob = doc.output("blob");
window.open(URL.createObjectURL(blob));
Just an additional "Enter" on the browser address bar will show the PDF in chrome.
UPDATE
Longer URL's are not supported by Chrome as per this. Canvas in the fiddle is generating base64 URL which Chrome fails to load.
I'm having trouble creating and applying a tooltip to each of the images inside a div. The text of the tooltip should be the img's id. This seems like it would be fairly simple, so there must be something I am missing, or not understanding. Here's what I'm using:
$("#myDiv img").tooltip({
content:$(this).attr('id'),
track:true
});
Additionally, these images will be replaced depending on what the user clicks — once the images are deleted (by calling .empty on the containing div), do I need to delete the tooltips, or will they be automatically deleted from memory?
Sorry for the novice question!
You're attempting to get the id of all the img elements. Use .each to parse each element separately.
$("#myDiv img").each(function(){
$this = $(this);
$this.tooltip({
content: $this.attr('id'), // $this[0].id is faster
track: true
});
});
There is no need to remove the tooltip manually; the event bindings are deleted when the element is removed from the DOM.
Try this instead:
$("#myDiv").tooltip({
items: "img",
content: function() {
var el = $(this);
return el.attr( "id" ); // $this[0].id is faster
},
track: true
});
jsFiddle Demo
Reference:
http://jqueryui.com/tooltip/#custom-content
I have a question regarding direct-image-upload from Cloudinary. I could set this up in a rails app using simple-form and <% = f.cl_image_upload (: file)%> but after I select the file, it start uploading. I don't like this approach and I want that upload start just after commit the form. Is it possible? I worry about having file in Cloudinary server which does not have a corresponding id in my database.
The default implementation indeed automatically uploads a file once selected. Most users don't bother with deleting accidentally uploaded images as they don't take a lot of extra storage. However, if you wish not to upload the image automatically on selection, you can set the autoUpload to false in the fileupload call. For example:
$(document).ready(function() {
$('.cloudinary-fileupload').fileupload({
autoUpload: false
});
});
I think you can help me, Actually, I have this script...
<script>
$(document).ready(function() {
// Cloudinary jQuery integration library uses jQuery File Upload widget
// (see http://blueimp.github.io/jQuery-File-Upload/).
// Any file input field with cloudinary-fileupload class is automatically
// wrapped using the File Upload widget and configured for Cloudinary uploads.
// You can further customize the configuration using .fileupload method
// as we do below.
$(".cloudinary-fileupload")
.fileupload({
// Uncomment the following lines to enable client side image resizing and valiation.
// Make sure cloudinary/processing is included the js file
disableImageMetaDataLoad: true,
disableImageResize: false,
imageMaxWidth: 800,
imageMaxHeight: 800,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
maxFileSize: 20000000, // 20MB
dropZone: "#direct_upload",
start: function (e) {
$(".status").text("Starting upload...");
},
progress: function (e, data) {
$(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
},
fail: function (e, data) {
$(".status").text("Upload failed");
}
})
.off("cloudinarydone").on("cloudinarydone", function (e, data) {
$(".status").text("");
$(".preview").html(
$.cloudinary.image(data.result.public_id, {
format: data.result.format, width: 150, height: 100, crop: "limit"
})
);
});
});
</script>
I'm beginning with javascript. This script above is working fine, but it just show me the preview after upload it. I don't like this approach because, if user change the preview image, I will have one file upload to Cloudinary without relative register in my db. Will be great if is possible show the preview and just upload after the user press submit in the form.
Note: I hope you understand me, I'm from Brazil and I don't write in english very well.
I need to do some post-processing work on a png file of a Highchart graph. How do I determine when the export is finished? I've tried to attach a function, but it never gets called:
console.log("Saving chart...");
chart.exportChart({
type : "application/png",
filename: "tmp_chart_filename"
},
function(data) {
console.log("Export done, Data: " + data); // Not called.
})
console.log("Out");
To my understanding, it is not possible out of the box.
What happens internally in the exportChart() method is, a form is created on the fly and the chart svg is sent to the server by programmatically triggering a submit on this form. The server in turn, processes received svg into a png (or whatever you may select) and returns it to the browser.
The popup you see that asks you to "save as" is the action of the browser (and not any highchart code) when a file is thrown at it. Basically the returned png is never returned to the code, it goes directly to the browser.
You can however write your custom svg->png server module and do your magic there :)
I had a rather similar issue and solved it by defining the onclick event on the contextButton. This seems possible only if you are OK with losing the items in the context menu (export by file type), which wasn't an issue in my case. Below the code to be included in the chart initial building:
[... your Highcharts chart setup ...],
exporting: {
buttons: {
contextButton: {
menuItem: null, // You'll lose your menu items here
onclick: function(event) {
yourFunctionBeforeExport();
this.exportChart();
yourFunctionAfterExport();
}
}
}
}
[... rest of the Highcharts chart setup ...]
I want to set the overlay of a jQuery dialog to an image, and can't seem to manage the task.
I have other dialogs on the pages that I want to no have the background images, so setting the css for the overlay background won't work as a blanket solution.
I have tried a lot of different methods, and I believe there is a timing issue with the appliction of the jQuery command to set the overlay with css and the actual dialog div's and css getting added to the DOM.
Here is what I have tried so far.
$('#submitUpload').click(function(){
$("#uploadStart").dialog('open');
$(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'})
$("#uploadForm").submit();
});
OR
$("#uploadStart").dialog({
autoOpen: false,
width: 400,
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'})
}
});
I have also tried using the dialogClass method on the dialog code with no success.
With both the absolute url and the relative, and the url in quotes or with no quotes.
The image exists in the directory.
Anyone have any ideas on how to get jQuery to apply with the correct timing to display the image as the overlay?
Thanks!
Update
The dialog class designation will allow you to set classes for the overal dialog. I was actually looking to just tap into the specific ui-widget-overlay class and over-ride the background image there. I found that trying to override the background using the dialogClass worked for overriding the background of the dialog, not the overlay background.
When the dialog is added to the DOM, jQuery loads it's div's right before the body tag.
I found a solution, being that in the open method for the dialog, I used
$(".ui-widget-overlay").addClass('artFTP');
to add a class
.artFTP{background-image: url(../../images/ftp-page-bg.gif); opacity:1;}
and made sure it was the last class in the file that would overwrite the overlay background image.
I hope this helps someone.
Thanks and +1 to jjross, your answer got me to jump back into the jQuery docs.
If anyone has a better solution, please post. I would be happy to see it. I think there might be a way to use CSS to accomplish the task, but (for the life of me) couldn't figure it out.
You should be able to add the class to the div in your HTML code prior to jquery being called on it. In my testing, this automatically added that class to the dialog when it was created.
In the new class, you should be able to specify a background image.
For example:
calling:
$("#dialog").dialog();
on
<div id="dialog" class="thisClass" title="Edit Case Status">
<div>some stuff</div>
</div>
causes the dialog to be created with the
"thisClass" class.
as an alternative option, it looks like the dialog has a "dialogClass" method. It will let you add your own class to the dialog (in that class, you can define the background). From the docs:
The specified class name(s) will be added to the dialog, for additional theming.
Code examples
Initialize a dialog with the dialogClass option specified.
$( ".selector" ).dialog({ dialogClass: 'alert' });
Get or set the dialogClass option, after init.
//getter
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
//setter
$( ".selector" ).dialog( "option", "dialogClass", 'alert' );
I encountered the same problem and found In this case your question. I didn't find any solution that could satisfy me, so I did something on my own.
First, let me introduce my problem.
I have a page, where I have two kinds of dialogs. Dialogs with video and dialogs with message (like alert, confirmation, error etc.). As we know, we can set a different class for a dialog, but we can't set class for different overlay. So question was, how to set a different behavior for different overlays?
So I dig, I dig deeper than Dwarves in Moria into jQuery ui code itself. I found out, that actualy there is an unique overlay for each dialog. And it is created in "private" function _createOverlay which is not accessible. In fact, I found function via jquery ui namespace as $.ui.dialog.prototype._createOverlay. So I was able to make a small extension with logic based on class:
(function() {
// memorize old function
var originFn = $.ui.dialog.prototype._createOverlay;
// make new function
$.ui.dialog.prototype._createOverlay = function() {
originFn.call(this); // call old one
// write your own extension code there
if (this.options["dialogClass"] === "video-dialog") {
var overlay = this.overlay; // memorize overlay (it is in old function call as this.overlay)
var that = this; // just cause bind is event
// my own extenstion, when you click anywhere on overlay, dialog is closed + I change css
overlay.bind('click', function() {
that.close(); // it is same like element.dialog('close');
}).css({
"background": "none",
"background-image": "url(\'files/main-page/profile1.png\')" // this didnt work for you, but works for me... maybe I have newer version of jQuery.UI
// anyway, once you have overlay as variable, Im sure you will be able to change its css
});
}
};
})();
I hope this will help others :)