What is the best was to access a property of a deeply embedded asp.net control using client side java script?

Question

I could use some advice please.

THE SCENARIO

I have a tabbed control on the page.

There an update panel on each tab.

Inside each update panel is an instance of a custom Web part (asp.net)

I need to get the parameter value of the report viewer embedded in a user control in the Web part.

I need to retrieve this value using java script on the client side.

To be clear, I don't want to pass up variables using hidden controls or similar methods.

Can I reference the property of the bottom most object, a report viewer?

THE UPDATE PANEL CODE

                    <td><table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr class="ms-WPHeader">
                            <td align="left" class="ms-wpTdSpace">&#160;</td><td title="Graduation Rates - My Visual WebPart" id="WebPartTitlectl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7" class="ms-WPHeaderTd"><h3 style="text-align:justify;" class="ms-standardheader ms-WPTitle"><nobr><span>Graduation Rates</span><span id="WebPartCaptionctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7"></span></nobr></h3></td><td align="right" class="ms-WPHeaderTdMenu" onclick="OpenWebPartMenu(&#39;MSOMenu_WebPartMenu&#39;, this, &#39;WebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7&#39;,&#39;False&#39;); TrapMenuClick(event); return false;"><span style="display:none;"></span><div class="ms-WPMenuDiv" onmouseout="this.className='ms-WPMenuDiv'" onmouseover="this.className='ms-WPMenuDivHover'"><a onclick="OpenWebPartMenuFromLink(&#39;MSOMenu_WebPartMenu&#39;, this, &#39;WebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7&#39;,&#39;False&#39;); return false;" id="WebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7_MenuLink" onkeydown="WebPartMenuKeyboardClick(document.getElementById('WebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7_MenuLink'), 13, 40, event)" href="#" title="Graduation Rates Web Part Menu" class="ms-wpselectlink" onblur="UpdateWebPartMenuFocus(this, 'ms-wpselectlink', 'ms-WPEditText');" onfocus="UpdateWebPartMenuFocus(this, 'ms-wpselectlinkfocus', 'ms-WPEditTextVisible');" menuid="MSOMenu_WebPartMenu"><img class="ms-WPHeaderMenuImg" src="/_layouts/images/wpmenuarrow.png" alt="Graduation Rates Web Part Menu" style="border-width:0px;" /></a></div></td><td class="ms-WPHeaderTdSelection"><span class="ms-WPHeaderTdSelSpan"><input type="checkbox" id="SelectionCbxWebPartctl00_m_g_08bc0677_b337_4b17_8729_6ca0b60b83e7" class="ms-WPHeaderCbxHidden" title="Select or deselect Graduation Rates Web Part" onblur="this.className='ms-WPHeaderCbxHidden'" onfocus="this.className='ms-WPHeaderCbxVisible'" onkeyup="WpCbxKeyHandler(event);" onmouseup="WpCbxSelect(event); return false;" onclick="TrapMenuClick(event); return false;" /></span></td><td align="left" class="ms-wpTdSpace">&#160;</td>
                        </tr>

UPDATE- WORKING CODE BELOW

The key was creating a custom data attribute as @Fil indicated and passing from the code behind and then accessing the $.cache. 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

If you have that property visible when the html renders (see if it does by viewing source on your browser), then you would be able to fetch it on the client end using JS.

You could reference the report viewer control either by assigning it a unique class name, or by using jQuery's ends with or contains selector:

$("[id*='ReportViewer1']").attr("attributeName"); - this is the contains selector

http://api.jquery.com/attribute-contains-selector/

http://api.jquery.com/attribute-ends-with-selector/

Is this what you are looking for?

UPDATE on the HTML5 data attribute question:

Just a cleaner way to store arbitrary data in the html (for more convenient access to Javascript). Here is a good article that explains it here

So, what you would do in practice is this: Imagine you want to add the report viewer's parameter (which for the sake of argument has a value of "42") as an attribute to a Panel control you have with an ID="Panel1". In code behind you would do

Panel1.Attributes.Add("data-report-param", "42");.

Because the Panel control is rendered as a <div> element, you will see something like this:

<div id="Panel1" data-report-param="42">

Finally you would be able to grab it from Javascript using one of the following two ways:

$("#Panel1").data("report-param");

$("#Panel1").attr("data-report-param");

UPDATE on retrieving the attribute

If they are on the same node, try this:

$.each($("[id*='ReportViewer1']"), function(index, value) {
    if ($(value).is("[data-report-param]"))
    {
        alert($(value).attr("data-report-param"));
    }
});

This will go through each element that contains "ReportViewer1" in its ID. Then for each item it will check if that element contains the "data-report-param" attribute. If so, alert the value. Hope this finally helps :)