Click here to Skip to main content
15,867,972 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

Here is my html code and I am getting an Uncaught TypeError: Undefined is not a function error While accessing the datatable ($('#deviceTable').dataTable), I dont where I am doing wrong in html

XML
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="Scripts/jquery-1.6.4.js" ></script>
        <script src="Scripts/jquery.signalR-2.1.2.js"></script>

        <script type="text/javascript" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/autofill/1.2.1/css/dataTables.autoFill.css" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
        <script>"http://localhost:8080/signalr/hubs"</script>
        <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>

    </head>
     <script>
         $(document).ready(function () {

             var url = 'http://localhost:8080/signalr';

             var connection = $.hubConnection(url);

             // Declare a proxy to reference the hub.
             var hubProxy = connection.createHubProxy('HubClass');
             //var deviceTable = $('#deviceTable');
             hubProxy.on('DeviceDataResults', processDeviceDataResults);

             connection.start().done(function () {
                 $("#GetDeviceData").click(function() {
                      hubProxy.invoke('GetDeviceData');
                 });
             });

             function processDeviceDataResults(results) {
                 $("#deviceTable").dataTable({
                     "data": results,
                     "columns": [
                         { "data": "DeviceName" },
                         { "data": "IPAddress" }
                     ]
                 });
             }
         });
  </script>


    <body>
    <h1>Device List</h1>
    <input type="button" id="GetDeviceData" value="GetDeviceData" />
   <table id="deviceTable" class="hover" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Device</th>
                <th>IP</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Device</th>
                <th>IP</th>
            </tr>
        <tfoot>
    </table>

</body>
</html>
Posted
Comments
Sandeep Singh Shekhawat 6-Oct-14 0:15am    
1. Your SignalR server should be start.
2. You have jQuery Datatable reference on page.
CSharpNewbie 2 6-Oct-14 1:57am    
Didnt get your answer...yes my SignalR server is started and on button click I am also getting the data from my server, but while inserting into datatable I am getting Undefined function error on $("#deviceTable").dataTable({
Sinisa Hajnal 6-Oct-14 2:31am    
Try loading jQuery before all other scripts (in particular remove jquery 1.6.4 and move jquery 1.11 above datatable. and also remove double loading of signalR
CSharpNewbie 2 6-Oct-14 2:46am    
Awesome Sinisa Hajnal. It worked. Thank you. I was thinking all the references would been loaded in the beginning, so why does the order so important?
Sinisa Hajnal 6-Oct-14 3:37am    
Because dataTable internally probably uses jQuery and it calls some functions immediately upon loading.

It is usually mentioned in library documentation that it depends on jQuery and it should be loaded first.

Similarly, order of CSS determines styles of page elements so framework CSS should come before your own so that your styles override default ones (you know CASCADE :) )

1 solution

You have to load jQuery before all other scripts (in particular remove jquery 1.6.4 and move jquery 1.11 above datatable.

Also remove double loading of signalR. Once you're ready for production simply replace "normal" with minimized version.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900