Accessing HTML5 Custom Data Attributes for multiple instances of webpart

Question

I would really appreciate some guidance. This is probably simple to some of you, but i can't figure it out. Thanks for any input.

THE REQUIREMENT

I have a multi-tabbed control. One each tab, I have a custom reportviewer control.

I have added a custom attribute to the reportviewer in the code behind called "data-report-param".

I need to access the value of custom attribute "data-report-param" on the current tab on the client-side using javascript.

I have tried several ways including the following, but can't get to the value that is being created in the DOM.

MY CODE

//Attempt 1
var reportparamattribute = $('#ReportViewer1');
var reportparametervalue = reportparamattribute.getAttribute('data-report-param');

//Attempt 2
var reportparamattribute = document.getElementById('<%= ReportViewer1.ClientID %>');
var reportparametervalue = reportparamattribute.getAttribute('data-report-param');

//Also tried accessing the dataset
var reportparametervalue = reportparamattribute.dataset.report-param;

WHAT IS BEING PRODUCED IN THE DOM ('ctl00_m_g_66e41117_8ff5_4650_bf4d_7a4a25e326f3_ctl01_ReportViewer1_ctl04').control.HideActiveDropDown();" data-report-param="1068" interactivedeviceinfos="(Collection)">

('ctl00_m_g_9d6a6c3c_11d0_4e03_bbd2_b907172c437d_ctl01_ReportViewer1_ctl04').control.HideActiveDropDown();" data-report-param="1068" interactivedeviceinfos="(Collection)">

UPDATE- WORKING CODE BELOW

The key was passing the custom data attribute from the code behind and then accessing it in the $.cache as @popnoodles below indicated, and passing the clientID of the reportviewer into the javascript function to get to the current instance of the webpart child controls.

<input type="hidden" id="<%= ASP_SSRS.ClientID %>_myDataState" 
onchange="compareUnitValues(this.id, this.parentNode.id, '<%= ReportViewer1.ClientID %>',  '<%= ASP_SSRS.ClientID %>', '<%= btnSendHiddenField.ClientID %>');" />

<script type ="text/javascript">
function compareUnitValues(elemt, parent, reportviewerID, value1, value2) {
  var myDataUnit = $("#" + elemt),
     parentObject = $("#" + parent),
     reportviewerObject = $("#" + reportviewerID),
     ssrs    = $("#" + value1),
     btnSend = $("#" + value2);

  var myDataUnitValue = myDataUnit.val();
  var myDataUnitJSON = jQuery.parseJSON(myDataUnitValue);
  var currentmyDataUnit = myDataUnitJSON.currentUnit.objectId;
  var sessioncurrentObjectId = document.getElementById('<%= hiddenCurrentObjectId.ClientID %>').value;
  ssrs.val(myDataUnitValue);
  var currentReportViewerParam = $("#" + reportviewerID).attr("data-report-param");

  if (currentmyDataUnit != currentReportViewerParam) {
  btnSend.trigger("click");
  }    

}

FROM CODE BEHIND CREATE THE CUSTOM DATA ATTRIBUTE

ReportViewer1.Attributes.Add("data-report-param", parsedObjectId)

Answer 1

getAttribute will only give you the value that was in the generated or modified HTML not what is in the DOM. The data method never updates the HTML.

jQuery creates an empty object $.cache, which is used to store the values you set via the data method. Each DOM element you add data to is assigned a unique ID which is used as a key in the $.cache object.

Setting

$('#ReportViewer1').data('report-param', 1234);

Getting

var id = $('#ReportViewer1').data('report-param');

Answer 2

If you can use jquery why not just:

$("#reportviewer1").data('report-param');