DataTables warning(table id='edetails'): Requested Unknown Parameter...

This problem continues to haunt me.

This app went LIVE yesterday and immediately ran into the following error:
DataTables warning(table id='edetails'): Requested Unknown Parameter '7' from the data source for row 0"

To my dismay, we discovered that a great number of our users are still using IE8 and are refusing to upgrade to atleast  IE9.

So, IE is causing this error.

It turns out that IE11 was having the same issue. However, when I targeted the mode to edge, that is  

Anybody knows what that error is and how to resolve?

 <script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    /* Init DataTables */
$("#edetails").dataTable( {
	"sProcessing" : true,
"sDom":'T<"clear">',
"sJQueryUI": true,
"aaSorting": [[ 1, "desc" ]],
"sPaginationType": "full_numbers",
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
    "sAjaxSource" : "phpservices/getUserDeptRequests.php?loginName=<?php echo $user; ?>",
    "sAjaxDataProp" : "",
    "sDestroy" : false,
        "sScrollXInner": "110%",
    "fnServerData" : function(sSource, aoData, fnCallback) {
        request = $.ajax({
            "dataType" : "json",
            "type" : "GET",
            "url" : sSource,
            "data" : aoData,
            "success" : fnCallback
        });
    },
         "aoColumns" : [

         { "mDataProp": "RequestID", "sWidth": "50px", sSortable: true,
           "bSearchable": false,
           "bSortable": false,
           "fnRender": function (oObj)
            {
             // oObj.aData[0] returns the RequestID
    return "<a target='tab' data-tab-name='#RequestDetails' data-tab-index='1' href='phpservices/getRequestDetails.php?loginName="
    + <?php echo json_encode($user); ?> + "&requestID=" + oObj.aData["RequestID"] + "'> " + oObj.aData["RequestID"] + " </a>";
       }
      },

          { mDataProp: "RequestDate",  "sWidth": "100px", sSortable: true },
          { mDataProp: "RequestorFullName",  "sWidth": "150px", sSortable: true },
          { mDataProp: "PrimarySiteContactDisplay",  "sWidth": "250px", sSortable: true },
          { mDataProp: "RequestLocation",  "sWidth": "150px", sSortable: true },
          { mDataProp: "RequestDescription",  "sWidth": "200px", sSortable: true },
          { mDataProp: "RequestStatus",  "sWidth": "100px", sSortable: true },

        ],
      })
$('#cityworks tbody tr').click(function () {
    if ($(this).hasClass('selected')) $(this).removeClass('selected');
    else
    {
        $(this).siblings('.selected').removeClass('selected');
        $(this).addClass('selected');
    }
  });
  $(window).bind('resize', function () {
 oTable.fnAdjustColumnSizing();
 });
   jQuery('.dataTable').wrap('<div class="scrollStyle" />');

$("#cityworks").on("click", "a[target='tab']", function(){
    var me = $(this);
    var url = me.attr("href");
    var tabName = me.data("tabName");
    var tabIndex = parseInt(me.data("tabIndex"), 10);

    $.get(url, function(data) {
         $.each(data[0], function (key, value) {
             $("#tableRequestSummary td[name='" + key + "']").html(value);
             $("#divResultsMain td[name='" + key + "']").html(value);
             $("#tableRelatedWorkActivity td[name='" + key + "']").html(value);
       });

       $("#divResultsSummary").show();
        $("#divResultsMain").show();
       $("#divResultsRelatedWorkActivity").show();

 //   $(tabName).html(table2).append('<br>').append(table);
    $("table#details tr:even").css("background-color", "#eeeeee");
    $("table#details tr:odd").css("background-color", "#C0C0C0");
     // Activate the tab once the page has loaded:
     $("#tabs").tabs("option", "active", tabIndex);
     }, 'json');
      // Prevent the browser from following the link:
     return false;
     });
    });
 </script>

<style type="text/css">
 #cityworks {
 border-collapse: separate;
 }
table.details {
	border: 2px inset #8B8378;
	-moz-border-radius: 2px;
		font-size: 12px;
		text-align: left;
}
table.details td {
	border: 1px solid black;
	padding: 0.2em 2ex 0.2em 2ex;
	font-size: 12px;
	color: black;
}
table.details tr.d0 td {
	background-color: #eeeeee;
		font-size: 12px;
}
table.details tr.d1 td {
	background-color: #FEFEF2;
		font-size: 12px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
  $("table#details tr:even").css("background-color", "red");
  $("table#details tr:odd").css("background-color", "blue");
});
</script>
<div class="fg-toolbar ui-widget-header ui-corner-all ui-helper-clearfix">
<div class="fg-buttonset ui-helper-clearfix">
<div id="TableToolsToolbar" class="fg-buttonset ui-helper-clearfix"> </div>
<table><tr><td></td</tr></table>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;" class="display" id="cityworks">
<thead style="background-color:#666362; color:White; font-weight:bold;font-size:10pt;">
<tr style="border:solid 1px #000000;">
	<th>ID</th>
	<th>Date</th>
	<th>Requestor</th>
	<th>Site Contact</th>
	<th>Location</th>
	<th>Description</th>
	<th>Status</th>
  </tr>
 </thead>
