Javascript method call from code behind - javascript

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();
});

Related

Adding Hyperlinks to ValidationSummary using programatically added validators

I'm using the javascript from the answer in this question in a project of mine:
Adding Hyperlinks to ValidationSummary
It works really great. I've added it to the bottom of my masterpage (for some reason, even though it is inside $(document).ready, Page_Validators is null if i place it in the head section)
Anyway! I'm also adding some custom validators programatically on postback using this code:
public static CustomValidator ReturnErrorMessage(string message, string validationGroup, string controlToValidate = "")
{
CustomValidator control = new CustomValidator();
control.ID = "cv" + controlToValidate;
control.IsValid = false;
control.Text = " ";
control.ValidationGroup = validationGroup;
control.ErrorMessage = message;
control.ControlToValidate = controlToValidate;
return control;
}
However whenever I add a CustomValidator like that, in a button event, page_load or whatever, Page_Validators will be overridden and the errormessage will revert to the message without a anchor.
What gives? Am I doing something wrong or can someone explain what is happening?
I've tried debugging it and it does set the values correctly, but then it just reset afterwards.
I've tried for the heck of it and in $(document).ready set all validators as isvalid = false, and that gets overwritten too.
Im using asp.net 4.5 unobtrusive validation, but it does not make a difference if I turn it off.
Adding the javascript in code using Page.ClientScript.RegisterStartupScript at some point after the validator has been created does not work either.
If I don't add any validators in code everything works as expected.
I'm aware I can just add the anchor tags manually, but this is a lot of work to update existing validators instead of just tossing in a small script, so I'm hoping to get this to work.
You can use this code to test this:
using System;
using System.Web.UI.WebControls;
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
CustomValidator control = new CustomValidator();
control.ID = "cv" + txtName.ClientID;
control.IsValid = false;
control.Text = " ";
control.ValidationGroup = "errorGroup";
control.ErrorMessage = "Error message";
control.ControlToValidate = txtName.ClientID;
Form.Controls.Add(control);
}
}
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:ValidationSummary ID="vsSummary" runat="server" ValidationGroup="errorGroup" ForeColor="Red" HeaderText="Error!" />
</div>
</form>
<script>
$(document).ready(function() {
var validators = Page_Validators; // returns collection of validators on page
$(validators).each(function() {
//get target control and current error validation message from each validator
//[0] is needed when using aspnet 4.5 unobtrusive validation
var validator = $(this)[0];
var errorMsg = validator.errormessage;
var targetControl = validator.controltovalidate;
//make link only if theres a control to target
if (targetControl) {
var errorMsgWithLink = "<a href='#" + targetControl + "' style='color: #FF3232;'> " + errorMsg + "</a>";
//update error message with anchor tag
validator.errormessage = errorMsgWithLink;
}
});
});
</script>
</body>
</html>
If you want you can try implementing your own 'CustomValidationSummary' control by following the same design pattern as mentioned at Reference Source by Microsoft, and modify the render method to include anchor tag to wrap error text, before it is passed into the writer method at line number 462.
I ended up using a extension method, adding the anchor tag in the method
public static void AddValidator(this Page p, string message, string validationGroup, string controlToValidate = "", bool addAnchorTags = true)
{
CustomValidator control = new CustomValidator();
control.ID = "cv" + controlToValidate;
control.IsValid = false;
control.Text = " ";
control.ValidationGroup = validationGroup;
control.ControlToValidate = controlToValidate;
if (addAnchorTags && !string.IsNullOrEmpty(controlToValidate))
{
control.ErrorMessage = "<a href='#" + controlToValidate + "' style='color: #FF3232;'> " + message + "</a>";
}
else
{
control.ErrorMessage = message;
}
p.Validators.Add(control);
}

RegisterStartupScript only runs the first time. ASP.NET C# JavaScript

