HiddenField always NULL, from javascript

Question

I created a Context menu and associated to a Gridview, when right click is performed.The problem is that when a Press a button from that context menu, I want to get the value from a HiddenField. But It always returns null. I've been reading, And I think It might be because The DOM is not fully loaded, But I could not resolve It using $( document ).ready(). Probably using It the wrong way.

Let me know if You have any Ideas

HTML:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../../../Scripts/PendientesDataGridContextMenu.js"></script>
<link href="../../../Styles/ContextMenu.css" rel="stylesheet" type="text/css" />

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<asp:HiddenField ClientIDMode="static" runat="server" ID="hdnSomeField" />
<asp:HiddenField ClientIDMode="static" ID="fldNumeroCQCallTx" runat="server"  />
<asp:HiddenField ID="fldNumeroCQMalaPractica" runat="server"  />

<div id="myMenu" class="contextMenu">
<table style='width:100%;'>
<tr><td onclick="fnCargarfldNumeroCQCallTxYClickear();">Registrar</td></tr>
<tr><td onclick="fnDelete();">Registrar2</td></tr>
</table>
</div>

<asp:LinkButton ID="lnkCallTx" runat="server"
style="display:none" OnClick="lnkCallTx_Click" />

C# Code:

protected void Page_Load(object sender, EventArgs e)
    {
        //Associate Context Menu to Gridview
        Page.ClientScript.RegisterStartupScript(GetType(), "Script", "fnLinkearContextMenu(); ", true);

    }

Java Script:

function fnLinkearContextMenu() {

    $("#myMenu").hide();

    $("table[id$='cntMainPlaceHolder_MainContent_PendientesGestionDeTareasDataGridView'] > tbody > tr").bind('contextmenu', function (e) {
        $("#myMenu").hide();
        e.preventDefault();
        $("#myMenu").css({
            top: e.pageY + "px",
            left: e.pageX + "px",
            position: 'absolute'
        });

        //document.getElementById('<%= lnkCallTx.ClientID %>').value = rowid;
        $("#myMenu").show();

    });

    //Cuando realizan click izquierdo en otra parte de la pagina

    $(document).bind('click', function (e) {
        $("#myMenu").hide();
    });

};

function fnCargarfldNumeroCQCallTxYClickear() {

    var lnkView = document.getElementById('<%=lnkView.ClientID %>').value;
    var lnkCallTx = document.getElementById('lnkCallTx');

    lnkCallTx.click();
};

Answer 1

The reason you are unable to get a value out of the hidden field is related to server tags. In this case, <% %> are referred to as server tags so they have to hit the code behind (aspx.cs file) in order to resolve the value that's passed in. In a .js file, there is no code behind, so instead of resolving the value, it's just putting the static string in the output script.

script:

document.getElementById('<%= lnkView.ClientID %>').value;

.aspx file output:

document.getElementById('cntMainPlaceHolder_MainContent_lnkView').value;

.js file output:

document.getElementById('<%= linkView.ClientID %>').value;

To prove this you can open the code inspector in the browser you're working in (f12 most likely) and look at your included script. You will see that there are <% tags in there which should have been resolved out. This same concept will apply to JQuery as well:

$('#<%= lnkView.ClientID %>').val();