I have couple modal windows and I am trying to add "print this" functionality. I found a script and I am trying to modify this. He creates an iframe, loads the html, prints and then closes the frame. I am going to insert my ajax html response to that div. For some reason, my ajax response is not loading into the div that 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 accomplish this?