0

I'm working on an Angular app that needs to be able to print tables in a nice format. The table does lazying rendering of the rows (a.k.a the limitTo filter from ng-repeat) to prevent Angular from two-way databinding all the data (up to 1000 items) on page load.

The app has a button with ng-click that calls an Angular function. This function first makes an Ajax call with $_POST variables to fetch the HTML from a PHP file and then uses a service to open the page in a new window.

The PHP file uses $_POST variables to create the HTML page with all the data (rows, sort column, table name, etc). This is required as the original page does not have all the rows rendered (limitTo filter) as mentioned earlier.

This is the button that calls the function:

<button class="new-button" ng-click="printTable()">
    Print
</button>

Here is the service for printing below. Note: the html parameter for printWindow is the HTML returned from the AJAX call in printTable() in the controller:

angular.module('appServices', [])
.factory('PrintService', 
["$window",
 function($window){
    return {
        printWindow: function(html){

            var newWin= $window.open("", "_blank");
            newWin.document.write(html);
            newWin.document.close();
            newWin.focus();
        }
    }
} ])...

The code works fine on Firefox, Chrome, and Opera.

However, I'm having a problem getting window.open (or $window.open) to work on the Safari web browser. The browser returns: Error: undefined is not an object (evaluating 'newWin.document')

I did some searching through the forums and read that Safari implements window.open differently. Some people recommended using a link tag with target '_blank' or using onclick with window.open.

Unfortunately, either solution would not work for me as I need to pass $_POST parameters to my PHP page. Secondly, the printTable() function lives in $scope to access the Ajax calling functions. Finally, it is possible that ng-click may also be blocked in Safari from creating windows.

Thank you in advance for providing any suggestions that would be helpful.

Claies
  • 22,124
  • 4
  • 53
  • 77
noodle_wave
  • 255
  • 2
  • 10
  • I found that that disabling pop-blocker in Safari's settings allows window.open to work. Preferably, another method would be better. – noodle_wave Jul 08 '15 at 17:00
  • I also found that with JQuery you might be able to bypass Pop ups using synchronous ajax calls (http://stackoverflow.com/questions/9514698/bypass-popup-blocker-on-window-open-when-jquery-event-preventdefault-is-set), but that appears not to be possible in Angular (http://stackoverflow.com/questions/13088153/how-to-http-synchronous-call-with-angularjs). – noodle_wave Jul 08 '15 at 17:11

1 Answers1

0

I solved the problem by returning JQUERY's $.ajax in a custom service (instead of Angular's $http) and using the the property {async: false}. This makes the ajax call blocking, but Safari now allows the window to be opened.

Since I'm using JQUERY 2.0, the console gives the following warning though: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/

noodle_wave
  • 255
  • 2
  • 10