javascript: Print text that is received via ajax

javascript ajax popup-blocker

16,749

Solution 1

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>

Solution 2

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.

16,749

user984003

Updated on September 16, 2022

Comments

user984003 over 1 year
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.
- user984003 almost 11 years
  
  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 almost 11 years

I started by trying that, but nothing ever got written to the new window.
user984003 almost 11 years

Thanks. Yeah, it sound like there just isn't a great way with ajax.
Sean almost 11 years

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 almost 11 years

The whole thing is probably moot though. Samuel Reid's suggestion sounds like the way to go.