Unable to open “Print Dialog” with JQueryUI Dialog on Google Chrome

Question

I'm actually using JQueryUI Dialog plugin to show some information to the users of my site. The content of this dialog can be printed, so I need to open a print dialog (from browser) when I click on a button.

I'm creating this dialog like this (this is just an example; I modified content and size):

var box = $('<div id="print-dialog" title="Print map">blablabla....</div>');
box.dialog({
   width: 100,
   height: 100,
   modal: true,
   draggable: false,
   resizable: false,
   close: function(event,ui){
      $('#print-dialog').remove();
   },
   buttons: {
      "Print this!": function(){
          window.print();
       }
   }
});

But when I click on 'Print' button, nothing happens. I tried the same example on Firefox and IE and works fine.

You can try to execute my code on JSBin right here: http://jsbin.com/osoro3

What do I need? Am I doing something wrong? Thanks!

Answer 1

This works fine in the latest Chrome Beta build, 10.0.648.127. I think you're just experiencing weirdness in the Chrome Canary Build. Remember, the Canary Build is released without any testing to ensure that it actually works , and as such is "a highly unstable browser that will often break entirely."

In this case, the same code seems to work once when pasted in JSFiddle and viewed in Chrome 11.0.691.0. The first time the button is clicked, the print dialog is shown, but if you cancel it and click the button again, nothing happens. (This also seems to be a Chrome bug – the same thing happens in this very vanilla test .)

Bottom line: Given the high likelihood of bugs (like this one), I wouldn't develop anything against the Chrome Canary Build. I recommend sticking with the Beta channel for actual development work and only using the Canary Build if you want to experiment with a new feature that hasn't made it to the Beta channel yet.