PROCESS
I have a function in the system wherein an ajax modalpopupextender is used to load a gridview with data from which a user can filter and select. Filtering has keypress event using javascript for fast performance purposes. Everytime the user use the dropdownlist and choose 'per location' the modal will; show automatically.
To optimize the system more, I used the control bundle option of ajax, to avoid creating hundreds of external javascript files and it worked BUT, ONLY TO THE MODAL POP UP WITH NO JAVASCRIPT or KEYPRESS EVENT FEATURE. thanks to this Ajax Control Toolkit is loading too many script resources
PROBLEM
Upon isolating the problem to get a detailed one, I noticed that it is because of javascript for keypress that cause the modal not to show anymore, because using the other modal WITH NO JAVASCRIPT for testing, it is working.
HERE ARE THE CODES
JAVASCRIPT FUNCTION FOR KEYPRESS FILTERING
function filter2(phrase, _id) {
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++) {
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i]) >= 0)
displayStyle = '';
else {
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
THE MODALPOPUPEXTENDER DECLARATION
<asp:ModalPopupExtender ID="ModalPopupExtenderLocation" runat="server" TargetControlID="btnSelectLocation" PopupControlID="pnlModalLocation"
CancelControlID="btnclose" BackgroundCssClass="ModalBackground"></asp:ModalPopupExtender>
<asp:Panel ID="pnlModalLocation" runat="server" CssClass="ModalPanel" style="display:none" >
<div class="ModalWindow" >
<div class="ModalHeader">
<h2>Choose Location</h2>
<a href="#close" title="Close" class="close" id="btnclose">X</a>
</div>
<div class="ModalBody">
<asp:Panel ID="pnlSearchLoc" runat="server" >
Location:
<input id="txtTerm" name="txtTerm" onkeyup="filter2(this, '<%=grdLocation.ClientID %>')" type="text" autofocus="autofocus" size="40">
<br /><br />
</asp:Panel>
<div class="ModalBodyGridview">
<asp:GridView ID="grdLocation" runat="server" AutoGenerateColumns="false" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" DataSourceID="SqlDataSource2" ForeColor="Black" GridLines="Vertical" Width="420px" OnSelectedIndexChanged="grdLocation_SelectedIndexChanged" ShowHeaderWhenEmpty="True" EmptyDataText="No records Found" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="Location Num" HeaderText="Location Num" SortExpression="Location Num" />
<asp:BoundField DataField="Location Name" HeaderText="Location Name" SortExpression="Location Name" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="green" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:RPSMSConnectionString %>" SelectCommand="spSearchLoc" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
</div>
</div>
</div>
</asp:Panel>
AND THE TOOLSCRIPTMANAGER defintion with control bundle
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"
CombineScripts="true" ScriptMode="Release" EnableCdn="true" >
<ControlBundles>
<ajaxToolkit:ControlBundle Name="ModalBundle" />
</ControlBundles>
</asp:ToolkitScriptManager>
What I tested is that when the ScriptMode="Release" is present as attribute, the modalpop doesnt work, however when i removed it, it does work already BUT THE CONTROL bundle stopped working fully.
IS THERE WAY TO FIX THIS? where I can retail all functions needed (Modalpopup showing, keypress event and control bundle from ajax)
Any help would be appreciateD. Thanks
