0

I am trying to use the sample off of jqWidgets for the ListBox. I have copied the code directly into my index.cshtml file. I am not seeing the desired results, which would be what the sample looks like. All it is showing me is the button.

Here is a link to the page. I have reduced the content and allowed for anyone to look at it: https://drive.azurewebsites.net/Question

Here is the sample's website: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlistbox/jquery-listbox-getting-started.htm

I'm not sure how to troubleshoot this or where to look to see what is really going wrong. I am using Chrome and pulled up Inspect Element. The scripts are being retrieved.

Here is my code:

<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script><script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>

<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                ];
                // Create a jqxListBox
                $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' });
                // disable the sixth item.
                $("#jqxlistbox").jqxListBox('disableAt', 5);
                // bind to 'select' event.
                $('#jqxlistbox').bind('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxlistbox').jqxListBox('getItem', args.index);
                    $("#eventlog").html('Selected: ' + item.label);
                });
                $("#button").jqxButton();
                $("#button").click(function () {
                    var item = $('#jqxlistbox').jqxListBox('getSelectedItem');
                    if (item != null) {
                        alert(item.label);
                    }
                });
            });
        </script>
        <div id='jqxlistbox'>
        </div>
        <div style="margin-top: 10px;">
         <input id="button" type="button" value="Get Selected Item" />
         <div id="eventlog"></div>
        </div>
    </div>
</body>
4

1 回答 1

1

您的脚本未正确引用。在MVC4中，引用Scripts的过程是不同的——http: //www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-binding-to-sql-database-mvc4.htm

于 2013-10-27T20:08:47.057 回答