I can't change the filename of window.print()
Here's my code:
function printDiv() {
var divContents = document.getElementById("report_div").innerHTML;
var a = window.open(' ', ' ', 'height=700, width=900');
a.document.write('<html><head>');
a.document.title= "Case Report";
a.document.write('<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">');
a.document.write('<link rel="stylesheet" href="../../css/style.css" />');
a.document.write('<style>#page{size:landscape} .statustxt{color:black !important;}</style>');
a.document.write('</head><body>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
setTimeout(function () {
a.window.print();
}, 500);
}
And here's the window
And when i try to save as pdf
i want to make the default file name from download.pdf to casereport.pdf
Related
I have a JavaScript in the WP theme I'm developing that hides part of the text inside <p> tag with the class "more". I set the Jquery to load as async in the header, but for some reason it works well on Firefox but not on Chrome. In my understanding, it's always good to use the async attribute with all independent scripts.
Header:
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<script async src="https://use.fontawesome.com/726be72ac8.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
The JavaScript code that provides the hide-text function goes right after the opening <body>. This way I assure it executes before the <p> tag is loaded:
<script>
$(document).ready(function() {
var showChar = 150;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> ' + moretext + '</span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
Tag:
<p class="more">Text goes here</p>
If I remove the async attribute, it works fine on Chrome.
Adding async tells the browser that it's OK to run the jQuery script after your code - although that's not guaranteed and the script can run whenever the browser decides to run it. So it's just not appropriate in this case even if it works in Firefox.
I have tried this script but the style is not read properly while printing can anyone help me figure out the problem?
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//frameDoc.document.write('<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
</script>
Issue may be with css file path.
Write it according to root path like this.....
<link rel="stylesheet" href="../css/style.css" />
I keep getting a "Uncaught TypeError: $.growl is not a function" error. Here is how I defined the Growl call and it shows how I am referencing Growl. What am I missing here? How can I fix this error?
index.php
<head>
<title>HOST Continuous Integration</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="HCIstyle.css">
<link rel="shortcut icon" href="Images/wci_favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Graduate' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js' type="text/javascript"></script>
<script src='http://ksylvest.github.io/jquery-growl/javascripts/jquery.growl.js' type='text/javascript'></script>
<link href="http://ksylvest.github.io/jquery-growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style type="text/css">
.table_outer { height: 15em; overflow: auto; }
</style>
</head>
script.js is the file where I am calling the Growl function:
// This function is called when, in the Submit Tab,
// the "Check Gerrits" button is clicked.
$("#check_gerrits_button").click(function(event) {
event.preventDefault();
if ($("#gerrits").val() == "") {
alert("Please enter gerrits.");
} else {
$("#main_form_su_validation_table").empty();
var data = { 'product_lines' : [], 'gerrits' : [], 'contacts' : [],'component' : ($("#component").val())};
//find all pl's that are checked
$("input[name=product_line]:checked").each(function() {
data['product_lines'].push($(this).val());
});
data['gerrits'] = ($("#gerrits").val()).split(",");
data['contacts'] = ($("#contacts").val()).split(",");
console.log("in chck gerrits");
console.log(data);
submitted = 'False';
$.ajax({
dataType: "json",
type: "POST",
url: "getsubmittedgerritsforSI.php",
data: data,
error: function (xhr, ajaxOptions, thrownError,response) {
// send the error mail -TBD
console.log(thrownError);
console.log(xhr);
alert(xhr.status);
alert(thrownError);
},
success : function(response){
console.log("get gerrits sucess");
console.log(response);
var data_cp = [];
var submittedlist = [];
$("input[name=product_line]:checked").each(function() {
for (var si in response) {
console.log(response[si]);
for (var i = 0; i < response[si].length; i++) {
gerrit = response[si][i]
data_cp.push(gerrit);
}
}
});
console.log(data_cp);
var ui_gerrits = ($("#gerrits").val()).split(",");
// this loop is to get the intersection of ui_gerrits and data_cp(database)
for (var i = 0; i < ui_gerrits.length; ) {
for (var j = 0; j < data_cp.length; ) {
if (ui_gerrits[i] == data_cp[j] ){
submittedlist.push(ui_gerrits[i]);
submitted = 'True';
}
j++;
}
i++;
}
console.log(submittedlist);
if (submitted = 'True' && submittedlist.length == ui_gerrits.length ){
//alert(str.fontcolor( "blue" ));
//$(function() { $.growl({ title: "Growl", message: "errits already released in SU or Submitted for SU!" })});
//$.growl(submittedlist + ": gerrits already released in SU or Submitted for SU");
$(function() {
$.growl({
title: "Growl",
message: "Gerrits already released in SU or Submitted for SU!"
});
});
}else if ((submitted = 'True') && (submittedlist.length != 0) ){
//alert(str.fontcolor( "blue" ));
//$.growl(submittedlist + ": gerrits already released in SU or Submitted for SU \nPlease remove " + submittedlist + " and resubmit remaining gerrits");
$(function() {
$.growl({
title: "Growl",
message: "Gerrits already released in SU or Submitted for SU!"
});
});
}
else{
SUValidation(data, '#main_form_su_validation_table', '#gerrits', "main_form");
}
}
});
}
});
});
You are missing the jQuery library. jQuery growl plugin is dependent on jQuery library. You can include jQuery library from a CDN like this or include it locally. But make sure to include it before the jquery growl library.
Below is how your source code should look like.
<head>
<link href="http://ksylvest.github.io/jquery-growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src='http://ksylvest.github.io/jquery-growl/javascripts/jquery.growl.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
$.growl({
title: "Growl",
message: "errits already released in SU or Submitted for SU!"
});
});
</script>
</body>
Also, read the Installation step in jQuery growl website here
update
You have two jQuery libraries included which is causing the issue.
The cause of the issue is due to the multiple reference of the jquery files. The jquery file after the growl will recreate the $ instance and hence the growl that already registered was removed.
Please remove that or use jquery conflict.
I have created an application for downloading pdf. the pdf is based on an html table.
The application is working fine in all browser but when i run in IE9 i am getting Error in function : 'ArrayBuffer' is undefined ReferenceError: 'ArrayBuffer' is undefined. Since IE9 is HTML5 based browser jspdf should work i guess.
Working Demo
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.cellInitialize();
pdf.setFontSize(10);
$.each($('#customers tr'), function (i, row) {
if ($(row).text().trim().length !== 0) {
$.each($(row).find("td, th"), function (j, cell) {
var txt = $(cell).text().trim() || " ";
var width = (j == 4) ? 40 : 70;
if (j == 7) {
width = 120;
}
if(i==0)
{
pdf.setFontStyle('bold');
}
else
{
pdf.setFontStyle('normal');
}
pdf.cell(10, 10, width, 18, txt, i);
});
}
});
pdf.save('sample-file.pdf');
}
Can anyone please tell me some solution for this
Use the following code to enable downloadify:
<!doctype>
<html>
<head>
<title>jsPDF</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="../libs/base64.js"></script>
<script type="text/javascript" src="../jspdf.js"></script>
<script type="text/javascript" src="../libs/downloadify/js/swfobject.js"></script>
<script type="text/javascript" src="../libs/downloadify/js/downloadify.min.js"></script>
</head>
<body onload="load()">
<h1>jsPDF Downloadify Example</h1>
<p>This is an example of jsPDF using Downloadify. This works in all major browsers.</p>
<p id="downloadify">
You must have Flash 10 installed to download this file.
</p>
<script type="text/javascript">
function load(){
Downloadify.create('downloadify',{
filename: 'Example.pdf',
data: function(){
var doc = new jsPDF();
doc.text(20, 20, 'PDF Generation using client-side Javascript');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
return doc.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: '../libs/downloadify/media/downloadify.swf',
downloadImage: '../libs/downloadify/images/download.png',
width: 100,
height: 30,
transparent: true,
append: false
});
}
</script>
</body>
</html>
Use the following code to lazy load Downloadify:
<script id="jspdf" src="../jspdf.js"></script>
<script id="lazy">
var jspdfScript = document.getElementByid('jspdf');
var swfobjectScript = document.createElement('script');
var downloadifyScript = document.createElement('script');
swfobjectScript.src = "../libs/downloadify/js/swfobject.js";
downloadifyScript.src = "../libs/downloadify/media/downloadify.swf";
if (window.ActiveXObject)
{
document.documentElement.insertBefore(jspdfScript, swfobjectScript);
swfobjectScript.onload = function () {
document.documentElement.insertBefore(jspdfScript, downloadifyScript);
};
downloadifyScript.onload = function () {
load();
}
</script>
I have published a website on a laptop with IIS 7.5 running IE9. When I have the internet plugged in the website works fine. The weird thing is that it will work fine in firefox weither the machine has internet or not.
Some other information that may be helpful.
Running Windows 7 64Bit. Latest version of firefox. IE9.
Not sure what else you may need. I have tried checking IE permissions but there may be something I have missed so any help will be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#*----------------- JQUERY UI for Accordion Starts here-------------------- *#
<link href="../../Content/themes/Blue/jquery-ui-1.9.1.custom.min.css" rel="stylesheet"
type="text/css" />
<script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.9.1.custom.js" type="text/javascript"></script>
#* -----------JQUERY UI for Accordion Ends here--------------------- *# #*----------------- JQUERY UI for Delete Dialog Starts here-------------------- *#
<script src="../../Scripts/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
#* <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>*#
<script src="../../Scripts/external/jquery-ui.js">></script>
#*----------------- JQUERY UI for Delete Dialog Ends here-------------------- *#
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#*
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
*# #* ----------- Scripts added for Devexpress but commented because JQUERY UI not working --------------------- *#
#*
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.4.4.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
*# #* ----------- Scripts added for Devexpress ends here--------------------- *#
#Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.GridView },
new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
new Script { ExtensionSuite = ExtensionSuite.HtmlEditor },
new Script { ExtensionSuite = ExtensionSuite.Editors },
new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new Script { ExtensionSuite = ExtensionSuite.Chart },
new Script { ExtensionSuite = ExtensionSuite.Report }
//new Script { ExtensionSuite = ExtensionSuite.Scheduler }
)
#Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.GridView },
new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor },
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
//new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler }
)
#* ---------------------------------JQUERY Scripts for Delete confirmation Starts here --------------------------------*#
<script type="text/javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 500;
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: 250,
resizable: false,
modal: true,
buttons:
{
"Delete": function () {
$.post(deleteLinkObj[0].href, function (data) { //Post to action
//Check data the return from the middle layer, if it is just true, deletion is successful
if (data == '#Boolean.TrueString') {
deleteLinkObj.closest("tr").hide('fast'); //Hide Row
$("#dialog").dialog("close"); //See it used #dialog instead of (this) because the scope (context) has changed in the "Delete" callback
$(this).empty();
$("#StatusMsg").html("Deleted");
location.reload(); //refreshes the page
}
else {
//Show the errror on the dialog content. Data is used to show the error
//expecting the Error handlers in middle layer will return the meaning ful error message
$("#dialog").html(data);
//Hide confirmation button inorder to show the user to only the content of error in the same
//dialog box and allow to cancel this dialog
$(":button:contains('Delete')").css("display", "none");
$("#StatusMsg").html("Not Deleted");
}
//location.reload();
});
},
"Cancel": function () {
//This reset of the Delete button is need since if it wsas invoked and jumped into show error routine,
// then that routine would have removed the Delete button.
$(":button:contains('Delete')").css("display", "inline");
$(this).dialog("close");
$("#StatusMsg").html("");
}
}
});
var deleteLinkObj;
var deletMsg;
$('a.inputFakeDelete').click(function () {
//Here the message is built using the delete button properties id and name.
//So every page calling this jquery need to have the link button embedded with these properties
//eg: id = Grade, name = the name of the grade from the model
deletMsg = "Are you sure you want to delete this " + this.id;
if (this.name == "") {
}
else {
deletMsg = deletMsg + " '" + this.name + "'" //"Are you sure you want to delete the " + (this).id + " '" + (this).name + "'?";
}
deletMsg = deletMsg + "?"
$("#dialog").html(deletMsg)
deleteLinkObj = $(this); //to use in the dialog javascript
$("#dialog").dialog("open");
return false;
});
});
</script>
#*----------------------------------JQUERY Scripts delete confirmation Ends here --------------------------------*#
#*----------------------------------JQUERY Scripts for record cuirrent filer --------------------------------*#
<script type="text/javascript">
var currentValue = 0;
function handleClick(currentfilter) {
//alert('Old value: ' + currentValue);
//alert('New value: ' + currentfilter.value);
currentValue = currentfilter.value;
//Redirect the page so that will reload with new parameters
window.location = 'http://' + window.location.host + currentValue; //Add 'http://' since host will not include this
}
</script>
#*----------------------------------JQUERY Scripts for record cuirrent filer ends here --------------------------------*#
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
The error page just says that it cannot find a specific webpage. Customer/Delete
I am not sure if this is was the fix for my problem (and it is a little hard to test as the machine is not my own) but later on we reconfigured .net by using aspnet_regiis.exe and the problem looks like it has disapeared.