Jquery to print from modal window
I have several modals and I am trying to add "print this" functionality. I found a script and I am trying to change this. It creates an iframe, loads the html, prints and then closes the frame. I am going to insert my html ajax response on this div. For some reason, my ajax response is not loading into the div I want to print. This is what I have:
// Create a jquery plugin that prints the given element.
jQuery.fn.print = function(){
// NOTE: We are trimming the jQuery collection down to the
// first element in the collection.
if (this.size() > 1){
this.eq( 0 ).print();
return;
} else if (!this.size()){
return;
}
// ASSERT: At this point, we know that the current jQuery
// collection (as defined by THIS), contains only one
// printable element.
// Create a random name for the print frame.
var strFrameName = ("printer-" + (new Date()).getTime());
// Create an iFrame with the new name.
var jFrame = $( "<iframe name='" + strFrameName + "'>" );
// Hide the frame (sort of) and attach to the body.
jFrame
.css( "width", "1px" )
.css( "height", "1px" )
.css( "position", "absolute" )
.css( "left", "-9999px" )
.appendTo( $( "body:first" ) )
;
// Get a FRAMES reference to the new frame.
var objFrame = window.frames[ strFrameName ];
// Get a reference to the DOM in the new frame.
var objDoc = objFrame.document;
// Write the HTML for the document. In this, we will
// write out the HTML of the current element.
objDoc.open();
objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
objDoc.write( "<html>" );
objDoc.write( "<body>" );
objDoc.write( "<head>" );
objDoc.write( "<title>" );
objDoc.write( document.title );
objDoc.write( "</title>" );
objDoc.write( "<div id='viewNotes'></div>" );
objDoc.write( "</head>" );
//objDoc.write( this.html() );
objDoc.write( "</body>" );
objDoc.write( "</html>" );
//objDoc.close();
formData = 'cmid=C93F52DCE21ABBD5';
$.ajax({
url: 'ajax/ajax_get_notes.cfm',
type: 'GET',
data: formData,
cache: false,
success: function(result) {
$('#viewNotes').html(result);
},
error: function(xmlHttpRequest, status, err) {
$('#viewNotes').html('error:'+err);
}
});
// Print the document.
objFrame.focus();
//objFrame.print();
// Have the frame remove itself in about a minute so that
// we don't build up too many of these frames.
setTimeout(
function(){
jFrame.remove();
},
(60 * 1000)
);
alert('i am here');
}
What am I doing wrong? Is there a better way to do this?
a source to share
I see a couple of wrong ones.
First, the iFrame is not created because there is no end tag. Second, the iFrame is never added to the page. Third, the jFrame CSS is not correctly declared (must be "#frame"). Fourth, the html tags are in the wrong order.
I think you can go with something like this:
var strFrameName = ("printer-" + (new Date()).getTime());
// Create an iFrame with the new name.
var jFrame = $( "<iframe name='" + strFrameName + "'><div id='viewNotes'></div></iframe>" );
// Get a FRAMES reference to the new frame.
var objFrame = window.frames[ strFrameName ];
// Get a reference to the DOM in the new frame.
var objDoc = objFrame.document;
// Write the HTML for the document. In this, we will
// write out the HTML of the current element.
objDoc.open();
objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
objDoc.write( "<html>" );
objDoc.write( "<head>" );
objDoc.write( "<title>" );
objDoc.write( document.title );
objDoc.write( "</title>" );
objDoc.write( "</head>" );
objDoc.write( "<body>" );
objDoc.write( jframe );
objDoc.write( "</body>" );
objDoc.write( "</html>" );
//objDoc.close();
formData = 'cmid=C93F52DCE21ABBD5';
$.ajax({
url: 'ajax/ajax_get_notes.cfm',
type: 'GET',
data: formData,
cache: false,
success: function(result) {
$('#viewNotes').html(result);
},
error: function(xmlHttpRequest, status, err) {
$('#viewNotes').html('error:'+err);
}
});
//print
a source to share
I ended up implementing something else. I have created another page called printNotes.cfm that resembles a text box for notes. I have attached the window.open event to the "printable" button in the modal window. Clicking this button runs printNotes.cfm and this page loads the entries via ajax. A printer button appears in printNotes.cfm and a one-shot window.print () event is fired.
It works like a charm.
thanks
a source to share