JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Residential Lending Dashboard</title>
<link rel="stylesheet" type="text/css"
href="/jquery/ui-1.9.2/css/black-tie/jquery-ui-1.9.2.custom.css">
<script type="text/javascript" src="/jquery/jquery-1.8.3.min.js"></script>
</head>
<body class="newCSS">
<div id="subdashboard-box">
<iframe class="subdashboard" id="subdashboard" name="subdashboard">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Loan Officers Dashboard</title>
<link href="/include/jquery/ui-1.9.1/css/black-tie/jquery-ui-1.9.1.custom.css" type="text/css" rel="stylesheet">
<link href="/include/jquery/plugins/tablesorter-2.4.3/addons/pager/jquery.tablesorter.pager.css" type="text/css" rel="stylesheet">
<script src="/jquery/jquery.1.8.3.min.js" type="text/javascript"></script>
<script src="../inc/subdashboard.js" type="text/javascript"></script>
<script src="../inc/npbactionmenu-0.2.js" type="text/javascript"></script>
</head>
<body class="newCSS">
<div class="subdb_section">
<h1 class="bg6">Loan Officers Dashboard</h1>
<ul>
<li>
<a href="javascript:;" data-npbactionmenu-item='{"call":"borrower_summary","label":"Borrower Summary (Word)","args":{"loan_number":"0000000000"}}' class="npbactionmenu-item">Borrower Summary (Word)</a>
</li>
<li>
<a href="javascript:;">Checklists</a>
<ul>
<li>
<a href="javascript:;"...
JavaScript
// Parent JS creating DIALOG - all of this works.
function afterOpen() {
$('body').addClass('no-scroll');
var $dialog = $('#subdashboard'),
_name = $dialog.prop('name'),
_title = $dialog.parent().dialog('option', 'title');
$dialog.addClass('hide').parent().dialog('option', {
title: _title.replace(' ...Loading live data, please wait...', '') + ' ...Loading live data, please wait...'
}).removeClass('bgOff').end().data({
subdashboard: _name
}).unbind('load') // Prevents multiple bindings of load()
.load(childIFrame_Load).prop({
src: 'subdash/' + _name + '.php'
});
}
function beforeClose() {
var $dialog = $('#subdashboard').unbind('load').prop({
src: null
});
$('body').removeClass('no-scroll');
}
$('#subdashboard-box').dialog({
autoOpen: false,
close: beforeClose,
buttons: {
"New Window": function() {
newSubdashWindow($('#subdashboard').data('subdashboard'));
$(this).dialog('close');
},
"Refresh": function() {
$('#subdashboard').data({
subdashboard: ''
});
afterOpen();
},
"Close": function() {
$(this).dialog('close');
}
},
height: $winH - 30,
hide: 'scale',
modal: true,
open: afterOpen,
show: 'scale',
width: $winW - 50
});
// IFRAME JS
$('ul').npbActionMenu();