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() {{ ... }}
Related
I want to use a image slider in my web page, the problem is that when I use the JS code with the master page it doesn't work, it works for page without master page. I tried placing the JS code in master page head section and in the content page in
, neither works.
I am using below js code.
<script language="javascript" type="text/javascript">
var i = 1;
function fun() {
i++;
document.getElementById("img1").src = "images/" + i + ".jpg";
if (i == 4) //here 2 is number of images i want to display in the slide show
{ i = 0; }
}
setInterval("fun()", 2000);
</script>
asp:Image I am almost sure that your problem is with the ids.
Master Page implements the INamingContainer interface, so Controls inside a Page with a Master Page are rendered with a nested id. Something like:
<img name="ctl00$MainContent$img1" id="ctl00_MainContent_img1" />
against what you get in a Page without Master Page
<img name="img1" id="img1" />
It is done this way to guarantee the ids of the controls to be unique within an entire application.
Any control that implements this interface creates a new namespace in which all child control ID attributes are guaranteed to be unique within an entire application. The marker provided by this interface allows unique naming of the dynamically generated server control instances within the Web server controls that support data binding.
You can get the ClientID of a control in Page with the ClientID property.
Your code will look something like:
<script language="javascript" type="text/javascript">
var i = 1;
function fun() {
i++;
document.getElementById("<%= img1.ClientID %>").src = "images/" + i + ".jpg";
if (i == 4) //here 2 is number of images i want to display in the slide show
{ i = 0; }
}
setInterval("fun()", 2000);
</script>
<asp:Image ID="img1" runat="server" />
You can also can set the ClientIDMode of your control to Static when declaring it and it will keep the id you assigned:
<script language="javascript" type="text/javascript">
var i = 1;
function fun() {
i++;
document.getElementById("img1").src = "images/" + i + ".jpg";
if (i == 4) //here 2 is number of images i want to display in the slide show
{ i = 0; }
}
setInterval("fun()", 2000);
</script>
<asp:Image ID="img1" runat="server" ClientIDMode="Static" />
But be warned that you have to do all the work to assure that the ids are not duplicated if you use this last method.
It does not worki because probably the ID of the control you are trying to get using getElementById is different when it get rendered on the page.
more info here
I would not use this approach anyway because you could have cross-browser issue.
I would use a JQuery plug-in instead
When you use masterpage, all aspxcontrols name change (when it get rendered)
if you wanna reach some controls, you have to use controlname.ClientID
Question: What is the best way to set focus to a web control in ASP .NET.
I can do it, but it's ugly. I have a web control wrapped in a web control hosted on a web page. So, if you do a view | source on the page the id is something like WrapperControl_Control_TextBox.
I've tried the "tried and true" Javascript methods of grabbing the element and setting it's focus: document.getElementByID( "WrapperControl_Control_TextBox" ).focus(); and it didn't work. I'm not sure why.
I know I could possibly do:
document.getElementById( "<%= TextBox.ClientID %>" ).focus(); too, I think. This won't work because of another totally separate error based on the fact you can't dynamically add controls to a header if there is a "<% %>" in the page. GAH.
In the "bottom-most" control, I've tried setting the focus (TextBox.Focus() in Page_Load) and that doesn't work either.
Anyway, the way that works is by simply taking the ControlsCollection of the Page, grabbing the control I need from that, getting it's collection, grabbing the next lower control and so forth.
I only have to do this seven times. So I have eight foreach loops.
Basically, my code is like this:
///////////////////////////////
// On the page
///////////////////////////////
ControlCollection controls = Controls;
foreach( Control control in controls)
{
if ( string.Equals( control.ID, "FormID", StringComparison.InvariantCultureIgnore ) )
{
ControlCollection nextControls = control.Controls;
foreach( Control nextControl in nextControls )
{
if ( string.Equals( nextControl.ID, "DivICareAboutInTheForm", StringComparison.InvariantCultureIgnor ) )
{
ControlCollection nextNextControls = nextControl.Controls;
//:
//:
//Yes, it's that bad and so forth.
//:
//:
}
}
}
}
You can use jQuery to do a search for IDs that end with your textbox name. This way you wont have to call the UniqueID server-side code. Just make sure not to have multiple controls that end with the same name
<script type="text/javascript">
$(document).ready(function() {
$('[id$=txtBox]').focus();
});
</script>
Or, you can use a Class name for the default text box.
<asp:Textbox ID="txtBox" runat="server" cCssClass="defaultTextbox" />
jquery:
$('.defaultTextbox').focus();
You can get around the "cannot add dynamic controls because a <%= %> block exists on the page" error by changing the block to use databinding syntax: <%# TextBox.ClientID %>, and manually calling Page.DataBind() in Page_Load.
If you really want to use the Page_Load method, then you could always call the SetFocus method on the Page object.
Page.SetFocus(myTextBox);
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 the following structure on a usercontrol that is loaded by a page (Parent UC):
<UpdatePanel>
<UpdatePanel>
.. In the codebehind, it loads a Child user control at runtime
</UpdatePanel>
</UpdatePanel>
The UC has OnPageLoad registers a script.
ScriptManager.RegisterStartupScript(this, typeof(Page), "Load_" + this.ClientID, base.GetRegisterScript(this.ClientID), true);
The JS function never gets executed on async postbacks. If i remove the UpdatePanels, it works as expected
EDIT: Used this.GetType() instead of typeof(Page) but no luck
EDIT Again:
Matt - I tried to replace the typeof(Page) with the UC name. Here's the updated line:
ScriptManager.RegisterStartupScript(this, typeof(TemplateAreaTypeOne), "Load_" + this.ClientID, "...JS function here,,", true);
To clarify, the Page loads the Parent UC that has these UpdatePanels. The ParentUC then loads the ChildUC and the ScriptManager.RegisterStartuScript is used in teh ChildUC
EDIT
The markup has:
<script type="text/javascript">
//<![CDATA[
; findControl('PageLoadedHiddenTxtBox').value ='Set';OnLoadBegin('ctl00_WorkSpaceContent_ctlUnion1_ctlUnion1Child','Edit');OnLoadEnd('ctl00_WorkSpaceContent_ctlUnion1_ctlUnion1Child','Edit');
document.getElementById('ctl00_WorkSpaceContent_informationSummary').dispose = function() {
Array.remove(Page_ValidationSummaries, document.getElementById('ctl00_WorkSpaceContent_informationSummary'));
}
//]]>
</script>
Note that the functions that are called are the OnLoadBegin and OnLoadEnd that have been added to the HTML
EDIT AGAIN
Got it to work using:
ScriptManager.RegisterStartupScript(this.Page, typeof(Page),....)
Not sure why it works when I use the reference to the Page.
Will this work if I have multiple controls on the Page?
Why does it work when I use a reference to the page?
your registerstartupscript needs to target the control NOT the page dont use typeof(Page)
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