I'm trying to just simply make an object in javascript via visual studio. My syntax inside my function that is getting called is simply:
var d = new Object();
d.id = 8;
When I launch my page from Visual Studio and click my button that fires the function that has those 2 lines of code in it, I get an error at d.id where it's showing d as undefined still. I just want a generic object that I can assign properties to. What am I missing?
There isn't much more code to show. The total function as of right now:
function btnTest_onClick() {
var d = new Object();
d.id = 8;
}
In my default.aspx I have
I removed the tags because stackoverflow doesn't seem to like them
<input id="Button1" type="button" value="button" onclick="btnTest_onClick()" />
I'm just trying to learn this stuff so I'm starting very basic and small. This doesn't really make sense to me. The function gets called just fine.
Exact error is:
JavaScript runtime error: Unable to set property 'id' of undefined or null reference
The entire HTML Page. This is literally Project->New Website, and add a button.
<%# Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/Process.js" type="text/javascript" language="javascript"> </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit www.asp.net.</p>
<p>
<input id="Button1" type="button" value="button" onclick="btnTest_onClick()" /></p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</asp:Content>
Related
I'm using the master page in asp.net and receiving the following error in the chrome browser inspection tool console.
Uncaught TypeError: Cannot set property 'type' of null
at myFunction (StudentPassword.aspx:258)
at HTMLInputElement.onclick
I guess that the problem is with the script tag. where should I place it? Inside tag or at the bottom of content page or at the bottom of the master page?
Masterpage is:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Student.master.cs" Inherits="Project_Placements.Student" %>
<!DOCTYPE HTML>
<HTML>
<head runat="server">
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<script type="text/javascript">
function myFunction() {
var checkBox = document.getElementById("myCheck");
var pwd = document.getElementById("password");
if (checkBox.checked == true) {
pwd.type = 'password';
} else {
pwd.type = 'text';
}
}
}
</script>
</body>
</html>
and the content page code is as follows:
<%# Page Title="" Language="C#" MasterPageFile="~/Student.Master" AutoEventWireup="true"
CodeBehind="StudentPassword.aspx.cs" Inherits="Project_Placements.WebForm7" %>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form id="form1" runat="server">
<asp:TextBox ID="password" runat="server" TextMode="Password" ></asp:TextBox>
<label for="myCheck">Show Password :</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
</form>
</asp:Content>
ASP.Net chains up all id from serverside ran parent elements to the id of the current element, unless overwritten on the server. So the outputted id actually looks something like ContentPlaceHolder1$Content3$form1$password.
You can use the ends-with selector to omit this.
var pwd = document.querySelector("[id$=password]").
Yet be aware to still choose unique id which will also be unique using ends-with.
Alternatively you could use a data-attribute and select on that:
<asp:TextBox ID="password" runat="server" TextMode="Password" data-id="password" />
var pwd = document.querySelector("[data-id=password]");
Finally you could use something like:
var pwd = document.getElementById('<%=password.ClientID %>');
Yet I never really liked it and it demands the script to be inline.
You are getting the error because the script is getting loaded before the DOM is being rendered completely. Try placing the content of your script inside document.ready and that should solve the problem.
I got an ASPX page with the folowing code behind
public partial class test : Page
{
protected void test(object sender, EventArgs e)
{
throw new Exception("test");
}
}
And the following ASPX code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Thumbnail</title>
</head>
<body>
<form id="form1" runat="server">
<div id="buttonTarget">
</div>
</form>
</body>
</html>
If I run the following javascript a button is added to the page:
$('#buttonTarget').html('<asp:Button runat="server" ID="tst" CssClass="buttons" OnClick="Test" Text="Test"/>');
The buttons shows the same way as an asp tag shows in element inspector.
And when I click the button the server sided function is called and the site breaks with the "test" exception
I know this isn't good practice but I want to know why this works. Why does this button call the server sided function and why is it displayed as a normal button ?
--EDIT--
The aspx code was a simplified version. The actual code used a gridview control and used javascript to insert rows in the table. These rows hold the tags.
Expanding on what #Mamun was probably saying, when the page is executing on the server, it's seeing the asp tag in the JS string and translating it into the appropriate HTML. If you view source on your page in the browser, you'll probably see something like this instead of the ASP tag in your JS call:
$('#buttonTarget').html('<input type="submit" name="ctl00$MainContent$tst" value="Test" id="MainContent_tst" class="buttons" />');
Back-end:
protected void Page_Load(object sender, EventArgs e)
{
var data = File.ReadAllText(Server.MapPath("/Articles/12-19-2016/anotherworkingtitle.html"));
HiddenFieldTest.Value = data.ToString();
}
Front-end:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="../../Scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("#<%=HiddenFieldTest.ClientID %>").val();
$('#firstTest').html(data);
});
//Below is a test I tried
<%-- document.getElementById("#<%=HiddenFieldTest.ClientID %>").value = ('#firstTest');
var data = document.getElementById("#<%=HiddenFieldTest.ClientID %>").value;
$('#firstTest').html(data);--%>
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:Panel ID="aspTestArticle" runat="server">
<asp:HiddenField ID="HiddenFieldTest" runat="server"/>
<p id="firstTest" runat="server"></p>
</asp:Panel>
</div>
</asp:Content>
My Group Project is an entertainment news website that focuses on videogames and technology.
The code you see above the same code I've used for the prototype "Articles" page. It does work, but will not work on this new page.
What I do is when an Article is created and you press the Create button, a new folder with today's date is created. Inserted into that folder is the actual article file and a generated .aspx page(complete with .cs backend and designer.cs).
What's inserted is the code you see above.
The prototype page is working, but this page does not.
Code on this generated page and the prototype page are identical.
When accessing the page, everything is blank. When "Inspecting Element" with F12, I notice the HiddenField has a value="(article code)". It should not be doing that. It should be:
(article code here)
Can I please get some assistance in finding a solution to this?
EDIT:: I thought it was my directory, so I changed my "src" on my script to reflect the additional folders. That didn't work.
EDIT2:: Here is the .html:
<link href="../../CSS-StyleSheets/ArticleCSS.css" rel="stylesheet" />
<div class="header">
<h1>another working title</h1>
</div>
<body>
<div class="body">
<article>
<h2>test</h2>
<p class="article-meta"><strong>Author </strong>test,<strong> Published: </strong>12-19-2016</p>
<h1>test</h1>
<p>test</p>
</div>
</body>
I have coda slider that i put inside a user control (ascx file) and it is working perfectly on a test page.
But when I put the same user control in a content place holder in a test page that is based on a master page it stops working correctly. It appears that the javascript function can't correctly identify the ID of the DIV now that it inside of a content place holder. I have read some other links but they seem to be slightly different situations and I have tried using document.getElementById, but not sure if I am on the right track or just messing up with the syntax. and I have also tried putting ct100_cpMC_ in front of the id.
<%# Page Title="TestPage - Test User Control" Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="_TestPage" %>
<%# Register Src="~/UserControls/WhatCustomersAreSaying.ascx" TagPrefix="uc1" TagName="WhatCustomersAreSaying" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" type="text/css" media="screen" href="css/coda-slider.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.coda-slider-3.0.min.js"></script>
<script>
$(function () {
$('#slider-id').codaSlider({
autoSlide:true,
autoHeight:false
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMC" Runat="Server">
<uc1:WhatCustomersAreSaying runat="server" ID="WhatCustomersAreSaying" />
</asp:Content>
Inside my user control is a DIV with the ID of "slider-id" that the javascript function needs to find.
As I mentioned before, I am not sure if I need to use document.getElementById and how, or if there is a simpler way by prepending something to ID within quotes $('#slider-id') so the javascript function knows the ID it is looking for is within a content place holder.
I had a friend help me and this is what worked. I knew I needed the (document).ready but did not have the syntax correctly. This is what fixed my problem,
<script>
$(document).ready(function ($) {
$('#slider-id').codaSlider({
autoSlide:true,
autoHeight:false
});
});
</script>
So, I have an .aspx webpage as follows:
..
<form id="frm" runat="server">
<asp:FileUpload runat="server" id="fileupload" onchange="browsed()" />
<asp:Button runat="server" OnClick="Upload_Click" id="uploadbutton" class="uploadbutton" Text="start upload" Enabled="false" />
<div id="nfo" style="display: none">
blabla
</div>
</form>
..
Now, as you can guess correctly, user chooses file to upload, clicks #uploadbutton and, voila, Upload_Click is called after the postback.
Then, I want to show div #nfo with some jQuery effects during the upload. To do this, I write:
$(function() {
$('.uploadbutton').click(function() {
$('#nfo').slideDown().show("fast");
})
})
and everything works just fine, until the user starts browsing in IE...
First of all, in IE, user has to click #uploadbutton twice - first time to display #nfo, second time, for some reason, to initiate postback.
Secondly, after the postback, Upload_Click's this.fileupload.HasFile shows false.
FF and Chrome works quite well though.
As far, as I can understand this - in IE jQuery's function prevents something important for asp:FileUpload from happening and stops the postback. Though, on the second click it does initiate the postback, but still with no info for asp:FileUpload's Upload_Click.
Any help?
Update:
followed #joelt'd advice. turned out, there was some different problem, never thought it could be of importance, so I didn't provide source code for that part =(
see localizing <asp:FileUpload>. IE problem
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
$("#progress").show();
});
});
</script>
</head>
<body>
<form runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" />
<div id="progress" style="display:none; background-color:Red;">test</div>
</form>
</body>
</html>
This works fine for me in FF and IE7, except in IE, the progress indicator doesn't really give you anything because of how it's rendering, I suppose. I would say the biggest difference between our code is the "onchange=browsed()" function. It's possible that's not getting called until you click the button? In any case, I would start with a stripped down page like this, and start adding in other elements you have until it breaks.
try this:
<asp:Button runat="server" OnClick="Upload_Click" id="uploadbutton"
class="uploadbutton" Text="start upload" Enabled="false"
OnClientClick="return myFunction();"/>
<script type="text/javascript">
function myFunction(){
$('#nfo').slideDown().show("fast");
return true;//THIS WILL FIRE POSTBACK EVENT
//return false;//THIS WILL STOP POSTBACK EVENT, WHICH YOU MAY WANT IF THERE
//IS NO FILE SELECTED
}
</script>