We Keep Coding

Not getting hiddenfield value in javascript

I have an issue in getting the hidden field values, which is been set in page load at code behind. Problem is when i try to get that set values in javascript its giving undefined or null. Not able to get the values which was set in page load at code behind.
//cs code is like this
protected async void Page_Load(object sender, EventArgs e)
{
HiddenField_alt_edit.Value = "[{"unitid":"3072","unit_nameeng":"BOTTLE","purchcost":"2.000","salrate":"4.000","avgcost":"2.000","factor":"2"},{"unitid":"3073","unit_nameeng":"PKT","purchcost":"10.000","salrate":"20.000","avgcost":"10.000","factor":"10"}]";
ClientScriptManager script = Page.ClientScript;
script.RegisterClientScriptBlock(this.GetType(), "Alert", "<script type=text/javascript>addAlternativeRowWithData();</script>");
}
//aspx page declaration goes like this. Also i am using a master page.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:HiddenField ID="HiddenField_alt_edit" runat="server" Value="i am on."/>
</asp:Content>
// javascript file code goes like this
function addAlternativeRowWithData(mode)
{
alert("test");
var idvalue = $("#HiddenField_alt_edit").val();
alert(idvalue);
alert($nonconfli('#ContentPlaceHolder1_HiddenField_alt_edit').val());
var myHidden = document.getElementById('<%= HiddenField_alt_edit.ClientID %>').value;
alert(myHidden);
var json_string = $nonconfli('#ContentPlaceHolder1_HiddenField_alt_edit').val();
var arr_from_json = JSON.parse(json_string);
alert("test 2");
alert(arr_from_json);
}

The id generated at client side can differ as the Hidden field is server side control in your code as you have set runat="server".
There are two ways normally. Either make the ClientIDMode static or use the instance in form to get client side id.
Like:
<asp:HiddenField ID="HiddenField_alt_edit" ClientIDMode="static" runat="server"
Value="i am on."/>
and then following should work:
var idvalue = $("#HiddenField_alt_edit.ClientID").val();
or in client side code you need to get id like below:
var idvalue = $("#<%= HiddenField_alt_edit.ClientID %>").val();

Change:
HiddenField_alt_edit.Value = [{"unitid":"3072","unit_nameeng":"BOTTLE","purchcost":"2.000","salrate":"4.000","avgcost":"2.000","factor":"2"},{"unitid":"3073","unit_nameeng":"PKT","purchcost":"10.000","salrate":"20.000","avgcost":"10.000","factor":"10"}]
To this:
HiddenField_alt_edit.Value = "
[{'unitid':'3072','unit_nameeng':'BOTTLE','purchcost':'2.000','salrate':'4.000','avgcost':'2.000','factor':'2'},{'unitid':'3073','unit_nameeng':'PKT','purchcost':'10.000','salrate':'20.000','avgcost':'10.000','factor':'10'}]"
Then, add this:
<asp:HiddenField ID="HiddenField_alt_edit" runat="server" Value="i am on." ClientIDMode="Static" />
In you js, you have to put this:
const value = document.getElementById('HiddenField_alt_edit').value
const jsonString = JSON.stringify(value)
const json = JSON.parse(jsonString)
console.log(json)
<input hidden id="HiddenField_alt_edit" value="[{'unitid':'3072','unit_nameeng':'BOTTLE','purchcost':'2.000','salrate':'4.000','avgcost':'2.000','factor':'2'},{'unitid':'3073','unit_nameeng':'PKT','purchcost':'10.000','salrate':'20.000','avgcost':'10.000','factor':'10'}]">

Asp.Net Control Value return undefined in Jquery

In my project i need change visible of dynamic asp control when click label based on textbox values. So i first tried to get textbox value when click label but its return undefined. I am search and get two methods i tried that also it return same.
My Try :
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(document).on("click", "#lblShow", function() {
alert($('#<%=txtTotalVersion.ClientID%>').val());
alert($('input[id$=txtTotalVersion]').val());
var xTotlal =$('#<%=txtTotalVersion.ClientID%>').val()
var i = 0;
for (i = 0; i < xTotlal; i++) {
$('#createDiv' + i).style.display = "blcok";
$('#createDiv1' + i).style.display = "block";
$('#createDiv2' + i).style.display = "block";
$('#createDiv3' + i).style.display = "block";
}
});
});
</script>
HTML
<div id="DivCompName">
<asp:TextBox runat=server ID="txtTotalVersion" Visible="false"></asp:TextBox>
<asp:TextBox runat=server ID="txtCurrentDisplay" Visible="false"></asp:TextBox>
</div>
First two alert return undefined.

Visible="false" is asp.net attribute, in this case your control will not be rendered at the client side. So your client script won't find the control as it doesn't exists!
If you want to store some value at client side and don't want to display it then you can use HiddenFields or you can make the same control hidden by using css style display:none;. (Don't use Visible="false" for this)

