3

I use JQwidgets ,, I use to print data onclick print-button as code :

$("#print").click(function () {
     var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
     var newWindow = window.open('', '', 'width=800, height=500'),
     document = newWindow.document.open(),
     pageContent =
         '<!DOCTYPE html>\n' +
         '<html>\n' +
         '<head>\n' +
         '<meta charset="utf-8" />\n' +
         '<title>jQWidgets Grid</title>\n' +
         '</head>\n' +
         '<body>\n' + gridContent + '\n</body>\n</html>';
         document.write(pageContent);
         document.close();
         newWindow.print();
});

When I close printing-widow(not continue printing), I can't use the grid-scroll (on chrome)..

google-chrome Version 34.0.1847.131 m

This worked fine on Firefox and IE..

How to fix the scroll after closing printing-window on chrome

Fiddle-Demo

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
Muath
  • 4,351
  • 12
  • 42
  • 69
  • I'm using chrome and it scrolls (horizontally) before and after the print function is invoked. – Kevin Lynch May 06 '14 at 20:41
  • @Vector if the error doesn't appear please let me know ,, still trying to fix this – Muath May 07 '14 at 11:29
  • I tried it using chrome, opened/shut print dialog. I tried a multitude of combinations, the scrolling always works ok – Kevin Lynch May 07 '14 at 17:56
  • 4
    There's a bug in the Chrome browser - when you open a new window, it will use the same renderer as the old one. However, calling window.print stops all javascript and if you close the new window before closing the print dialog, the old window's javascript will be still stopped. – scripto May 07 '14 at 18:07
  • @scripto nice explanation, yeah it looks like you do unbind() for all JQwidgets components ,, any suggestion how to fix – Muath May 08 '14 at 15:26
  • 1
    there's nothing related to bind/unbind or anything like that. If you don't close the Print Dialog before closing the Window, you will experience an issue. Otherwise, you will not, because the browser will know that the Print Dialog is closed and will have Valid State – scripto May 08 '14 at 21:39
  • @scripto If that's true then why does sorting still work? – Ian May 15 '14 at 07:56
  • the browser's window is in Invalid State when you close a window opened from it, before closing the Print dialog. I do not know how to explain it more clearer than that. – scripto May 15 '14 at 09:28

3 Answers3

1

It looks like you're not the only one with this issue.

I understand that your code is already setup and you want to run with what you have, but unless someone comes up with a hack or Google decided to fix what is clearly a bug, I think you need to re-think how you are approaching this issue.

If chromeless windows were an option, or if the print dialogue were a modal then you could pull this off with the current strategy, but neither of those options are possible in Chrome. Even if you were able to get around this scrolling issue somehow you're still left with a less than desirable UX problem in that if the user hits "cancel" in the print dialogue then they are left with a still open blank window.

Here is a JS fiddle to demonstrate that you need to change your approach: DEMO You can see from this demonstration that even if we run a completely separate script from within the new window by passing it as plain text in the content object, it still causes the same issue. This means to me that this is a parent/child type of a relationship that is not easily circumvented with JS.

I recommend 2 alternative possible solutions:

Option1: 
<input type="button" value="Print" onclick="window.print(); return false;"  />

This triggers a full screen print dialogue that can't be closed from the "Windows Close Button." That way you can avoid the issue all together. Then you can use a combination of JS and Print Styles to target and isolate the information you want to print. I know it's more work but I think may be the better cross-platform solution.

This option is more brute force and simplistic in nature (and you have already commented that you know this but I'm leaving it up because it's still an option).

DEMO

Option2:
  1. User clicks on a link/button that opens a new tab/window
  2. In the same function the data from your table gets loaded into a JSON Object
  3. The JSON object is loaded into a print template in the new tab/window
  4. the template initiates the print function

By taking these actions, I think you will have disassociated the JS instance enough that the new tab will not affect the initiating script.

Muath
  • 4,351
  • 12
  • 42
  • 69
Ian
  • 653
  • 3
  • 12
  • I need to make new window , so I can change the contents of the opened-window by building It as question asked. – Muath May 15 '14 at 09:23
  • Can you elaborate on this? I don't understand what you are trying to do. Ian's answer makes some sense for sure - *avoid* the bug because a bug is a bug. – Nicholas DiPiazza May 16 '14 at 04:04
0

This is a browser bug - you'd have to find some sort of hack to fix it.

Doesn't sound like you want to put the print dialog code elsewhere thus not affecting your scroll bar. That is the obvious solution but it sounds like you can't do that.

Here's what I would do: Wait until someone has triggered the problematic condition, then put an event listener on the scroll event. when it happens... go ahead and reload the page.

Simple, easy, fun. 

var needToReload = false;

$("#print").click(function () {
... as you have
    needToReload = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
}

$('#contentjqxgrid').scroll(function () {
    if (needToReload) {
       window.location.reload();
    }
});
Nicholas DiPiazza
  • 10,029
  • 11
  • 83
  • 152
0
$("#jqxscrollbar").jqxScrollBar({
    width: 5,
    height:180,
    theme:'energyblue',
    vertical:true
});

$("#jqxscrollbar1").jqxScrollBar({
    width: 300,
    height:5,
    theme:'energyblue'
});

Look at jsfiddle: http://jsfiddle.net/8PtUX/6/

thriqon
  • 2,458
  • 17
  • 23
overflow
  • 145
  • 8