Question

I have a situation where I have a number of objects that are dynamically created in code behind. Each object has a number of hidden fields, and an image button.

When the image button is rolled over I have a js file that should get the relevant fields for that object and do some stuff.

The trouble I have is that when I roll over the button I get a null refernce as the getEmelementById doesn’t nkow which object I’m refereing to.

Here is the ascx page:

    <div style="position:relative;float:right;" visible="true">
    <asp:ImageButton ID="iconNarrative" visible="true" ImageUrl="/_layouts/images/osys/NarrativeIcon.gif" runat="server" Style="position:absolute; top:-28px; left:-25px; display:block;" onmouseout="hideNarrative()" onmouseover="showNarrative(this, document.getElementById(id))" />
    <asp:HiddenField ID="hfNarrative" runat="server" Visible="true" />        
</div>    

Here is how it looks when rendered. there are 2 in this instance:

and

        <div style="position:relative;float:right;" visible="true">
    <input type="image" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$iconNarrative" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_iconNarrative" onmouseout="hideNarrative()" onmouseover="showNarrative(this, document.getElementById(id))" src="/_layouts/images/osys/NarrativeIcon.gif" style="border-width:0px;position:absolute; top:-28px; left:-25px; display:block;" />
    <input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrative" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrative" />        
    <input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeDate" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeDate" />
    <input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeBy" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeBy" />
</div>  

here is my javascript

var narrativeContainer = document.getElementById('narrative_container');
var narrative = document.getElementById('<%=hfNarrative.ClientID%>');
var narrativeBy = document.getElementById('<%=hfNarrativeBy.ClientID%>');
var narrativeDate = document.getElementById('<%=hfNarrativeDate.ClientID%>');  

narrative = document.getElementById('<%=hfNarrative.ClientID%>');

So how do I now which set of hidden fields where called?
The only thing I could think to do was get the Id and apend this to the various fields, then use the getElementById?

Answer 1

Here’s my generic advice. I’ll assume that you’re using jQuery as well.

First, it’s always helpful if you set your ClientIDs’ mode to static when you’re going to be accessing your server-side controls from JavaScript.

Second, why is your data being passed into hidden fields? Is it modified and passed back? If not, the HTML5 standard for storing data is with attributes of the form data-attributeName="value".

Here’s your HTML in your .ASCX page:

<div id="hfNarrative" class="narratives" runat="server">
   <!-- Stuff specific to this object, image, buttons, whatever -->
</div>

On the .NET side, you can call:

hfNarrative.Attributes.Add("data-narrativeDate", SOME_DATE);
hfNarrative.Attributes.Add("data-narrativeBy", SOME_GUY);

Then, with jQuery you can access these simply:

$('div.narratives').each(function() {
    var $this = $(this);
    var narrBy = $this.attr('data-narrativeBy');
    var narrDat = $this.attr('data-narrativeDate');
    //Do stuff here with the data.
});

I hope this will help you down a more clean road.