you can add ClientIDMode=Static and call it from your jquery
<asp:TextBox runat=server ID="txtTotalVersion" Visible="false" ClientIDMode="Static"></asp:TextBox>
<script>
$(document).ready(function () {
alert("#txtTotalVersion").val();
})
</script>
reason is, the client id for your control might not be as it is assigned with ID="xxx", if the control is inside of another asp.net server control, after adding the ClientIDMode, you are telling your server to treat this control with a static ID
to learn more: msdn

Accessing HTML5 Custom Data Attributes for multiple instances of webpart

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)

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');

If you can use jquery why not just:
$("#reportviewer1").data('report-param');

Javascript method call from code behind

I visited Calling java script from codebehind and other questions marked as duplicate by some users. But specific to my problem none of them are helpful.
I have an already built CMS and I need to change one of the module which was built using a user control. I cannot hereby add runat="server"attribute to the form and head tags.
I am having a
<asp:GridView ID="gdvResxKeyValue" runat="server" Width="100%"AutoGenerateColumns="False">`</asp:GridView>`
and
<asp:TreeView ID="tvList" ShowLines="True" runat="server" ImageSet="Msdn" OnSelectedNodeChanged="tvList_SelectedNodeChanged">
<SelectedNodeStyle CssClass="sfSelectednode" />
</asp:TreeView>
gdvResxKeyValue is bind while selection of nodes is made in treeview ie.
protected void tvList_SelectedNodeChanged(object sender, EventArgs e)
{
gdvResxKeyValue.DataSource = lstResDef;
gdvResxKeyValue.DataBind();
this.Page.ClientScript.RegisterStartupScript(this.GetType(),LocalizationGlobalVariable5", string.Format("edition();"), true);
}
At last column of gdvResxKeyValue I have an image as
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" />
</ItemTemplate>
</asp:TemplateField>
and I need a image click handler using javascript using minified version of jquery-1.9.1.js. so have written code as..
<script type="text/javascript">
//<![CDATA[
$.Localization = {
TextAreaID: 0,
FilePath: "",
ID: 0,
GridID: '<%=gdvResxKeyValue.ClientID%>'
};
function edition() {
$('#'+ $.Localization.GridID).on('click', 'img[class="sfEdit"]', function () {
var index = $(this).attr("alt");
$.Localization.ID = index;
var data = $('#' + $.Localization.GridID + ' textarea[title="' + index + '"]').val();
$('#txtResxValueEditor').val(data);
ShowPopUp("editorDiv");
});
}
</script>
But it is not working.

Try to put your grid to div wrapper:
<div id="myDiv">
....<asp:GridView ID="gdvResxKeyValue"....
</div>
and JavaScript:
$('#myDiv .sfEdit').click(function(){
alert('called');
});
EDIT: just noticed you call the startup script registration on every postback (the Change event of your treeview). It's not needed. Simply include your JavaScript file, something like:
$(document).ready(function(){
$('#myDiv .sfEdit').click(function(){
var imgId = $(this).attr('id');
alert('called ' + imgId);
});
});
and keep the gridview in div wrapper as described above.

Rather calling javascript method on clicking the image. On the ready of document I have written following code and finally got my problem solved.
$(document).on('click', "#" + $.Localization.GridID + ' img.sfEdit', function (e) {
var index = $(this).attr("alt");
$.Localization.ID = index;
var data = $('#' + $.Localization.GridID + ' textarea[title="' + index + '"]').val();
$('#txtResxValueEditor').val(data);
ShowPopUp("editorDiv");
e.preventDefault();
});

Get Global Resource File from separate javascript file

I would like to set button text with different languages based on Culture. I have all my Javascript code in separate file. This file is imported in ToolkitScriptManager in Master Page. I have created JSString.resx global resource file. I have written code:
function showSessionTime() {
$(".sessionTime").val('<%= GetGlobalResourceObject("JSString", "SessionTime").ToString() %>' + " " + convertTime(minutes) + ":" + convertTime(seconds)); seconds = seconds - 1;
}
The function is then called in $(document).ready(function ()...
The button in Master Page:
<asp:Button ID="Button2" runat="server" class="ui-state-default ui-corner-all sessionTime"
UseSubmitBehavior="False" OnClientClick="javascript:return false;"
meta:resourcekey="Button2Resource1"></asp:Button>
I know that <%= GetGlobalResourceObject("JSString", "SessionTime").ToString() %> doesn't work in separate js files. How to workaround this as simple and as quick as possible?

I check value like this:
if ($("#ctl00_ddlLanguage").val() == 'pl-PL') {
expiredMessage = 'Twoja sesja wygasła. Zostałeś wylogowany.';
}
else {
expiredMessage = 'You session has ended. You have been logged out.';
}
Is there any risk of using #ctl00_ddlLanguage??