asked on

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?

Ahmed Merghani

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.

sammySeltzer

ASKER

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?

ASKER CERTIFIED SOLUTION

Ahmed Merghani

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sammySeltzer

ASKER

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.

sammySeltzer

ASKER

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

Ahmed Merghani

You are welcome.