Thursday, 12 September 2013

Why doesn't jQuery dialog open event fire when .dialog("open") is called?

Why doesn't jQuery dialog open event fire when .dialog("open") is called?

I define a #scan-date-select dialog in the code below. When I define this
dialog, I attach an "open" event handler that is supposed to create a
datepicker widget that should appear inside the dialog. The dialog opens
correctly, but this open event never gets called. I need to know why the
open event handler is failing to get triggered. I have spent two days
trying to figure out what is wrong. I really hope someone here can help.
This is the HTML:
<div class="footer_all_pro clearfix">
<ul class="Printing-options clearfix">
<li>Shipping Labels:</li>
<li class="print-usps-label shipper-logo"><a
href="#"><img class="print-label-logo"
src="/dev/skin/images/logo_endicia.png"></a></li>
<li class="print-label shipper-logo"><a
href="#"><img class="print-label-logo"
src="/dev/skin/images/logo_ups.png"></a></li>
<li class="print-fed-label shipper-logo"><a
href="#"><img class="print-label-logo"
src="/dev/skin/images/logo_fedex.png"></a></li>
<li class="print-invoice"><a href="#">Packing
Slip</a></li>
<li class="print-pick"><a href="#">Pick List</a></li>
<li class="print-scan"><a href="#">SCAN Report</a></li>
<li class="del-scr"><span><img
src="/dev/skin/images/print-pick.png"></span><a
href="#" style="margin-top: -20px;">Delete</a></li>
<li class="del-arc"><span><img
src="/dev/skin/images/print-pick.png"></span><a href="#"
style="margin-top: -20px;">Archive</a></li>
<li class="send_email"><span><img
src="/dev/skin/images/print-pick.png"></span><a href="#"
style="margin-top: -20px;">Send Email</a></li>
<!-- <li class="del-all-inv"><span><img
src="/dev/skin/images/print-pick.png" /></span><a href="#"
style="margin-top: -20px;">Delete All</a></li>-->
</ul>
</div>
Here is the jQuery:
$( ".print-scan a" ).click(function(e) {
var $dialog = $("<div></div>")
.dialog({
title: "Confirm SCAN Report",
modal: false,
resizable: false,
scrollable: true,
width: 300,
height: 250,
position: { my: "center", at: "center", of: "article#dialog" },
buttons: { "No": function() { $( this ).dialog( "destroy" ); return false; },
"Yes": function() {
$(this).dialog("destroy");
$("<div id=\"scan-date-select\"></div>")
.dialog({
title: "Select SCAN Date",
modal: true,
resizable: false,
position: { my: "center", at: "center", of:
"article#dialog" },
open: function(event, ui) {
var $rptDate = $("#scan-date-select
.ui-dialog-content") //$(this)
.datepicker({ autoSize: true })
.datepicker("show");
console.log($(this));
console.log($rptDate);
//return false;
},
buttons: { Cancel: function() {
$(this).dialog("destroy"); return false; },
"Create Report": function() {
var selectedDate =
$rptDate.datepicker("getDate");
if(selectedDate == null) {
return false;
}
$(".request-print-label")
.attr("action",envPath +
"/partner/uspsscan")
.append('<input type="hidden"
name="rpt-date"
value="'+selectedDate+'" />')
.submit();
$(this).dialog("destroy");
return false;
}
}
})
.html("<div style=\"padding: 15px\">Please select a
transaction date for the SCAN Report</div>")
.dialog("open");
}
}
})
.html("<div id=\"confirm-scan\" style=\"padding: 15px\">CAUTION: Once
shipping labels are included on the SCAN Report, you will be unable to
issue refunds for these labels. Proceed anyway?</div>")
.dialog("open");
});

No comments:

Post a Comment