Cannot set property 'value' of null in javascript - javascript

I am getting the following error "Cannot set property 'value' of null" in the javascript named as "item_pricecataglog.js", following the line of code
document.getElementById('ctl00_ContentPlaceHolder1_ctl00_hdn_returnboolvalue').value = 'true';
I assume this is because my application did not find the corresponding element in the web page or control.
strange thing is, element "hdn_returnboolvalue" is declared in the web control from where this java script is referenced. below is the snippet of my web control
<%# control language="C#" autoeventwireup="true" CodeBehind="EstimateProductcatalogueBind.ascx.cs" Inherits="ePrint.usercontrol.ProductCatalogue.EstimateProductcatalogueBind" %>
<script type="text/javascript" src="<%=strSitepath %>js/item/item_pricecatalog.js"
language="javascript"></script>
<div>
<asp:HiddenField ID="hdn_kitavailibility" runat="server" Value="0" />
<asp:HiddenField ID="hdn_returnboolvalue" runat="server" Value="" />
</div>
The above control is inside the popup which is aspx page named "common_popup". i have added the control to "ContentPlaceHolder1" which is declared in popup aspx page.
<%# page language="C#" masterpagefile="~/Templates/popUpMasterPage.master" autoeventwireup="true" CodeBehind="common_popup.aspx.cs" Inherits="ePrint.common.common_popup" title="Untitled Page" enableviewstatemac="false" enableEventValidation="false" theme="Theme1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" language="javascript" src="<%=strSitepath %>js/Item/general.js?VN='<%=VersionNumber%>'"></script>
<div>
<UC:callClass ID="usrCallclass" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="plhDiv" runat="server"></asp:PlaceHolder>
</div>
</asp:Content>
below is the snippet of C# code from where i am adding the control to this page
UserControl userControl37 = (UserControl)base.LoadControl("~/usercontrol/ProductCatalogue/EstimateProductcatalogueBind.ascx");
this.plhDiv.Controls.Add(userControl37);

I think the proper code should be (notice the changed id):
document.getElementById('ContentPlaceHolder1_PriceCatalog_hdn_returnboolvalue').value = 'true';

Related

InvalidOperationException: WebForms UnobtrusiveValidationMode in C#

