Uncaught type Error while updating the dataTable using an object

Question

0.00/5 (No votes)

See more:

Hi,

I am trying to update datatable in an html page and while doing so, I am getting 'Uncaught TypeError: undefined is not a function". Not understanding why I am getting this error. Any Help is appreciated.

Here is my code

XML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Device List</title>
        <style>
            body {
                font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
                font-size: 16px;
            }
            #stockTable table {
                border-collapse: collapse;
            }
            #stockTable table th, #stockTable table td {
                padding: 2px 6px;
            }
            #stockTable table td {
                text-align: right;
            }
            #stockTable .loading td {
                text-align: left;
            }
        </style>
         <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>

          <!--Script references. -->
        <!--Reference the jQuery library. -->
        <script type="text/javascript" src="Scripts/jquery-1.6.4.js" ></script>
        <!--Reference the SignalR library. -->
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
        <script>"http://localhost:8080/signalr/hubs"</script>
    </head>
<body>
    <h1>BLE Device List</h1>
    <div class="DeviceDataContainer">
    <input type="button" id="GetDeviceData" value="GetDeviceData" />
    <table id="example">
        <thead>
            <tr><th>DeviceName</th><th>IPAddress</th></tr>
        </thead>
        <tbody>
        </tbody>
    </table>
   </div>


    <script type="text/javascript">

            //Set the hubs URL for the connection
            var url = 'http://localhost:8080/signalr';

            var connection = $.hubConnection(url);

            // Declare a proxy to reference the hub.
            var hubProxy = connection.createHubProxy('HubClass');

            hubProxy.on('DeviceDataResults', processDeviceDataResults);

            connection.start().done(function () {
                $("#GetDeviceData").click(function() {

                    hubProxy.invoke('GetDeviceData');
                });


            });

            function processDeviceDataResults(results) {

//I am seeing the error in the below line, the results contains the deviceName and ipaddress.
                $('#example').dataTable({
                    "aaData": results
                });

            };
        </script>

</body>
</html>

This is the data in results object:

C#

public class DeviceData
   {
       public string DeviceName { get; set; }
       public string IPAddress { get; set; }

   }

Posted 2-Oct-14 10:03am

CSharpNewbie 2

Add a Solution

Comments

Sinisa Hajnal 3-Oct-14 2:27am

You have javascript undefined somewhere. Put console.log lines into every function and see which object is null / undefined...

CSharpNewbie 2 3-Oct-14 11:59am

I checked the console and I am getting an error on this line
$('#example').dataTable({

Sinisa Hajnal 6-Oct-14 2:18am

The error means that either you don't have id="example" in your html or javascript defining dataTable() function is not loaded yet.

What you have to do is wrap the call to dataTable in ready function...see solution

CSharpNewbie 2 5-Oct-14 21:09pm

I am still not able to resolve this issue, please help me to fix the Uncaught TypeError: Undefined is not a function error

1 solution

Add a Solution

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

Sinisa Hajnal · Answer 1 · 2014-10-05T20:22:00

Only after the page elements load, you can call anything working on those elements (including #example)

JavaScript

//Set the hubs URL for the connection
            var url = 'http://localhost:8080/signalr';
            var connection = $.hubConnection(url);

            // Declare a proxy to reference the hub.
            var hubProxy = connection.createHubProxy('HubClass');

$(document).ready(function () {
// this part has to be within ready so that processDeviceDataResults can be called only when every page element is loaded
            hubProxy.on('DeviceDataResults', processDeviceDataResults);
// not sure if this can be outside of the ready...but it doesn't hurt to start it only when the page loads :)

            connection.start().done(function () {
                $("#GetDeviceData").click(function() {

                    hubProxy.invoke('GetDeviceData');
                });


            });

});

function processDeviceDataResults(results) {

//I am seeing the error in the below line, the results contains the deviceName and ipaddress.
                $('#example').dataTable({
                    "aaData": results
                });

If this helps please take time and accept the solution so others may find it. Thank you.

Uncaught type Error while updating the dataTable using an object

1 solution

Solution 1

Add your solution here

Preview 0

Uncaught type Error while updating the dataTable using an object

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us