customize print button of print dijit

[KellyEmmons1]

I am using the sample code to create a print dijit.  I needed to change the word 'Print' on the button to a printer icon, which I have done using jquery.  But once the button is clicked, the word 'Printing' still appears and then it undoes my printer icon and goes back to the word 'Print'.  How can I customize this button during and after the printing process in addition to beforehand?  Below is the jquery I added to the createPrintDijit function.

function createPrintDijit(printTitle) {
var layoutTemplate, templateNames, mapOnlyIndex, templates;
       
   // create an array of objects that will be used to create print templates
   var layouts = [
  {
  "name": "Letter ANSI A Landscape",
  "label": "Landscape",
  "format": "pdf",
  "options": {
   "legendLayers": [], // empty array means no legend
   "scalebarUnit": "Miles",
   "titleText": "The Title"
   }
    }
];
       
   // create the print templates, could also use dojo.map
    var templates = [];
    dojo.forEach(layouts, function(lo) {
     var t = new esri.tasks.PrintTemplate();
      t.layout = lo.name;
       t.label = lo.label;
       t.format = lo.format;
       t.layoutOptions = lo.options
       templates.push(t);
   });

  app.printer = new esri.dijit.Print({
     "map": map,
  "templates": templates,
  url: app.printUrl,
        }, dojo.byId("printButton"));
  
app.printer.startup();

// fix the print button
$('#dijit_form_Button_0').css('display', 'inline-block');
$('#dijit_form_Button_0').css('width', '24');
$('#dijit_form_Button_0').css('height', '24');
 
var img = $('<img class="inline" src="/images/printer_icon.png" height="24" width="24" />');
$("#dijit_form_Button_0").prepend(img);
$("#dijit_form_Button_0_label").text('');
}

[KellyHutchins]

Attached is a sample that shows how to make the print button show up in your fiddle and also how to add a print icon.Here are details on the fixes:

• Missing print button: to solve this we can add sampleserver6 to the list of cors enabled servers using esriConfig.defaults.io.corsEnabledServers (see approximately line 93 of print.html).  This works because sampleserver6 supports cors. If both the browser and server support cors then you don't need the proxy to make cross domain requests. You can test your server for cors support using this site.   To determine if the browser supports CORS check Can I use.
• Print icon: You can add a print icon to the widget using css. In the attached example we created a css class and specified the path to the print image along with a few other properties. See the .esriPrint class at approximately line 45 of print.html.

[KellyHutchins]

And in the sample I attached to my previous email if you don't want the text to display set lines 78-90 equal to an empty string. The problem with setting the printout to an empty string is that you won't have anything to click on when the print is complete because there won't be any text to display for the printout hyperlink.

 esriBundle.widgets.print.NLS_print = "";
        esriBundle.widgets.print.NLS_printing = "";
        esriBundle.widgets.print.NLS_printout= "";

[KevinMacLeod1]

Just wanted to drop back and say thanks again, your solutions worked perfectly! Thanks Kelly and to the rest of the great folks here. 

[OttoArturo]

Hello Kelly

I implemented your example code in my app. I am using the proxy provided by ESRI on GitHub in my app because I use secured layers. The problem I have is that Print widget does not work when I using the proxy. Without the proxy I only can load the basemap but the Print Widget works. Can you help me please,

Thank you

Otto