*ASP.NET VB.NET 2010 ****
Hi,
KIndly help me with this, I have a list of Hyperlink. If I press radio button I want my cursor to focus on one of my hyperlink
I tried to used this but no luck
Dim sScript As String = "document.getElementById('" & hlnkQNo.ID & "').focus();"
'Page.RegisterStartupScript("controlFocus", sScript)
I also tried this but the same, the cursor was not focus on my link
ScriptManager1.SetFocus(hlnkQNo.ID).
Here is my example of what I want
Hyperlink1
Hyperlink2
Hyperlink3
Hyperlink3
Hyperlink4
if the use click the radio button i want to focus on Hyperlink4
Your question is difficult to understand, but generally if you want to focus an element you need to set an event handler on the radio button so that when it's clicked another element receives focus.
document.getElementById("myRadioButton").click = function(){
document.getElementById("Hyperlink1").focus();
};
If your code is being generated server side with VB.NET, then you're going to have to figure out exactly how the snippet above should be rendered.
just to provide an alternative, maybe you might want to consider using jquery to do those kind of things.
and as long as you put runat="server" on your control, you can still retrieve all the value or manipulate them on the server side.
link 1
link 2
link 3
link 4
<br />
<input type="radio" name="radio4" id="radio4" value="4" /> 4<br />
$(document).ready(function(){
$("#radio4").click(function(){
$("a:eq(3)").css('color','red');
$("a:eq(3)").focus();
});
});
Related
Hi everybody i have the next problem. I have to set a button as default when i press Enter. I can use DefaultButton in the Form because now all my pages inherits from Master Page and i have a Content from the Master Page and this isn't work. Somebody could give me any alternative to solve this please. Thanks
According to Enter Key - Default Submit Button:
ASP.NET 2.0 introduces a wonderful work around for this. By simply
specifying the "defaultbutton" property to the ID of the ,
whose event you want to fire, your job is done.
The defaultbutton property can be specified at the Form level in the
form tag as well as at panel level in the definition tag.
The form level setting is overridden when specified at the panel
level, for those controls that are inside the panel.
Also, the Event Handler for the specified button, fires thereby
simulating a true submit button functionality.
Like this
<form id="form1" runat="server" defaultbutton="Button1">
<div>
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
</div>
Or you can achieve this by
Page.Form.DefaultButton = crtlLoginUserLogin.FindControl("LoginButton").UniqueID
or just
Page.Form.DefaultButton = LoginButton.UniqueID
This will work.
One way is through to recursively search through all your child pages controls and find the first button, get the id and set the default button of your form.
Although I have never tried this, I dont think its a very good idea as it is slow and error prone.
An alternative may be to do it through javascript/jquery, see this answer:
Submit form with Enter key without submit button?
I was just curious as to how the textbox + button search actually performs the search to fill up my gridviews, because I couldn't see anywhere that causes the databounds or anything. Is it a post-back thing? How does it work?! o.o
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<input id="Submit1" type="submit" value="Search" />
Thanks heaps :)
There is no magic binding between a textbox called "searchbox" and a "submit" button in asp.net. The work has to be done somewhere and it's probably just hidden away in some part of the project that you cannot easily find.
In this case, it seems like a normal postback is occurring and some logic in the code behind is interrogating the "SearchBox"'s .Text property.
Just do a project wide search on SearchBox.Text, you should be able to find where the logic is.
Using jQuery I want to be able to click an element which will also checks it's related radio button. I had this working fine until we had to add runat="server" to the radio buttons.
When I apply this it prevents my jQuery function from working and I cant figure out how to get round it, heres a simplified version of the code:
HTML
<input type="radio" runat="server" id="sector1Radio" name="SectorGroup" title="Sector1" />
jQuery
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
I've found out that when its converted to a .net control instead of checked="checked" (as it would be usually) it is just Checked, so I changed that but on inspecting the DOM in multiple browsers, none of my radio buttons are being checked :-(
Are there any other ways I can use jQuery to check a radio button that has runat="server"?
Cheers!
I think that Your problem is that the id of the input is no longer sector1Radio but rather ctl00_sector1Radio or something similar. This happens if Your input control is inside e.g. a ContentPlaceHolder control (when using master pages).
Can You check the generated HTML code (in the browser) to verify if this is the case? What is the id of the input control?
If this is the case, You need to generate Your js jQuery code
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
from codebehind so that SomeThingElse is replaced with the ClientID of the control.
.is(':checked') works on ASP.NET radiobuttons and checkboxes
$('#SomethingElse').click(function() {
$('input[title=Sector1]').is(':checked');
});
try using
$('input[title=Sector1]').attr('checked',true);
and
$('input[title=Sector1]').attr('checked',false);
or maybe
$('#SomethingElse').click(function () {
$('input[title=Sector1]').attr('checked',!$('input[title=Sector1]').attr('checked'));
});
As suggested by others, ASP.net will not generate the html with the same ID you specified.
Quick solutions:
You can keep using the id but asks jquery to check the end of the id instead, example:
$("input[id$='sector1Radio']").is(":checked");
Or check against the title and name as Nico suggested
Use the class element which is not effected by ASP.net, example
<input type="radio" runat="server" id="sector1Radio" class="sector1Radio" name="SectorGroup" title="Sector1" />
$("input.sector1Radio").is(":checked");
Best thing is to view the generated html code and see what id is giving you, then you can use the appropriate jquery selector, because the generated id could have different extensions depends whether you use master pages, etc.
If you are using a MasterPage or are creating the controls dynamically then it is probable that the control ID's are being renamed #SomethingElse becomes #MainContent_SomethingElse.
The easiest way to check this is to use the WebDeveloper plugin for Firefox or Chrome.
Go to Information -> Display Element Information and then select the object in question. It will give you it's ID, class, as well as ancestor and children information.
Check to see if the ID is being changed dynamically by the .NET.
If that's the case:
To prevent this, in the server side code you can use the following attribute to create static ID's
SomethingElse.ClientIDMode = ClientIDMode.Static;
You can then reference in you jQuery
$('#SomethingElse').click(function() {
if ($('input[title=Sector1]').attr('checked')) {
//execute event
});
I think what happens is that in ASP NET Checkboxes and Radio Buttons generates an "input" and a "span" after the input. So you need to select the input only.
You can try:
$('.classname input[type=checkbox]').each(function() {
this.checked = true;
});
Two things here: finding the control and executing the check. In ASP.NET, your control's actual ID and name will end up getting changed based on the runat="server" containers in which it appears, even if those containers have no Ids.
Rendered ASP.NET controls always end with the same name as you started with, so a tag like:
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
might end up being rendered as
<input type="radio" runat="server" id="ctl0$ctl0$sector1Radio" name="ctl0_ctl0_SectorGroup" title="Sector1" />
You can find this element, even after it is rendered if you use the "contains" selection syntax in JQuery. So to find this element, once rendered, you could use:
$("input[type='radio'][id*='$sector1Radio']")
This syntax will find any radio button whose id contains "$sector1Radio"
Once you have the element, you can check or uncheck it using the following code, which you'd call from the click event of your other element.
// check the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', true);
// uncheck the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', false);
One last thing... if you just want a block of text to click the button when pressed (wrap it in an tag and set the AssociatedControlId property to the control name of your radio button, like this...
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
<asp:label runat="server" id="lblsector1Radio" associatedControlID="sector1Radio">clicking here clicks and unclicks the radio button</asp:label>
I had the same problem. To use the jQuery UI to make your radiobuttons nice one has to write:
<div id="radio">
<input type="radio" id="radio1" runat="server" />
<label for="radio1">The label of the radio button</label>
...
</div>
<script type="text/javascript">
$('#radio').buttonset();
</script>
The id of the input tag must be correctly referenced by the label's for attribute. If the webpage is inside a master page then the id of the input tag will be modified to something like ctl00_Something_radio1, and suddenly the label's for attribute no longer references the input tag. Beware of this in ASP.NET!
Here's an example of a regular standard HTML input for my radiobuttonlist:
<label><input type="radio" name="rbRSelectionGroup" checked value="0" />None</label>
<asp:Repeater ID="rptRsOptions" runat="server">
<ItemTemplate>
<div>
<label><input type="radio" name="rbRSelectionGroup" value='<%# ((RItem)Container.DataItem).Id %>' /><%# ((RItem)Container.DataItem).Name %></label>
</div>
</ItemTemplate>
</asp:Repeater>
I removed some stuff for this thread, one being I put an r for some name that I do not want to expose here so just an fyi.
Now, I would assume that this would or should happen:
Page loads the first time, the None radio button is checked / defaulted
I go and select a different radiobutton in this radiobutton list
I do an F5 refresh in my browser
The None radio button is pre-selected again after it has come back from the refresh
but #4 is not happening. It's retaining the radiobutton that I selected in #2 and I don't know why. I mean in regular HTML it's stateless. So what could be holding this value? I want this to act like a normal input button.
I know the question of "why not use an ASP.NET control" will come up. Well there are 2 reasons:
The stupid radiobuttonlist bug that everyone knows about
I just want to brush up more on standard input tags
We are not moving to MVC so this is as close as I'll get and it's ok, because the rest of the team is on par with having mixed ASP.NET controls with standard HTML controls in our pages
Anyway my main question here is I'm surprised that it's retaining the change in selection after postback.
This is a Firefox behavior.
Firefox will persist form values when you reload a webpage.
For example, if you go to StackOverflow's Ask Question page, enter some text, and reload the page, Firefox will remember the text, but IE will not.
If you re-request the page (as opposed to refreshing it) by pressing Enter in the address bar, the form will not be persisted.
Problem
I am using jQuery UI dialog to show a dialog box with some ASP.NET textboxes and a button in it. However as jQuery moves the div for the dialog box outside the form I need to re-move it back to the form myself (see this for details why), so that ASP.NET still works. This moving is causing a problem, where the field does not get focus if called.
If you look at the sample below the line labeled Line B should set the focus, however the line labeled line A breaks that. If I comment out line A it works. No matter where I move line B to (before dialog, line A etc...) it still fails to set focus.
By setting focus I mean the cursor is in the text box flashing ready to type.
Question how do I set the focus in this scenario?
Samples
HTML body sample
<body>
<form id="form1" runat="server">
<div id="popup">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
jQuery sample
$(document).ready(function() {
var dlg = $("#popup").dialog();
/*Line A*/ dlg.parent().appendTo(jQuery("form:first"));
/*Line B*/ $("#TextBox2").focus();
});
Try using setTimeout("$('#TextBox2').focus();",100);, for dialog and other methods of the jQuery UI sometimes it take few seconds to actually perform the tasks we assign by code.
Hope this helps. This workaround has helped in many of my applications.
I think the problem is that you are moving the popup and calling focus before the dialog is fully created.
Try using the dialog's open event instead:
$(document).ready(function() {
$("#popup").dialog({
open: function(){
$(this).parent().appendTo(jQuery("form:first"));
$("#TextBox2").focus();
}
});
});
It works in FF but not in IE7. I have figured out 2 work arounds. If you don't reference the textbox by name but by position, or for some reason if you set the focus twice.
The first:
$("input:text:second").focus();
The second:
$("#TextBox2").focus().focus();
you could also class the text box, as asp.net mangles control ids to avoid naming conflicts.
$(".mytextbox").focus();
as an example.. this of course defeats the purpose of semantics but semantics dont mix well with webforms.