CODEWITHSUNDEEP
javascriptjqueryprintingpopup
robins
robins

Reputation: 1668

How to print the pop up window content with the main content

I want to print the content of my page. But that contain a popup. I need to display the pop up window content in my main page contain a button name Details. When I click the button a pop up will show.

When I click my print button.Only show the main content. The particular field for the pop up displaying window is blank (Details button)

I'm using window.print();

print button=> 'onclick="printpage()"'

function

function printpage()
{
    $('#hiddendiv').html($('#view_popup_descriptive_index').html()); 
    $('#hiddendiv').show();
    window.print();
    $('#hiddendiv').hide();
}

Any method to display the popup content.

Upvotes: 1

Views: 4051

Answers (1)

skip405
skip405

Reputation: 6279

You may try appending the HTML from the popup to the page before printing.

$("#print").on('click', function(){
    //find HTML
  var $popupContent = $('.popup').html();

  //console.log($popupContent); //see what you really get from the popup

  //create a div before the button and put the popup content there
  $(this).before($('<div />', {
    'class': 'created',
    'html': $popupContent
  }));

  //trigger printing
  window.print();

  //remove the dynamically created container
  $('.created').remove();
})

You can see it working online here - https://jsfiddle.net/skip405/6dt2dhm7/

Upvotes: 1

Related Questions