This is what I am trying to build
1) Trying to integrate jQuery UI Dialogs into my application
Effort is to open different html views into the same dialog based on a click on different href links.
Enclosing a small snippet
a) This is the container
<!--Start : report Dialog Container-->
<div id="reportDialog" style="display:none;">
<iframe frameborder="0" scrolling="no"></iframe>
</div>
b) To open a dialog
var open = function (reportId, description) {
var opt = {
autoOpen: false,
modal: true,
resizable: false,
width: 650,
height: 650,
title: description
};
var theDialog = $("#reportDialog").dialog(opt);
$('#reportDialog').load('/app/components/reports/' + reportId + 'View.html', function () {
$(this).dialog('open');
});
The problem that I am facing currently is trying to use third party controls like sumoSelect to be applied to a SELECT element. This would be controls loaded in the individual reports in the dialog. The issue here is the
$('.SlectBox').SumoSelect({ csvDispCount: 3 }); should be executed after the html content is loaded in the jquery ui dialog , else it wont work.
<select name="curAsOfDate" class="SlectBox">
<option value="1">Q1 2015</option>
<option value="2" selected="selected">Q4 2014</option>
<option value="3">Q3 2014</option>
<option value="4">Q2 2014</option>
<option value="5">Q1 2014</option>
</select>
$('.SlectBox').SumoSelect({ csvDispCount: 3 });