I have an .aspx page with the following code
<asp:Panel runat="server" ID="ImagePanel">
<asp:UpdatePanel runat="server" ID="ImageUpdatePanel" UpdateMode="Conditional"><ContentTemplate>
<img id="photo" src="/Icons/Factory Layout.png" style="display: none;"/>
<script type="text/javascript">
function ResetImage(typeOfImage) {
var factoryImage = $("#photo");
if (typeOfImage === 1) {
factoryImage.attr("src",document.getElementById('<%= FactoryImageFileNameHF.ClientID %>').value);
}
else if (typeOfImage === 2) {
factoryImage.attr("src",document.getElementById('<%= IncidentFactoryImageFileNameHF.ClientID %>').value);
}
It is the ResetImage javascript function that I am trying to run with the following code in the code behind.
if (typeOfMap == 1)
{
FactoryImageFileNameHF.Value = fileNameOfFactoryImage.FileFullPath();
ClientScript.RegisterStartupScript(Page.GetType(), "test" + ScriptKeyHF.Value, "ResetImage(1);", true);
ScriptKeyHF.Value = (ScriptKeyHF.Value.ToInt() + 1).ToString();
}
else if (typeOfMap == 2)
{
IncidentFactoryImageFileNameHF.Value = fileNameOfFactoryImage.FileFullPath();
ClientScript.RegisterStartupScript(Page.GetType(), "test" + ScriptKeyHF.Value, "ResetImage(2);", true);
ScriptKeyHF.Value = (ScriptKeyHF.Value.ToInt() + 1).ToString();
}
The problem is that the ResetImage() method that I am calling in the RegisterStartUpScript only runs the first time on the browser. It doesn't run the second and third time of postbacks, etc.
I have tried the RegisterClientScriptBlock but it runs before the javascript code is there. Does anyone have any idea why the code only runs the first time.
The solution is that I was using a ClientScriptManager (ClientScript) instead of the a ScriptManager so I changed the line of code to
System.Web.UI.ScriptManager.RegisterStartupScript(this.Page,Page.GetType(), "test" + ScriptKeyHF.Value, "ResetImage(1);", true);
and it works.
I have the ScriptManager on a Master page and my code was on a child page

Webforms - Expand Dynamically created TreeNodes on Title Click

So, I've been searching the interwebs for days now and still haven't got any answers. So, here I am :). I've got a TreeView that I am populating with XML from a Sitemap (Web.sitemap) and is acting as a menu on a website. I want to be able to have the menu nodes toggle on clicking its title. That way, I can get rid of the +- checkboxes to make it look neater. So far, I can get them to toggle. But, only after I have pre-populated the node by first clicking the checkbox associated with it. Has anyone got any ideas how I can go about this?
This is my TreeView div
<div class="menu" style="width: auto; float:left; margin-top: 20px;">
<asp:SiteMapDataSource ID="smdsMenu" runat="server" SiteMapProvider="MainMenuSiteMapProvider"/>
<asp:TreeView ID="tvMenu" runat="server" DataSourceID="smdsMenu" ExpandDepth="1" ImageSet="Arrows" margin-top="0px">
<LeafNodeStyle BackColor="Transparent" CssClass="tvMenuL2" />
<HoverNodeStyle Font-Bold="True" BackColor="#1e8acb" ForeColor="Black" Font-Underline="False" />
<ParentNodeStyle BackColor="#6E7E94" CssClass="tvMenuL1" Font-Bold="false" />
<RootNodeStyle BackColor="#2c4566" CssClass="tvMenuL0" />
<SelectedNodeStyle Font-Underline="True" ForeColor="#1e8acb" HorizontalPadding="0px" VerticalPadding="0px" />
</asp:TreeView>
</div>
This is my page loaded handler
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
tvMenu.Attributes.Add("onmousedown", "return OnTreeMouseClick(event)");
}
}
And this is my Javascript
<script lang="javascript" type="text/javascript">
function OnTreeMouseClick(evt) {
var src = window.event != window.undefined ? window.event.srcElement : evt.target;
var nodeClick = src.tagName.toLowerCase() == "span";
if (nodeClick) {
// Change tvMenu to ID of TreeView
var tvDataName = "tvMenu" + "_Data";
var tv = document.getElementById("tvMenu");
var tvData = window[tv.id + "_Data"];
var spanID = src.id;
var selectNode = document.getElementById(spanID);
var start = spanID.indexOf("tvMenu" + "t");
var length = 7; // length of TreeView ID + 1 for the letter t
var spanIndex = parseInt(spanID.substring(start + length));
if (spanIndex != NaN) {
var spanNode = "tvMenu" + "n" + spanIndex.toString();
var spanChildren = spanNode + "Nodes";
// Call toggle Node script
TreeView_ToggleNode(
tvData, // data
spanIndex, // index
document.getElementById(spanNode), // node
'', // lineType
document.getElementById(spanChildren) // children
);
}
}
return false;
}
</script>
I know that the node isn't being populated by my Javascript. But, I don't know how to use TreeView_PopulateNode without a datapath like the checkboxes do here.
<a id="tvMenun1" href="javascript:TreeView_PopulateNode(tvMenu_Data,1,document.getElementById('tvMenun1'),document.getElementById('tvMenut1'),null,' ','Overview','Home\\Overview','t','776cfb0b-fc9e-4ff1-8487-829a1162916d','tf')">
<img src="/WebResource.axd?d=8Ig4CKxOyXBIduEK8UJR2BXEYzKQWBLDFGfU4Y_g95G2TuDmM3zzGZE7CoW0qe4bVdRWK9Vp8x2MnX9eQ6Z66hsxeeTNg2xk5-CpNTJuS3Q1&t=636043022594211026" alt="Expand Overview" style="border-width:0;">
</a>
This is the generated HTML from my code
<span class="tvMenu_0 tvMenuL1 tvMenu_3" title="Overview" id="tvMenut1" style="border-style:none;font-size:1em;">Overview</span>
Any help with this would be GREATLY appreciated. Thanks.

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

Can you get parameter values of reportviewer at runtime?

I have a very specific question about the reporting services report viewer control.
I appreciate any help. I am a bit of a novice with Javascript on the client side, but I have to use this in my project.
THE REQUIREMENT
I need to retrieve the current value of a single parameter on a report viewer control embedded in a webpart at runtime. I need to access the value using Javascript on the client side.
Can this even be done? The reportviewer doesn't appear to get rendered.
THE HTML CODE FOR THE REPORT VIEWER
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnUnload="UpdatePanel_Unload">
<ContentTemplate>
<rsweb:ReportViewer ID="ReportViewer1" runat="server"
Font-Names="Verdana" Font-Size="8pt" Height="383px"
InteractiveDeviceInfos="(Collection)" ProcessingMode="Remote"
WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt" Width="757px"
SizeToReportContent="True">
</rsweb:ReportViewer>
</ContentTemplate>
</asp:UpdatePanel>
UPDATE- WORKING CODE BELOW
The key was creating a custom data attribute as #Fil indicated in this link (http://html5doctor.com/html5-custom-data-attributes/) 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)

Categories