I currently have a Preview of our form that looks exactly how we want it to look for the list item being viewed but the problem is when I added my Print button as CEWP in FOrm Display it performs the exact same function as using Control P and prints the entire page. See code.
<div style="text-align: center"><input onclick="window.print();return false;" type="button" value=" Print this page "/> </div>"
I want to add onto this to have it only print the form and no other content out side of the current view in the window and actually fill an 8.5 by 11.
Any ideas?
Inspired by this InfoPath print button, one solution would be to grab the contents of your CEWP and create a new window that only contains those.
var patt = /**your CEWP ID here***/g;
var alldivs = document.getElementsByTagName('div');
var printpageHTML = '';
for(var i=0; i<alldivs.length; i++){
if(patt.test(alldivs[i].id)){
printpageHTML = '<HTML><HEAD>\n' +
document.getElementsByTagName('HEAD')[0].innerHTML +
'</HEAD>\n<BODY>\n' +
alldivs[i].innerHTML.replace('inline-block','block') +
'\n</BODY></HTML>';
break;
}
}
var printWindow = window.open('','printWindow');
printWindow.document.open();
printWindow.document.write(printpageHTML);
printWindow.document.close();
printWindow.print();
printWindow.close();
Fixed: removed escaping for HTML characters.
Simple print functionality:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>
<script type="text/javascript">
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Set the print button to 'visible' again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = 'visible';
}
</script>
Related
I have a button linked on a Google Sheet that when the user clicks runs this function:
function ModalSelection(){
var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('main_gen');
var cell = ss.getRange(1,1).getValue();
if(cell == ''){
checkWindow(); //It runs this function if `cell` is empty.
//I would like to run another function here...anotherFunction()...but not until
//the user has made their selections from the Modal Dialog box.
}
else {send();} //send is not relevant to this question.
}
Here is the checkWindow() function:
function checkWindow(){
var ui = SpreadsheetApp.getUi();
var result = emailList(); //This is a string grabbed from another function.
//Call the HTML file and set the width and height
var html = HtmlService.createHtmlOutput(result)
.setWidth(400)
.setHeight(450);
//Display the dialog
var dialog = ui.showModalDialog(html, "Select your choices here.");
}
When the checkWindow() function is run and the user selects "Submit" it runs another short piece of code (see below) that inserts the users choices into a cell. I need to wait until this cell is no longer empty before proceeding to the next function.
function form_data(e){
SpreadsheetApp.flush();
var value = [e.email];
var val = value[0].toString();
for(var i = 1; i<value.length; i++){val += ', ' + value[i];}
SpreadsheetApp.getActiveSheet().getRange(2, 2).setValue(val);
//I have tried adding the anotherFunction(); function right here, but the code breaks and the only error I see
//in the console error log is "Uncaught". It gives me no additional details.
}
EDIT to include all HTML.
The HTML code is below (EmailCheckBox.html):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form id='myform'>
<table border=0>
%email
</table>
</form><br>
<input type="button" value="Submit" onclick="google.script.run.withSuccessHandler(google.script.host.close).form_data(document.getElementById('myform'))"/>
<input type="button" value="Close" onclick="google.script.host.close()"/>
</body>
The %email it refers to is this JS code:
function checkEmail(List){
var output = '';
for(var i=0; i<List.length; i++)
{
output += '<tr><td><input type="checkbox" name="email" id="' + List[i] + '" value="' + List[i] + '"/>'+ List[i] + '</td></tr>';
}
var result = HtmlService.createHtmlOutputFromFile('EmailCheckBox').getContent();
result = result.replace('%email', output);
Logger.log(result);
return result;
}
</html>
End EDIT
Any ideas how I can accomplish this? Thanks!
I believe your goal as follows.
You want to open the dialog of sendCheck after the process was finished at the dialog of checkEmailWindow.
For this, how about this modification?
Modification points:
In your script, checkEmailWindow() and sendCheck() are continuously run. By this, the dialog opened by checkEmailWindow() is overwritten by the dialog opened by sendCheck(). I think that this is the reason of your issue.
In order to open the dialog of sendCheck() after the process was finished at the dialog of checkEmailWindow, I modified google.script.run.withSuccessHandler(google.script.host.close).form_data(document.getElementById('myform')) as follows.
google.script.run.withSuccessHandler(google.script.run.sendCheck).form_data(document.getElementById('myform'))
By this, the dialog of sendCheck is opened after the process was finished at the dialog of checkEmailWindow.
For send() in Google Apps Script side:
From:
if(bccSend == ''){
checkEmailWindow();
sendCheck();
}
To:
if(bccSend == ''){
checkEmailWindow();
// sendCheck(); // Removed
}
HTML & Javascript side:
From:
<input type="button" value="Submit" onclick="google.script.run.withSuccessHandler(google.script.host.close).form_data(document.getElementById('myform'))"/>
To:
<input type="button" value="Submit" onclick="google.script.run.withSuccessHandler(google.script.run.sendCheck).form_data(document.getElementById('myform'))"/>
sendCheck is run with withSuccessHandler.
I have a messages page where i can see them as a list. If i select each one of them, I display them in the right side of the page. For that, I have two javascript functions for "next" and "previous" buttons for the messages' page. So I have a list of messages on the screen, if I click "next", I see the next page of messages and so on.
Everything work allright, the only problem is in Chrome, it wouldn't load the page number in a span section on the bottom of the page. This is the function for next page:
$("#next").click(function() {
var currentPageElem = $("#currentPage");
var totalPagesElem = $("#totalPages");
var minItemElem = $("#minItem");
var maxItemElem = $("#maxItem");
var totalItemsElem = $("#totalItems");
var itemsOnPageElem = $("#itemsOnPage");
var currentPageValue = parseInt(currentPageElem.val(), 10);
if (currentPageValue < totalPagesElem.val()) {
currentPageElem.val(currentPageValue + 1);
}
//the first record on the current page
minItem = $(this).getMinItem(currentPageElem.val(), itemsOnPageElem.val());
minItemElem.val(minItem);
//the last record on the current page
maxItem = $(this).getMaxItem(currentPageElem.val(), itemsOnPageElem.val(), totalItemsElem.val());
maxItemElem.val(maxItem);
$(this).showItems(minItem, maxItem);
var pageHtml = $(".pages").html();
$(".pages").html($(this).newPageHtml(pageHtml, currentPageElem.val()));
}); });
$.fn.newPageHtml = function(pageHtml, currentPage) {
var idx1=pageHtml.indexOf("Pagina ");
var idx2=pageHtml.indexOf(" / ");
var prevPage = pageHtml.substring(idx1 + 7, idx2);
return pageHtml.replace(prevPage, currentPage);
};
This is the html code that involves the js:
<input type="hidden" id="totalPages" name="totalPages" value="${totalPages}"/>
<input type="hidden" id="currentPage" name="currentPage" value="${currentPage}"/>
<input type="hidden" id="minItem" name="minItem" value="${minItem}"/>
<input type="hidden" id="maxItem" name="maxItem" value="${maxItem}"/>
...
<div class="controls">
<a class="prev" id="prev"></a>
<a class="next" id="next"></a>
<span class="pages">
<fmt:message key="messages.page">
<fmt:param>${currentPage}</fmt:param>
<fmt:param>${totalPages}</fmt:param>
</fmt:message></span></div>
are you try in firefox or safari?
what is your java version?
are you review in about:config if you have enable java/javascript in Chrome
I have solved the problem. There was an issue with the CSS files that wouldn't allow the text to transform correctly in Google Chrome. So I modified the style of the span class from above like this:
<span class="pages" style = " position: absolute; ">
Initially, the position of the span class was relative. I think Chrome has a problem with this type of CSS.
I have a html page with buttons:
<INPUT TYPE=BUTTON VALUE="b1" onclick="init1()" >
init1:
document.innerHTML = "<object type='application/x-app' id='plugin' width='0' height='0' > </object>"
When I press the button b1 it erase the page and it just blank.
What am I doing wrong?
10xs,
Nir
Use appendChild on body instead of replacing (=). Your button will not get erased.
var object = document.createElement("object");
object.innerHTML = "<object...";
document.body.appendChild(object);
You need to adres proper anchor (place) in your code (in the DOM tree).
Try this instead:
var my_anchor = document.getElementById('element_in_DOM');
my_anhor.innerHTML = "<object type='application/x-app' id='plugin' width='0' height='0' > </object>"
Of course it erases the page. When you modify the .innerHTML of the -entire document-, and replace it with something else, that's what happens.
If you want to append that tag onto the document however, that's a different story. I would suggest the following to do such:
var your_element = document.createElement('object');
your_element.type = 'application/x-app';
your_element.id = 'plugin'
your_element.width = 0;
your_element.height = 0;
document.body.appendChild(your_element);
DEMO
I have a table in a PHP page. It is a invoice.
So I want to print it after adding items to it,
and I had already done the coding part and all the things are working properly.
Now I just want to print that invoice table to a paper
by pressing a button. I searched on Google but no clue is found to do that.
Can any one help me?
This is my table on right hand side. It is populated by the form in left hand side
so I just want to print that right hand side table:
Try this one:
Add an attribute id to your table your_content
Place an anchor tag :
Print
And add script:
This script will initially show print preview of the content that is inside your table.
<script lang='javascript'>
$(document).ready(function(){
$('#printPage').click(function(){
var data = '<input type="button" value="Print this page" onClick="window.print()">';
data += '<div id="div_print">';
data += $('#your_content').html();
data += '</div>';
myWindow=window.open('','','width=200,height=100');
myWindow.innerWidth = screen.width;
myWindow.innerHeight = screen.height;
myWindow.screenX = 0;
myWindow.screenY = 0;
myWindow.document.write(data);
myWindow.focus();
});
});
Copy the script part and put it on the top of your page. And put the print link, [above anchor tag] wherever you want. And make sure you have included the jquery script file.
This would be too trivial of a situation for something like jQuery so you should use plain Javascript to do it. Place this somewhere on your page and see if it works:
Print
<script type="text/javascript">
function printPage(){
var tableData = '<table border="1">'+document.getElementsByTagName('table')[0].innerHTML+'</table>';
var data = '<button onclick="window.print()">Print this page</button>'+tableData;
myWindow=window.open('','','width=800,height=600');
myWindow.innerWidth = screen.width;
myWindow.innerHeight = screen.height;
myWindow.screenX = 0;
myWindow.screenY = 0;
myWindow.document.write(data);
myWindow.focus();
};
</script>
You can see the demo here: http://jsfiddle.net/Pxqtb/
i used this code and it solved my problem. thank you all for helping me.....
function printlayout() {
var data = '<input type="button" value="Print this page" onClick="window.print()">';
var DocumentContainer = document.getElementById('printlayout');
//data += $('printlayoutable').html();
//data += '</div>';
var WindowObject = window.open('', "TrackHistoryData",
"width=740,height=325,top=200,left=250,toolbars=no,scrollbars=yes,status=no,resizable=no");
WindowObject.document.writeln(DocumentContainer.innerHTML);
//WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
You have a few options. (1) If you create a new HTML page with just the invoice, the user can print that page using the browser's print capacity. (2) Alternatively, you can allow the user to download an invoice document which you create and print that. (3) You can use the JavaScript command window.print(); in conjunction with #1. Have a look at this.
I am using Asp.Net/C# , I am having a requirement wherein I want to display a confirm before submission of data , if user clicks OK button , then proceed , or else cancel the submission.I know javascript confirm box does this , but in my case I need to show my own popup , Can anyone suggest me how can I achieve this.I would not want to use any plugin here.
Thanks for any suggestions.
you can create as follow:
function createPopup() {
//Get the data from the form fields
var background = document.custom.back.value;
var title = document.custom.title.value;
var text = document.custom.text.value;
//Now create the HTML code that is required to make the popup
var content = "<html><head><title>"+title+"</title></head>\
<body bgcolor='"+background+"'><h1>"+title+"</h1>"+text+"<br />\
<a href='javascript:window.close()'>Close the popup</a></body></html>";
//Create the popup
var popup = window.open("","window","resizeable,width=400,height=300");
popup.document.write(content); //Write content into it.
pops.document.close();
}
the logic should like as follow: i have not executed and tested just see the logic ignore minore mistakes if any.. also set the layout, border look like the confirmation window.
function popup() {
alert('popup called');
//Now create the HTML code that is required to make the popup
var content = "<html><head><title>ConfirmBox</title></head><body >Do you want to continue ? <br />
<input type='button' value='ok' onclick='return true'/>
<input type='button' value='cancel' onclick='return false'/> <a href='javascript:window.close()'>Close the popup</a></body></html>";
//Create the popup
var popup = window.open("","window","resizeable,width=400,height=300");
popup.document.write(content); //Write content into it.
pops.document.close();
}
refer http://www.openjs.com/tutorials/advanced_tutorial/popup.php