Help With Multiple Dialog Search Modals on one page.
- <!-- PROGRAM MANAGER MODAL AND SCRIPT -->
<div id="dialogSearch" title="Search Project Managers">
<input class="form-control input-sm" type="text" id="progManagerModal" />
<div class="input-group-addon"><a href="#" id="progManagerModalSearch">
<span class="glyphicon glyphicon-search"></span></a>
</div>
<div id="managerList">
<table id="managerGrid"></table>
</div>
</div>
- <!-- CURRENT PRODUCT MODAL AND SCRIPT -->
<div id="dialogSearch" title="Search Current Products">
<input class="form-control input-sm" type="text" id="curProdModal" />
<div class="input-group-addon"><a href="#" id="curProdModalSearch">
<span class="glyphicon glyphicon-search"></span></a>
</div>
<div id="productList">
<table id="productGrid"></table>
</div>
</div>
- <!-- EXISTING TEAM MODAL AND SCRIPT -->
<div id="dialogSearch" title="Search Existing Teams">
<form>
<input class="form-control input-sm" type="text" id="existingTeamModal" />
<div class="input-group-addon"><a href="#" id="existingTeamModalSearch">
<span class="glyphicon glyphicon-search"></span></a>
</div>
<div id="teamList">
<table id="teamGrid"></table>
</div>
</form>
</div>
<script>
jQuery(function ($) {
$("#searchClick").each(function() {
$.data(this, 'dialog',
$(this).next('#dialogSearch').dialog({
autoOpen: false,
modal: true,
width: 300,
show: { effect: "fold", duration: 500},
hide: { effect: "fold", duration: 500},
buttons: [
{
text: "Close",
click: function () { $(this).dialog('close');}
}
]
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});
</script>
These dialogs should open from:
- <div class="input-group ">
<input class="form-control input-sm highlight " type="text" id="programManager">
<div class="input-group-addon"><a href="#" data-toggle="modal" data-target="dialog-progManagerDialog" id="searchClick"">
<span class="glyphicon glyphicon-search"></span></a>
</div>
</div>
- <div class="input-group ">
<input class="form-control input-sm highlight " type="text" id="currentProduct">
<div class="input-group-addon"><a href="#" data-toggle="modal" data-target="dialog-curProdDialog" id="searchClick">
<span class="glyphicon glyphicon-search"></span></a>
</div>
</div>
- <div class="input-group ">
<input class="form-control input-sm highlight " type="text" id="existingTeam">
<div class="input-group-addon"><a href="#" data-toggle="modal" data-target="dialog-existingTeamDialog" id="searchClick" >
<span class="glyphicon glyphicon-search"></span></a>
</div>
</div>
</div>
However, nothing seems to work at all.
Basically I have 3 different search modals which should pop. One for Existing Teams. One for Products. One for Program Managers.
The 3 modals will perform different searches and generate different results, but they will look very similar.
What am I missing?