Question

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?

Answer 1

I was loading my scripts in the wrong order.