trying to call function from an external JS file - javascript

i have a very simple asp.net code but my code doesnt make any sense and after run there would be nothing happen .
I'm using external java script file and trying to run my Script from my asp page and in the button object .
Its my asp code :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WebApplication2.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head ">
<title></title>
<script src="Script/Script_Validate.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<asp:Button runat="server" Text="aaaaaa" OnClientClick="valid();" />
</div>
</form>
</body>
</html>
Its my JS's file content :
function valid()
{
alert("Hello! I am an alert box!!");
}
please help .

Your code works for me. Do you definitely have a "Script" folder? Is the name of the file correct? Do you have JavaScript enabled on your browser?
The only problem I can see with your code is your head tag has a single quotation mark ("). Maybe this should be runat="server"?

Related

ASP.NET setting textbox value using javascript without document.getElementById()

I have the following Web Form in my ASP.NET Website
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function SetTextBoxValues() {
TextBox1.value = "Textbox can be set without calling document.getElementById()";
TextBox2.value = "Textbox can be set without calling document.getElementById()";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" Height="210px" TextMode="MultiLine" Width="725px"></asp:TextBox>
<br/>
<textarea rows="4" cols="50" id="TextBox2" runat="server" />
<br/>
<button onclick="SetTextBoxValues()">Set Text Box Value</button>
</form>
</body>
</html>
The page works as I can click the button and set values in both TextBox1 and Textbox2. What I don't understand is the way the Textbox value is set in the javascript function.
<script type="text/javascript">
function SetTextBoxValues() {
TextBox1.value = "Textbox can be set without calling document.getElementById()";
TextBox2.value = "Textbox can be set without calling document.getElementById()";
}
Normally we need to use the following JS code:
document.getElementById('<%=txtTextBox.ClientID %>').value = "Some values";
But it looks like we can set the value without the use of document.getElementById(). May I know why it is working this way? Is this a valid way of setting textbox value using javascript?
You use component "runat server" so you should use code behing:
TextBox2.Text = yourvalue;
And create a method server side to manage your inputs.
I think it's like this post:
textarea control, asp.net c#
quoting answer provided as comment from ConnorsFan.
It does work, indeed. I think the explanation is given here:
stackoverflow.com/questions/3434278/…. – ConnorsFan Jun 3 '16 at 12:29

JQuery is not working in JSP with Struts2

I have included the JQuery CDN in the <script> tag,but it does not works. I am using intellij, it prompts me WITH such warning "Unresolved function or method $()"
Any response is appreciated
<%# taglib prefix="s" uri="/struts-tags" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="http//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<title>Success</title>
<script>
$("#select").click(function() {
alert("aaaa");
});
$("#delete").click(function() {
alert("aa");
});
</script>
</head>
<body>
<label for="person">personname</label>
<input id="person" name = "person" type="text" />
<input id="add"type="button" value="add" />
<input id="delete"type="button" value="delete"/>
<input id="select"type="button" value="select"/>
<input id="update"type="button" value="update"/>
</body>
</html>
Since you have put all js inside header you have to put it inside document.ready.
<script>
$(document).ready(function(){
$("#select").click(function() {
alert("aaaa");
});
$("#delete").click(function() {
alert("aa");
});
})
</script>
This is because script tag is a blocking tag and when you put it inside header tag, it will be parsed before DOM is ready. At that time jQuery don't know what is #select & #delete, so no way it will able to attach the click handler.
A second option is to put all script near closing body tag. So first DOM will be ready with elements then js will be executed. Then you can remove the
$(document).ready(function(){
})
Example
<body>
<!--All HTML elements-->
<script>
// All your js goes here.
</script>
There are several advantage of putting scripts just before closing </body> tag , which is beyond this question

Why data not appearing in HTML fields when using knockout.js

I am completely fresher in knockout.js and just started . I just created a simple page in asp.net form application . and put following scripts and HTML .
when i run this code fields are still showing blank
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-1.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
var product = { itemNumber: "T314CE", model: "Taylor 314ce", salePrice: 1199.95 };
ko.applyBindings(product);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
With Knockout</h2>
<span>Item number</span><span data-bind="text: itemNumber"></span>
<br />
<span>Guitar model:</span><input data-bind="value: model" />
<span>Sales price:</span><input data-bind="value: salePrice" />
</div>
</form>
</body>
</html>
no js error ? How can i find the reason behind this ?
You should call the function on document.ready or you can put the script block at the bottom of your HTML document.
rahularyansharma your binding executes before your DOM load.. so it never works untill it will exceute inside the document.ready or page bottom script area.

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

getElementById is not working in asp.net

In my application i just want to alert the value in the text box using javascript .
aspx page code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 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">
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="textbox1" Text="asdsad">
</asp:TextBox>
</div>
</form>
</body>
</html>
I only get alert 'hi' ..after that i get an error " object required" . whats the reason?
Your code is running before the element has been displayed on the screen. Try -
window.onload = function() {
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
}
Or move your script to the bottom of the page as suggested by Tejs in the comments below.
The page is not loaded yet. You have to put the code in a function and then trigger with
onload=yourfunction;
Please change the script location, put the script code on bottom of the page.Just After the complete with form tag.
The ID you are trying to get is a server side id and not the html id of the element, if you checked using firebug you will notice that the id has loads of extra letters and numbers inserted by asp.net, i'd recommend using jquery instead to walk into the dom to select the specific element.
You could also add a name and getByName.

Categories