问题
I'm trying to use this jquery plugin (http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/) on an aspx page with many different gridviews. The page code is within an asp:content tag. I'm placing my select options in an asp:view outside of an asp:gridview. The page uses a master page. I have the multiselect widget working in a blank page, but I can't get it to work with my master page. I've tried adding my css/script links/document.ready() in the gridview I'm using it with. I've tried adding it to the head tag of the master page using an asp:contentplaceholder on the master and a separate asp:content tag in my aspx page. I can't for the life of me get the multiselect to take on the UI of the widget.
I've noticed on the blank page with the working widget, the jquery adds a button and a couple spans with the classes needed to style the multiselect. In my aspx page, these items do not get added.
<button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all"
aria-haspopup="true" style="width: 240.60000002384186px;">
<span class="ui-icon ui-icon-triangle-2-n-s"></span><span>5 selected</span></button>
//My Code
<link rel="Stylesheet" type="text/css" href="../Styles/jquery-ui-1.9.1.custom.min.css" />
<link rel="stylesheet" href="../Styles/jquery.multiselect.css" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.multiselect.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#example").multiselect({
minWidth: 235
});
$("#example").multiselect("checkAll");
});
</script>
<select id="example" name="example" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
I've tried removing all other css/script references in the master page and that didn't work. Is there something else that might be conflicting?
回答1:
You are falling victom of Control.ClientIDMode, which is inherit
:
Option 1:
Change your script to use the dynamically created ClientID:
<script type="text/javascript">
$(document).ready(function () {
var sel = #<%= example.ClientID %>";
$(sel).multiselect({
minWidth: 235
});
$(sel).multiselect("checkAll");
});
</script>
Option 2:
Leave you script as is and change the ClientIDMode to Static:
<select id="example" name="example" multiple="multiple" ClientIDMode="Static">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
回答2:
I was loading my scripts in the wrong order.
来源:https://stackoverflow.com/questions/14407362/jquery-ui-multiple-select-not-working-in-aspx-page-that-is-content-for-a-master