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('');
}