JQuery для печати из модального окна - PullRequest
2 голосов
/ 19 мая 2010

У меня есть пара модальных окон, и я пытаюсь добавить функциональность «напечатать это». Я нашел скрипт и пытаюсь его изменить. Он создает iframe, загружает html, печатает и затем закрывает фрейм. Я собираюсь вставить свой ответ hjml ajax на этот div. По какой-то причине мой ответ ajax не загружается в div, который я хочу напечатать. Вот что у меня есть:

 // 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');
}

Что я делаю не так? Есть ли лучший способ сделать это?

Ответы [ 2 ]

2 голосов
/ 19 мая 2010

Я вижу несколько вещей не так.

Во-первых, iFrame не создается, потому что нет закрывающего тега. Во-вторых, iFrame никогда не добавляется на страницу. В-третьих, CSS-код jFrame объявлен неправильно (должно быть «#jframe»). В-четвертых, HTML-теги расположены в неправильном порядке.

Я думаю, вы можете пойти с чем-то вроде этого:

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
0 голосов
/ 20 мая 2010

В итоге я реализовал что-то другое. Я создал еще одну страницу с именем printNotes.cfm, которая напоминает модальное окно заметок. Я прикрепил событие window.open к кнопке «версия для печати» в модальном окне. При нажатии запускается printNotes.cfm, и эта страница загружает заметки через ajax. В printNotes.cfm есть кнопка принтера и запускается событие window.print () после нажатия.

Работает как шарм.

спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...