I can get simple examples to work fine as long as there's no master page involved. All I want to do is click a button and have it say "hello world" with the javascript in a .js file, using a master page. Any help very much appreciated :)
EDIT
As #Adam points out in the comments, there is a native jQuery mechanism that basically does the same thing as the hack in my original answer. Using jQuery you can do
$('[id$=myButton]').click(function(){ alert('button clicked'); });
My hack was originally developed as a Prototype work around for ASP.NET and I adapted it for the original answer. Note that jQuery basically does the same thing under the hood. I recommend using the jQuery way, though, over implementing my hack.
Original answer left for comment context
When you use a master page, ASP.NET mangles the names of the controls on the dependent pages. You'll need to figure out a way to find the right control to add the handler to (assuming you're adding the handler with javascript).
I use this function to do that:
function asp$( id, tagName ) {
var idRegexp = new RegExp( id + '$', 'i' );
var tags = new Array();
if (tagName) {
tags = document.getElementsByTagName( tagName );
}
else {
tags = document.getElementsByName( id );
}
var control = null;
for (var i = 0; i < tags.length; ++i) {
var ctl = tags[i];
if (idRegexp.test(ctl.id)) {
control = ctl;
break;
}
}
if (control) {
return $(control.id);
}
else {
return null;
}
}
Then you can do something like:
jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );
where you have the following on your child page
<asp:Button ID="myButton" runat="server" Text="Click Me" />
If your site has content pages in other folders, using the Page's ResolveUrl method in the src path will ensure that your js file can always be found:
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
Make sure that jQuery is being added in the master page. Given that you have this control:
<asp:Button ID="myButton" runat="server" Text="Submit" />
You can wireup the javascript with this:
$(document).ready(function() {
$('[id$=myButton]').click(function() { alert('button clicked'); });
});
$(document).ready() fires when the DOM is fully loaded, and all the elements should be there. You can simplify this further with
$(function() {});
The selector syntax $('[id$=myButton]') searches elements based on their id attribute, but matches only the end of the string. Conversely, '[id^=myButton]' would match the beginning, but for the purposes of filtering out the UniqueID that wouldn't be very useful. There are many many more useful selectors you can use with jQuery. Learn them all, and a lot of your work will be done for you.
The problem is that ASP.Net creates a unique id and name attribute for each element, which makes finding them difficult. It used to be that you'd need to pass the UniqueID property to the javascript from the server, but jQuery makes that unneccessary.
With the power of jQuery's selectors, you can decouple the javascript from the server-side altogether, and wireup events directly in your javascript code. You shouldn't have to add javascript into the markup anymore, which helps readability and makes refactoring much easier.
Just move the <script type="text/javascript" src="jquery.js" /> tag into the head tag in the master page. Then you can use jquery in all content pages.
There is no magic about using master pages with jQuery.
Adam's solution is the best. Simple!
Master page:
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
Content page:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
$(document).ready(function () {
$("[id$=AlertButton]").click(function () {
alert("Welcome jQuery !");
});
});
</script>
</asp:Content>
where the button is
<asp:Button ID="AlertButton" runat="server" Text="Button" />
Reference the the Jquery .js file in the head of the MasterPage as follows:
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>
(some browsers don't like ending it with />)
Then you can write things like
$('#<%= myBtn.ClientID%>').show()
in your javascript making sure to use the ClientId when referencing an ASP.Net control in your client code. That will handle any "mangling" of names and ids of the controls.
Master page:
The jQuery library goes in the master page. See if the path is correctly referenced. You might like to add the extra documentation like this:
<head>
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>
<% if (false) { %>
<script type="text/javascript" src="/Scripts/jquery-1.2.6-vsdoc.js"></script>
<% } %>
</head>
Master page:
<head>
<script type="text/javascript">
$(document).ready(
function()
{
alert('Hello!');
}
);
</script>
</head>
CodeBehind for content pages and user controls:
this.textBox.Attributes.Add("onChange",
String.Format("passElementReferenceToJavascript({0})", this.textBox.ClientID));
Check out this post:
http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx
also explains how to get intellisense for jQuery in Visual studio.
When pages are rendered along with master pages, control id gets changed on page rendering so we can't refer them in jQuery like this #controlid. Instead we should try using input[id$=controlid]. If control is rendered as input control or if as anchor tag use a[id$=controlid] in jQuery.
In case if some one wants to access a label, here is the syntax
$('[id$=lbl]').text('Hello');
where lbl is the label id and the text to display in the label is 'Hello'
I also started with the simplest of examples and had no luck. I finally had to add the jquery .js file outside of the <head> section of the master page. It was the only way I could get anything to work in Firefox (haven't tried other browsers just yet).
I also had to reference the .js file with an absolute address. Not entirely sure what's up with that one.
Adam Lassek linked to using jQuery selectors, though I think its worth explicitly calling out selecting elements by their class, as opposed to their id.
e.g. Instead of $("#myButton").click(function() { alert('button clicked'); });
instead use $(".myButtonCssClass").click(function() { alert('button clicked'); });
and add the class to the button:
<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" />
This has the benefit of not having to worry about whether two control ids 'end' the same way in addition to being able to apply the same jQuery code to multiple controls at a time (with the same css class).
PROBLEM --> when using Site.Master pages the control id names (for ASP controls) get the ContentPlaceHolderID prefixed to them.
(Note this not a problem for non-asp controls as they don't get 'reinterpreted' - i.e. they just appear as written)
SOLUTIONS:
Simplest --> add ClientIDMode="Static" to the asp control definition (or set with properties) in aspx page
Alternatives include:
Hardcoding the ContentPlaceHolderID name in the js code e.g "#ContentPlaceHolder1_controlName" - eek!!!!
using the <%= controlName.ClientID %> in the ASP page - plus, assigning it - there- to a variable (or object of variables). The variable (or object dot notation) can then be used in external js page
(NOTE: Can't use <%= controlName.ClientID %> in external js)
Using CssClass with a unique(same name as ID) in ASP page and refering to the control as ".controlName" instead of "#controlName"
Using the "[id$=_controlName]" instead of "#controlName" - this is involves a small search and is looking for a control that ends with the unique name - that way the start is irrelevant
Related
I have a strange problem to which I could not find a solution. In order to clarify my problem, I did a simply test page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="MyApplication.Web.Surveillance.Reports.test1" %>
<!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.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager" runat="server" />
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="btn1" runat="server" Text="test1" />
<%= DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btn2" runat="server" Text="test2" />
<script type="text/javascript" language="javascript">
$(document).ready(pageInit);
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(pageInit);
function pageInit() {
window.location.hash = "#0";
}
</script>
</form>
</body>
</html>
In this test page, I have two button. "test1" button is inside an updatepanel. "test2" button is outside. When I run this page, I can see the url, for example "http://localhost/test/test1.aspx#0". After I click the "test1" button, I can see the url changed to "http://localhost/test/test1.aspx#". The "0" is missed. And after that, everything is ok. If I test the "test2" button. Everything is ok too.
I also find this problem only happens in IE. FireFox works fine.
My question is how can I keep the right url when I click the "test1" button?
Thanks
I found a solution. As seen on this blog.
The following stuff happens on the page :
In order to make a partial postback using the Update Panel on an ASP.NET page, one has to embed a Script Manager on the page. This Script Manager control will render a large amount of Javascript on the page, that controls like the UpdatePanel will utilize to make the snazzy partial update of the page.
This Javascript tampers with the url’s hash value, appearently to enable history and deeplinking when using Update Panels, and for some (to me still unknown) reason it changes the url, removing everything after the hash mark.
The first solution he provided worked for me. You need to add a line like that to your ASP.NET page after the scriptmanager declaration :
<script type=”text/javascript”>
Sys._Application.prototype._setState = function() {}
</script>
try to use something else than 0, for example :
window.location.hash = "#a";
I think #0 mean the scroll to the tag that name is 0 and this is not allowed by default at least in the IE none-standard :P
Instead of using window.location.hash, you also could use the href:
window.location.href = '#0';
This works in all browsers and it could be applied on every webpage.
I had a simulair problem, where I listen for hasg changes and Scriptmanager keept reseting the hash on the first postback. Pascals solution by overriding the _setState function didnt work for me, but I figure out a diffrent approch that might help someone.
$(window).hashchange(function () {
if (window.location.hash == '#' || window.location.hash == '') {
window.history.back(-1);
}
});
hashchange is a jQuery-plugin I found here
Big thanks to Pascal on this one. His solution worked. I placed it directly after the scriptmanager tag. I was seeing the behaviour in all browsers when landing on the page when the URL had a hash in it.
My page uses a function to scroll to the particular hash location using .animate and this still functions nicely with Pascal's fix:
function goToByScroll(id) {
$('html,body').animate({ scrollTop: $("#" + id).offset().top +160 }, 'slow');
}
if (window.location.hash != '') {
goToByScroll(window.location.hash.substr(1));
};
As far as I can tell there is no detriment to any other functionality on the page. I have tested the solution successfully in IE9, FF 20.0.1, Chrome 26.0.1410.64 and Opera 12.1 all on Windows 7.
If I could vote you up Pascal I would.
I have a traditional ASP.NET GridView. Inside of it I have a Template Field with edit capabilities. I need to use a jQuery autocomplete plugin on the edit piece. It works anywhere but inside of this GridView. In other words, I know the plugin works.
Here is the ASP.NET stuff (yes, I'm using a SqlDataSource):
<%# Eval("INGREDIENT_CODE") %>
And here is the jQuery in the document.ready():
$('[id$=txtEditIngredients]').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });
What might I be doing wrong here?
I think the best way to do it to specify a Class for the textbox and handle it based on class and not ID.
$('.AutoCompleteField').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });
I have had problems when I tried to access controls inside gridview using ID.
HTH
you will want to use within the item template:
<%# ((GridViewRow)Container).FindControl("txtEditIngredients").ClientID %>
If you look at the source of your rendered page you will see the controls ID of the textbox in the gridview is not just txtEditIngredients, it has pre-appended information.
Another option would be to add a class to the textboxs and apply the autocomplete based on the class. This way they are not id-dependent
$('.ICLookup').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });
Also if using the client ID, make sure you put a specific document.ready(): into the EditTemplate to make sure it is only only being called when the edit controls are visible.
Well, now that you said it is inside an updatepanel, it makes a lot more sense. The code in the updatepanel is not necessarily going to be rendered by the time your jquery runs. Doing the alert with .size like I suggested in my other answer would confirm this.
If you did a .live('autocomplete') call instead of .autocomplete(), it should work even with the updatepanel. The jQuery .live function causes the jQuery event to be added to all controls that match the selector, even if they are added after you make the call. See http://api.jquery.com/live/ for details.
You can use a class to do the selecting if you want (as others have mentioned), but to me, if you are adding a class for just that purpose and you have an ID you can select with, it seems like a waste.
I created a very simple example and it shows that the way you are doing it (with [id$=txtField] as your selector does indeed work with the plugin. Here's the .aspx code:
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.min.js"></script>
<link type="text/css" href="jquery.autocomplete.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('[id$=txtTest]').autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], {
mustMatch: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView runat="server" ID="grdView" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox runat="server" ID="txtTest" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
And here's the codebehind updates needed to run the test:
protected void Page_Load(object sender, EventArgs e)
{
List<string> data = new List<string>();
data.Add("test");
data.Add("test2");
this.grdView.DataSource = data;
this.grdView.DataBind();
}
If you create a test webapp with this as your test page and run it, the autocomplete will work just fine.
Since this is not working for your app, you need to check to make sure that the selector you are using ([id$=txtEditIngredients]) actually matches something. To test this, put this code in place before it in your document.ready event:
alert($('[id$=txtEditIngredients]').size());
This should alert a number with the number of rows in your GridView. If it doesn't, view the source and find that text field in one of your rows to see what the ID is, and adjust your selector accordingly.
Edit: I just wanted to add that I use the [id$=controlName] all the time in jQuery/.Net because of the .Net control naming structure and it works fine every time, so this should not be an issue at all.
I have an Asp.Net web page, having the common Asp.Net form. The outer "border" of the page (i.e. main menu, header, ...) is build using normal Asp.Net code using a master page. The content of that page uses jQuery to display dynamic forms and to send data to the server.
If I push the return key on that page, I jump to a (more or less) random page - which is not what the user expects. ;-)
There are some text areas and the user must be able to enter line breaks. Otherwise it would be fine to disable the return key completely. Any bullet proof way to do that?
I found some solutions on the web, which capture the keypress event and ignore \x13, but that does not really work. It works as long as the page has just loaded, but as soon as I have clicked on some elements, the return key behaves as usuall.
Any hint would be really appreciated!
Achim
Here is some script I put together yesterday night but was not able to post it as my laptop ran out of battery :(
NOTE: I'm using jQuery for it. But you can easily re-write it to work with pure javascript.
<html>
<head>
<title>Enter Key</title>
<script src="jquery-1.2.6.js"></script>
</head>
<body>
<div id="prompt" style="color:#eeffee;width:50px;height:50px;"></div>
<textarea id="txt" cols="25" rows="10"></textarea>
<script type="text/javascript">
$(document).ready(function(){
var ar=$("textarea").add($("input"));
var elems=new Array();
var key = 13;
$(ar).each(function(){
var i=$(this).attr("id");
if(i && i!=="")
elems.push(i);
});
elems.sort();
$().keypress(function(e){
var k=e.keycode || e.which;
var id = e.target.id;
if(k === key){
if(id){
var ar=$.grep(elems,function(a){ return a==id;});
if(ar.length === 0){
$("#prompt").html("Eating ");
return false;
}else{
$("#prompt").html("Allowed");
}
}else{
$("#prompt").html("Eating ");
return false;
}
}
});
});
</script>
</body>
</html>
You could achieve it by using Panel like below.
<asp:Panel runat="server" DefaultButton="">
other html/asp tags
</asp:Panel>
There should be other efficient ways.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.panel.defaultbutton.aspx
Here is what I used to fix this problem.
<form runat="server" defaultbutton="DoNothing">
<asp:Button ID="DoNothing" runat="server" Enabled="false" style="display: none;" />
I am very new to jQuery and have got a quick question.
I wish to use my server side classes in my jQuery code, something similar to this:
$(document).ready(function() {
var temp = <%# myClass.Id %>;
})
Is this possible? if so, how?
Thank you very much
This is the later question I refined my former question to:
I'm sorry, I think I didn't explain myself too well... I've got a class name User. It's a class I built in my business logic.
I've got a web page named UserProfile, inside it I've got the following property exposing the current logged in user:
public BL.User CurrUser { get { return (BL.User)Session["currUser"]; } }I want to be able to access this User class from my aspx page using Jquery. How do I do that?
The databinding syntax
<%# MyStaticClass.MyProperty %>
will only work if you call DataBind on the container (page). What you're after is most likely the following syntax:
<%= MyStaticClass.MyProperty %>
which will also give you access to you page / control members
<%= this.MyPageProperty %>
As was already mentioned you should really assign those values to java script variables and pass those variables to you JS functions.
This will only work if your javascript is embedded in your source files (e.g. the .aspx files):
<script type="text/javascript">
var id = <%# myClass.Id %>; // store as raw value
var id_string = '<%# myClass.Id %>'; // store in a string
</script>
As others have said, if the JavaScript is in your aspx page, then using server tags will work fine.
If you have your jQuery in an external script file, then you could put this in your aspx page
<script type="text/javascript">
var myClass = $('#<%= myClass.ClientID %>');
</script>
and then use the variable in your external script file
$(function() {
myClass.click( function() { ... });
});
For other options take a look at this question and answer - How to stop ASP.NET from changing ids in order to use jQuery
I have a textbox control Super1 in my MasterPage.
I am using javascript to access this control from my content page like this:
<asp:Content ID="ContentPage" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
function Somethin() {
{
document.forms[0].elements['Super1'].value = "sdfsd";
//document.getElementById('<%=Super1.ClientID%>').value = "sdfsdf";
}
}
</script>
</asp:Content>
But while page load it says Super1 not found. How can I access Super1?
In your masterpage's onload add this code :
string script = #"<script>
function Somethin() {
document.getElementById('" + Super1.ClientID + #"').value = 'sdfsd';
}
Somethin();
</script>";
if (!Page.ClientScript.IsClientScriptBlockRegistered("somethin_script_block"))
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "somethin_script_block", script);
}
this will add your script to the end of the page.
EDIT : I just realized, you use your controls ID directly in your javascript code. this may cause the exception. I update your code to fix it.
I hope this helps.
You have to make sure the document has loaded, make sure to call your functions that rely on the DOM being loaded onload. E.g.:
<script type="text/javascript">
window.onload = function() {
Somethin();
}
</script>
From the sample code you posted and since you said you are using a control, check the rendered id of the control you are trying to get at. In my experience the name is something crazy like ctl100_masterpagename_namingcontainer_controlname... that needs to show up in the js as well.
Super1 might be in a different naming container (the masterpage's control collection). You either need to render out the clientid of the control in a global javascript variable during the masterpage rendering so it can be accessed by javascript in the child page or you need to get a reference to the Masterpage, find the control there and write out the client Id in your child pages javascript...
Something like...
if the text box is in its own content place holder
var txtSuper1 = Master.FindControl("ContentPlaceHolderName").FindControl("Super1") as Textbox;
or if its not in a content place holder
var txtSuper1 = Master.FindControl("Super1") as Textbox;
3rd option might be to expose the control as a property of the masterpage (not sure) - my webforms is rusty.
On the master page, declare a javascript variable for the control, e.g:
<asp:TextBox id="Super1" runat="server"/>
...
<script type="text/javascript">
var txtSuper1 = document.getElementById('<%= Super1.ClientID %>');
</script>
It's important that you use the ClientID property, because the rendered control's ID (on the client) will be different from the server control's ID (due to naming containers).
Now you can access the textbox from javascript declared in the content pages:
<asp:Content ID="ContentPage" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
function Somethin()
{
txtSuper1.value = "sdfsd";
}
</script>
click me
</asp:Content>
BTW: in your code there are duplicate curly-braces in function Somethin() {{ ... }}