<tbody>
</tbody>
</table>
</div>
</div>
<style type="text/css">
table.dataTable tr.odd { background-color: #eeeeee;font-size:8pt; }
table.dataTable tr.even { background-color: white;font-size:8pt; }
div.dataTables_scroll { clear: both; }
.dataTables_length { vertical-align:middle;nowrap }
.dataTables_filter { vertical-align:middle;nowrap; }
</style>
	<style type="text/css">
		.divResultsSummary table {border:1px gray solid;}
		.divResultsRelatedWorkActivity table {border:1px gray solid;}
	</style>
<style type="text/css">
tr.d0 td {
	background-color: #eeeeee; color: black; font-size: 14px;
}
tr.d1 td {
	background-color: #C0C0C0; color: black; font-size: 14px;
}
</style>

 </div>
 </div>
 <div id="RequestDetails">
<div id="divResultsSummary" style="display:none">
<div>
	<table id=tableRequestSummary border=1 style="width:100%">
		<tr class="d1"><td style="width:25%;font-weight:bold;">Request ID</td><td name=RequestID></td><td style="width:25%;font-weight:bold;">Request Initiated Date</td><td name=RequestInitiatedDate></td></tr>
		<tr class="d0"><td style="width:25%;font-weight:bold;">Request Status</td><td name=RequestStatus></td><td style="width:25%;font-weight:bold;">Request Closed Date</td><td name=RequestClosedDate></td></tr>
	</table>
</div>
<br />
<div id=divResultsMain  style="display:none">
   <table style="width:100%">
     <tr class="d0"><td style="width:25%;font-weight:bold;">Department </td><td name=Department></td></tr>
     <tr class="d1"><td style="width:25%;font-weight:bold;">Requestor Name </td><td name=RequestorName></td></tr>
     <tr class="d0"><td style="width:25%;font-weight:bold;">Requestor Phone </td><td name=RequestorWorkPhone></td></tr>
     <tr class="d1"><td style="width:25%;font-weight:bold;">Requestor Email </td><td name=RequestorEmail></td></tr>
     <tr class="d0"><td style="width:25%;font-weight:bold;">Description </td><td name=RequestType></td></tr>
     <tr class="d1"><td style="width:25%;font-weight:bold;">Details </td><td name=RequestComments></td></tr>
     <tr class="d0"><td style="width:25%;font-weight:bold;">Request Location </td><td name=RequestLocation></td></tr>
     <tr class="d1"><td style="width:25%;font-weight:bold;">Primary Site Contact </td><td name=PrimarySiteContact></td></tr>
     <tr class="d0"><td style="width:25%;font-weight:bold;">Secondary Site Contact </td><td name=SecondarySiteContact></td></tr>
   </table>
 </div>
</div>
<br /><br />
<div id="divResultsRelatedWorkActivity" style="display:none">
<div><b>Related Work Activity</b></div><br />
<div>
<table id=tableRelatedWorkActivity border=1 style="width:100%">
   <tr class="d1"><td style="width:25%;font-weight:bold;">WO #</td><td name="WONo"></td><td style="width:25%;font-weight:bold;">WO Initiated Date</td><td name=WOInitiatedDate></td></tr>
   <tr class="d0"><td style="width:25%;font-weight:bold;">WO Status</td><td name=WOStatus></td><td style="width:25%;font-weight:bold;">Projected Finish Date</td><td name=FinishDate></td></tr>
</table>
<table id=tableRelatedWorkActivity border=1 style="width:100%">
   <tr class="d1"><td style="width:25%;font-weight:bold;">WO Note</td><td textarea rows="10" cols="50" name=WOInstructions></td></tr>
  </table>
</div>
</div>

Open in new window


UPDATE: I suspect that part of the problem is that dataTable is looking for a value for a particular parameter but that value is either null or available.

Assuming that this theory is correct, any workaround for null values?
LVL 29
sammySeltzerAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Ahmed MerghaniConnect With a Mentor Software EngineerCommented:
I forget to mentioned that not only the returned value is empty "[]" but also there unexpected character/format or something. for example in my case, there was space that break the JSON format I send from the server!
If you post the "getUserDeptRequests.php" script and some dummy data for it so I can investigate more.
0
 
Ahmed MerghaniSoftware EngineerCommented:
Hi,

I faced this error before! Yes your data seems to be empty! Try to debug the returned data from
phpservices/getUserDeptRequests.php?loginName=<?php echo $user; ?>"

Open in new window

by run the above url in the browser - after replacing PHP part and complete the URL by adding the host-.
Or, you can install any http debuger on your browser. For example, firebug for firefox. When you enter the page that load the table, you will see the data fetched from server.
0
 
sammySeltzerAuthor Commented:
Hi Ahmed,

Thanks for your response.

It has become clear that that's the problem.

Question though, what is the workaround for this?

As you know, you can't control what users enter into the database. However, under normal circumstances, for instance, using .net or php or some other technology, you can add some checks to replace, for instance null with 0 or '' (empty string).

How can that be handled in our case where most of the code is jquery?

How did you resolve yours having identified as we have in this case, what the issue is?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
sammySeltzerAuthor Commented:
Ok, I am going to try to do some few manipulations and see how far I go.

Then I will come back with update.

Thanks for your assistance.
0
 
sammySeltzerAuthor Commented:
Ok, I FIXED it!

An extra comma was the culprit:

          { mDataProp: "RequestStatus",  "sWidth": "100px", sSortable: true },

        ],

As soon as I got rid of that comma, it worked.

Thanks for responding
0
 
Ahmed MerghaniSoftware EngineerCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.