I have a asp.net web application written in VS 2013. The application has nested master pages and main master page has following codes:
<!DOCTYPE html>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
My web form consists of following codes also:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#textbox1').click(function () {
alert('Hello');
});
});
</script>
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" id="textbox1" class="form-control" placeholder="Name" maxlength="50" runat="server">
</div>
And when I build the project and run on browser (either ie or chrome), I click on "textbox1" and browser does nothing.
Appreciate for help.
You should replace this:
$('#textbox1')
with this:
$('#<%=textbox1.ClientID%>')
Your textbox is a server side control. So you have to read the ClientID, in order to read the ID for HTML markup that is generated by ASP.NET. For further info please have a look here. Generally as it is stated in the previous link:
When a Web server control is rendered as an HTML element, the id
attribute of the HTML element is set to the value of the ClientID
property
Furthermore, you have to remove the closing script tag, </script>, just before the opening script tag, <script> of your script.
You have an extra </script> tag immediately after your asp tag.
Try the same code without it:
<script src="https://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#textbox1').click(function () {
alert('Hello');
});
});
</script>
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" id="textbox1" class="form-control" placeholder="Name" maxlength="50" runat="server">
</div>
Works for me here: https://jsfiddle.net/mutjg5sq/
Try this, Hope it help you
Script:
<script src="https://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
Html:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server>
Jquery:
<script>
$('#textbox1').click(function () {
alert('Hello');
});
</script>
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 am unable to call the external jquery file. The code that is in the same aspx page is working but the external js is not working. Please help -
My aspx Page code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="loginvalidation.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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js" type="text/javascript"></script>
<script src="JScript1.js" type="text/javascript"></script>
</head>
<body">
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Username:</td>
<td><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password:</td>
<td><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
My external jquery code:
$(document).ready(function() {
$("#form1").validate({
rules: {
<%=txtUserName.ClientID %>: {
required: true,
email: true
},
<%=txtPassword.ClientID %>: {
required: true,
digits:true,
minlength:10,
maxlength:10
}
},
messages: {
<%=txtUserName.ClientID %>:{
required: "* Required Field *"
},
<%=txtPassword.ClientID %>:{
required:"* Required Field *"
}
}
});
});
You have to replace <%=txtUserName.ClientID %> and <%=txtPassword.ClientID %> with generated client IDs when you move the script to external js file.
Thanks !
Server Side code like <%=txtUserName.ClientID %> will not be work in JS file. They will not be parsed and will be rendered as simple text.
You can use the rules add function.
In ASPX Page, Add a CSS class (Here I have added username)
<asp:TextBox ID="txtUserName" runat="server" CssClass="username"></asp:TextBox>
In Your External File
jQuery(function() {
jQuery('form').validate();
// Use custom class added to input and add rules like this
jQuery('.username').rules('add', {
required: true,
email: true,
messages: {
required: "* Required Field *"
}
});
});
Add the script complete path like
<script src="~/foldername/foldername/JScript1.js"></script>
you just need to pick the file and drop to the page in visual studio.
And also as comment suggested <%=txtUserName.ClientID %> these are asp.net code that would not work in javascript external file.
In place of it please follow any of the solution
Solution 1
Either use StaticId on controls or page by setting ClientIdMode = "Static". you can find more details on link
like
<asp:TextBox id="txtUserName" runat="server" ClientIdMode ="static" />
After setting it you can aceess your controls like
$('#txtUserName')
Solution 2
Look into your html page that is rendered by Asp.net engine. Asp.net engine convert the controls id depends on Master page used and append it on the control id. Now rendered controlId should be look like 'ct100_txtUserName' and you can get your control like
$('#ct100_txtUserName')
Solution 3
Add classes on controls like
<asp:TextBox id="someId" CssClass="someClass" runat="server" />
and get the control like
$('.someClass')
But the last one is slow compare to other
I am trying to make a very simple coding example work, but for an unknown reason, it is not responding.
The example I am trying to replicate is found here: http://jsfiddle.net/karim79/2hw89/1/
It is an answer to the following SO question: Toggle visibility of text box based on status of check box -jQuery
Here is my code. I have embedded another checkbox, to test if I could call a basic onclick-listener-function. It works. The other checkbox is however not reacting when clicked, even though the exact same code works in the example. Do you know why?
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(function() {
$('#other').change(function() {
alert("Hello World!");
$('#otherrace').toggle(this.checked).focus();
});
});
</script>
<script>
function test(){
alert("Test is working!");
}
</script>
</head>
<body>
<input type="checkbox" name="race" value="other" id="other">Other,
Specify
<br />
<input style="display: none;" type="text" size="25" maxlength="25"
id="otherrace" />
<br />
<input type="checkbox" onclick="test()" name="test" value="test"
id="test">testing
<br />
</body>
</html>
script element cannot have both src and body
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--or use the address as http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js-->
<script>
$(document).ready(function() {
$('#other').change(function() {
alert("Hello World!");
$('#otherrace').toggle(this.checked).focus();
});
});
</script>
Script.src
This attribute specifies the URI of an external script; this can be
used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
Also, if you are loading the page from a local files system, using a protocol like file://.... then you need to specify the http protocol in the jQuery url like <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I created an asp.net file with a working collapsible panel.
I assumed that if I take the client side's source and copy it into an HTM file it would still work - but it doesn't.
What I did was "view source" and copied all of it to a blank HTM file.
All is working besides for the collapsible panel.
Why? Can I fix it?
Thanks
You can use jQueryUI accordion functionality
http://jqueryui.com/accordion/
or jQuery slideToggle() function
Regards
Nate
Here is Why
I will try and explain in short but have to use assumptions. ASP.NET is a web application framework that is compiled at runtime meaning your page is converted from objects and controls to html, css and javascript; the Javascript (ScriptResource.axd) is encrypted and you do not have access to the scripts in your htm page. Good Link about ScriptResource.axd
How to fix it?
The Great news is yes! Assuming you are using AJAXToolKit (and yes that is a big assumption), you can instead use jQuery UI Accordion with only one section. I tested both and they work the same. I hope this helps! jQuery Accordion reference
ASPX Example using AJAX (Collapsible Panel):
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:CollapsiblePanelExtender runat="server"
TargetControlID="Panel1"
Collapsed="true"
ExpandControlID="LinkButton1"
CollapseControlID="LinkButton1" />
<asp:LinkButton ID="LinkButton1" runat="server">Panel</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server">
This is a Test
</asp:Panel>
</div>
</form>
HTM Example using jQuery (Accordion):
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Panel1').hide();
$('#pnlLink').click(function () {
$(this).next().toggle();
return false;
}).next().hide();
});
</script>
</head>
<body>
<a id="pnlLink" href="#">Panel</a>
<div id="Panel1">
<div>
This is a test</div>
</div>
</body>
Can someone tell me why this markup/script errors out and doesnt put "Waltdog" into the Hidden1 input field?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<script>
document.getElementById("Hidden1").value = 'Waltdog';
</script>
<body>
<form id="form1" runat="server">
<div>
<input id="Hidden1" type="hidden" runat="server" />
Let me know if you see this!!! You crazy Texicans are harshing my Wednesday vibe! :)
</div>
</form>
</body>
Because your script runs before the element exists.
HTML (along with javascript in script tags) in is interpreted top to bottom, therefore when the script runs, the input element has not yet been created.
The solution is either
put the script in a function that runs when the page loads
put the javascript after the element
Put script node below input
<input id="Hidden1" type="hidden" runat="server" />
<script>
document.getElementById("Hidden1").value = 'Waltdog';
</script>