I ran into two problems, the first of which I solved with a hack (IMHO), the second on which I'm stuck. When the user click any where on the dialog, not just the close button the dialog closes; why? Work around: grab the event using beforeClose. Examining the event in the debugger I can find the info for the second file deep in the DOM, However, I can't find which table cell the user clicked. There might be other cells with pointers to files with other information, which the user might click to get that particular information. My immediate question is how can I find the table cell the user clicked?
** HTML actually php **
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Financial Compare</title>
<style type="text/css" title="currentStyle">
@import "../css/demo_table.css";
@import "../css/demo_page.css";
@import "../css/jquery.dataTables.css";
@import "../css/jquery.dataTables_themeroller.css";
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="dialog3.js"></script>
<link href="../css/popup.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div id="container"> <div id="myDialogText"> </div> </div>
<?php
//$theFileName = "S6GSL6W1_outQuarter.html";
$theFileName = "QZh7SU2d_outQuarter.txt"; // this is determined by the user in the actual case
?>
<button id="qopen" type="button" qdata=<?php echo $theFileName ?> >Get Quarterly Results</button>
<button id='opener'>Show Quarterly Data</button>
<script type="text/javascript">
$("#opener").hide();
</script>
</body>
</html
==============================
**javascritpt**
var gdata;
$(document).ready(function() {
$('#qopen').click(function(event) {
//event.preventDefault();
jData = $(this).attr("qdata");
showUrlInDialog('GetPopData.php', jData);
$("#qopen").hide();
$("#opener").show();
});
$('#cocell').click(function(event) {
alert("In cocell from dialog3.js");
jData = $(this).attr("path");
showUrlInDialog('GetPopData.php', jData);
$("#qopen").hide();
$("#opener").show();
});
function showUrlInDialog(url, jData){
var tag = $("#container");
$.ajax({
url: url,
type: "POST",
data: {path: jData},
datatype: "html",
success: function(rdata) {
gdata = rdata;
}
});
};
var MainComp = $('#container')
.dialog({
autoOpen: false,
beforeClose: function( event, ui ) {
alert(event.target.innerHTML);
return false;
},
close: function(event, ui){
var e = event;
//MainComp.dialog( "close" );
//MainComp.dialog( "destroy" );
//alert("in close");
},
title: 'Financial Data',
dialogClass: "popup_box" ,
dialogClass: "container"
});
$('#opener').click(function() {
$("#myDialogText").html(gdata);
MainComp.dialog('open');
// prevent the default action, e.g., following a link
//return false;
});
});
NOTE: The #opener button was the first hack since putting the code to open the dialog in the success call to AJAX didn't work.