I've a web form with a text box and RequiredFieldValidator Control.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Name : <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate ="TextBox1" ErrorMessage="RequiredFieldValidator">
</asp:RequiredFieldValidator>
<asp:button runat="server" text="Button" />
</div>
</form>
</body>
</html>
When I load the page and click on the button, I get an error saying
Error:
[InvalidOperationException: WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).]
System.Web.UI.ClientScriptManager.EnsureJqueryRegistered() +145
System.Web.UI.WebControls.BaseValidator.RegisterUnobtrusiveScript() +11
System.Web.UI.WebControls.BaseValidator.OnPreRender(EventArgs e) +88
System.Web.UI.Control.PreRenderRecursiveInternal() +166
System.Web.UI.Control.PreRenderRecursiveInternal() +236
System.Web.UI.Control.PreRenderRecursiveInternal() +236
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +4682
I did some googling and found some solutions like changing the target version to 4.0 in web.config, using jquery in the global.asax file and changing the property of UnobtrusiveValidationMode to none.
I even read about unobtrusive javascript at https://en.wikipedia.org/wiki/Unobtrusive_JavaScript. But I could not make any relation with the content given there and the error I encountered
Most of the answers said to refer http://connect.microsoft.com/VisualStudio/feedback/details/735928/in-asp-net-web-application-visual-basic-the-requiredfieldvalidator-doest-work
But this link no longer exists.
When I viewed the source of the web page after changing the target version to 4.0, I found some extra inline javascripts(I guess that's called obtrusive javascripts). What's wrong in using inline codes?
I'm pretty new to ASP.net, so little brevity appreciated.

"JavaScript Hell" - Like "DLL Hell" [duplicate]

This question already has answers here:
force browsers to get latest js and css files in asp.net application
(23 answers)
Closed 7 years ago.
I have an ASP.NET webpage, which looks like this:
<%# Page Language="VB" MasterPageFile="~/LGMaster.master" AutoEventWireup="false" Inherits="com.Genie.PresentationLayer.Web.frmPNList" title="Primary Nominals results list - RESTRICTED" Codebehind="frmPNList.aspx.vb" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="Javascript/json2.js"></script>
<script type="text/javascript" src="Javascript/massusnchange1014.js"></script>
<script type="text/javascript" src="Javascript/jquery-1.11.1.min.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:PlaceHolder runat="server" ID="NextBits" />
<%--<input id="btnSave" type="button" value="Group USN Change" onclick="GroupUSNChange();"/>--%>
<%--<asp:Button ID="ButtonSetUSN" runat="server" Text="Set USN" OnClientClick="GetNewUSN()"></asp:Button>--%>
<asp:HiddenField ID="hfUSN" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="hfGenieConnectionString" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfUserName" ClientIDMode="Static" runat="server" />
<button onclick="GetNewUSN()">Change USN of Group</button>
</asp:Content>
Each time I make a change to: massusnchange1014.js I have to increment it by 1 e.g. the next revision will be: massusnchange1015.js, otherwise I get errors implying the asp.net webpage is using the last revision.
Why is this?
Because your browser is helping you out by caching the content. Like a picture it's seen before, the browser caches the response it got back for a URL. If the URL changes, it goes and gets the content again. Otherwise, it has no idea you've changed it.
You have a couple of options.
Use ASP.NET's ClientScriptManager to bundle your JS - it handles changes like this.
if you need them to stay as individual files, you could append a timestamp from the file on the URL to produce new URLs.

How to reference multiple identical user controls on a page

I'm trying to use several instances of an ascx control on a single page. Only the last control on the page works. I understand from this post [Asp.Net User Control does not work correctly when multiple are added to one form that the problem is related to the IDs; somehow I'm trying to reuse the IDs and the specific control being edited is not referenced correctly. However, the code on that page is complex and I don't understand the answers. I created a small example of my problem to demonstrate.
Here is my user control:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="testControl.ascx.vb" Inherits="Tempusforms.testControl" %>
<script type="text/javascript">
function getValue() {
document.getElementById("<%=Label1.ClientID %>").innerHTML = getIndex();
}
function getIndex() {
return document.getElementById("<%=droppit.ClientID %>").selectedIndex;
}
</script>
<span>
<asp:DropDownList ID="droppit" runat="server" OnChange="getValue();" >
<asp:ListItem Value="Select a Value"></asp:ListItem>
<asp:ListItem Value="one"></asp:ListItem>
<asp:ListItem Value="two"></asp:ListItem>
<asp:ListItem Value="three"></asp:ListItem>
</asp:DropDownList>
</span> Index Value =
<span>
<asp:label ID="Label1" runat="server" Text="mylabel" ></asp:label>
</span>
Here is the page that uses the controls:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="userControlTest.aspx.vb" Inherits="Tempusforms.userControlTest" %>
<%# Register src="../Common/testControl.ascx" tagname="testControl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:testControl ID="testControl1" runat="server" />
<br /><br />
<uc1:testControl ID="testControl2" runat="server" />
</div>
</form>
</body>
</html>
Can you show me how to make this work?
Thanks for your help.
ASP.NET generates different IDs which include the UserControl ID so IDs aren't the issue here.
However the problem is with the JS code that you are including in the User Control. This gets repeated and bad things happen because of that obviously.
You should get those scripts outside the User Control and change them to use parameters.
Something like:
<script type="text/javascript">
function getValue(ctrlID) {
document.getElementById(ctrlID).innerHTML = getIndex(ctrlID);
}
function getIndex(ctrlID) {
return document.getElementById(ctrlID).selectedIndex;
}
</script>
And you can call these functions from the User Control like this: OnChange="getValue(this.id);"

The Controls collection cannot be modified because the control contains code blocks(i.e.<% ...%>) ajax toolkit html editor

<%# Page Language="C#" MasterPageFile="~/master/111.master" AutoEventWireup="true" CodeFile="Template.aspx.cs" Inherits="_Template" Title="Untitled Page" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor" TagPrefix="cc1" %>
<asp:Content ID="Content3" ContentPlaceHolderID="cphhead" Runat="Server">
<script type="text/javascript" src="../css-js/jquery-1.8.3.min.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphcontent" Runat="Server">
<cc1:Editor ID="Editor1" Width="1028px" Height="300px" runat="server" SuppressTabInDesignMode="true" ActiveMode="Design" />
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="cphFooterJS" Runat="Server">
</asp:Content>
I try to add master page ajax html editor with namespace but I have this err:
System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
how to fix it? thanks for your answers.
I have faced this error before. Solution is, check in your master page, if you have javascript with <% ... %> block, then remove it from head and add in body section.
Hope it helps you.
Use This
1-Replace the code block with <%# instead of <%=
After replace code block with <%# instead of <%= add following code in page load
protected void Page_Load(object sender, EventArgs e)
{
Page.Header.DataBind();
}
After add code run your application it will work for you.
Happy Coding………
Thank you - this was also my issue.
I altered:
<script src="<%=Page.ResolveClientUrl(String.Format("~/Scripts/jquery-1.7.1{0}.js", IIf(Bshifter4.MvcApplication.UseMinify, ".min", ".chirp")))%>" type="text/javascript"></script>
Remove javascript block from header and add to body.
Any databinding expressions in a tag with runat=server with throw this error.
You should wrap around your script tags

Access content page control from master page using javascript

I want to access the content page Ajax combobox control in the master page and that too by using Javascript.
I have been trying the same by using the contentpageholder of the content page, but also one of the problem I get is there are around 10 content pages, so when some other page like Page 1 is opened , the code show object reference exception as contentplaceholder is not matched.
How to get that which content page is opened up?
Also I am not able to get the code working to get the maincontentplaceholder id in master page.
What I have done till now:
function accessControlContentPage() {
var txtCont = document.getElementById("Page.Master.FindControl('ContentPlaceHolder1').FindControl('txtContent')").value;
var text=txtCont;
}
But this is not working.
Any help with the same?
The suggested approach is add a specific content place holder controls for such scripts to be placed in the web page you are rendering. Take a look at the following master/content page markup:
Master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApp.PageMethods.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
There is a content place holder head wherein I must write some js functions trying to access the dropdown list in the other content place holder ContentPlaceHolder1.
Content page markup:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApp.PageMethods.WebForm3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
function foo() {
var ddl = document.getElementById('<%= DropDownList1.ClientID %>');
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</asp:Content>
Here I didn't have to worry so much about trying to access controls nested in ContentPlaceHolderID.
Alternatively, if you don't have that option/freedom, you can always write something as follows in your master page itself:
var d = document.getElementById('<%= this.ContentPlaceHolder1.FindControl("DropDownList1").ClientID %>');
Access content page control from master page using javascript
we can find div id or control id of content page from master page in asp.net
Explanation of content page:-
don't forgot to mention runat="server",
ContentPlaceHolderID="content_body" //observation,
main_content is the ID of div tag
MasterPage.master
var d = document.getElementById('<%= this.content_body.FindControl("main_content").ClientID %>');
Do whatever you want with d
Thank you

Categories