3

This is what I want to do:

  1. User clicks print button;
  2. This calls function, which does ajax call to get the text to be printed;
  3. A new window is opened and the text is written to this.

The window and print is handled like this:

 my_text = "hello";

 newWin= window.open();
 newWin.document.write(my_text);
 newWin.document.close();
 newWin.focus();
 newWin.print();
 newWin.close();

This works fine. My issue is how to get my_text. I have tried to put the above code inside an ajax call:

$.ajax({
        type: "GET", url: the_url, data: {},
        success: function(data){
             newWin= window.open();
             newWin.document.write(data);
             newWin.document.close();
             newWin.focus();
             newWin.print();
             newWin.close();
        }
        ,error: function() {
        } 
     });

However, this causes the new window to be seen as a pop-up and it's caught by the pop-up blocker. If I choose to see the pop-up message then it has correctly filled in the text. I tried opening the window first, but then nothing gets written to it.

curtisdf
  • 4,130
  • 4
  • 33
  • 42
user984003
  • 28,050
  • 64
  • 189
  • 285
  • Ajax is usually intended to send an asynchronous request without reloading the page... but you're opening a new window. Why not just make a link to the page instead of making an ajax request to it? – Samuel Reid Jun 27 '13 at 16:55
  • 1
    That's totally what I'm going to do! Edit: Just did it :) In the page that opens add window.print(); to automatically open the print dialog. – user984003 Jun 27 '13 at 17:17

2 Answers2

4

Try moving the line:

newWin = window.open();

before the $.ajax(...) call. Your window will open immediately, and when the ajax call completes, your success handler should be able to write to it. You would end up with something like:

var newWin = window.open();
$.ajax({
    type: "GET", url: the_url, data: {},
    success: function(data){
        newWin.document.write(data);
        newWin.document.close();
        newWin.focus();
        newWin.print();
        newWin.close();
    }
    ,error: function() {
    }
});

Simplified version using setTimeout for "proof on concept" purposes.

<html>
<head>
<script>
function openWindow() {
  var win = window.open("about:blank", "", "width=800,height=600");
  setTimeout(function() {
    win.document.write("Hello world!");
    win.document.close();
  }, 1000)
}
</script>
</head>
<body>

<button type="button" onclick="openWindow()">Click me</button>

</body>
</html>
Sean
  • 4,365
  • 1
  • 27
  • 31
  • I started by trying that, but nothing ever got written to the new window. – user984003 Jun 27 '13 at 19:11
  • Sounds like your AJAX call might not be completing successfully. I tried a simplified use case using setTimeout instead of an AJAX call, and it worked fine. I'll append this simplified case to my answer. You might to put an alert of something in your error handler function. – Sean Jun 27 '13 at 19:30
  • The whole thing is probably moot though. Samuel Reid's suggestion sounds like the way to go. – Sean Jun 27 '13 at 19:39
1

Popup blockers block any window that isn't opened by a direct user action (such as clicking the mouse.) But since your AJAX call is asynchronous, the browser doesn't think it's part of your button-click event.

Try adding async: false as a config parameter in your $.ajax() call. However, using synchronous AJAX requests has a side-effect of freezing your web page momentarily while the data is loading. Instead of using window.open(), you may want to find another way to print the data. You could just provide a link to the printable page and bypass needing any JavaScript in the first place. That may be the simplest of all. Or you might be able to use a separate stylesheet in conjunction with CSS's @media print attribute to hide your page's normal content and only print what came in via AJAX.

curtisdf
  • 4,130
  • 4
  • 33
  • 42