ASP.NET WebForms - Keeping contextual focus on Button controls - asp.net

Consider the following:
<form runat="server">
<div>
<asp:TextBox runat="server" ID="tb1" />
<asp:Button runat="server" ID="b1" OnClick="b1_Click" />
</div>
<div>
<asp:TextBox runat="server" ID="tb2" />
<asp:Button runat="server" ID="b2" OnClick="b2_Click" />
</div>
<div>
<asp:TextBox runat="server" ID="tb3" />
<asp:Button runat="server" ID="b3" OnClick="b3_Click" />
</div>
</form>
Each TextBox has an associated Button. I want to be able to switch the focus on each of these Button controls, so that when I place my cursor in the 2nd textbox (tb2) and press Enter, the associated button (b2) gets clicked and the associated OnClick event gets fired.
I've got a few ideas myself, but I'd like you guys' feedback/lessons-learned before I start potentially wasting time on implementing a broken solution.
NOTE:
Using the HTML fieldset element is not an option--Some of the interfaces are very complex.
There can be multiple inputs associated with one button.

You could trap the keydown event on the Textbox and then fire the button's callback javascript if it's the enter key. You can get the callback reference using ClientScriptManager.GetPostBackEventReference
Alternatively you could wrap every textbox in it's own Panel, which exposes a DefaultButton property.

Well you could do a nice simple route using jQuery if you are using it.
Simply doing the following might work nicely:
<script language="javascript" type="text/javascript">
jQuery(function(){
jQuery('input').keydown(function(e){
if (e.keyCode == 13) {
jQuery(this).next().trigger('click');
return false;
}
});
});
</script>
And then code side you would have the relevant event handler triggered, or just simply see which button was clicked by querying the sender object id

Related

Bootstrap tooltip color changed when inside the updatePanel

I am using bootstrap tooltip that has black background and white letters on it. The entire tooltip and radiobutton is inside the update panel. when I click on the radio button and postback occurs, tool tip looses the black background and becomes white. I am not sure what am I doing wrong. I have several controls inside the update panel so I dont want to use seperate update panel for each control. Below is my code:
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<button class="btn btn-default" data-toggle="tooltip" data-placement="right" title="A Multi-Titled document is written in such a way that it performs multiple functions simultaneously. (e.g., Deed of Trust and Assignment of Rents; Substitution of Trustee and Reconveyance) ">
<img src="../Images/InfoOrange.png" width="26" />
</button>
<asp:RadioButton ID="rdbtest1" runat="server" Text="Test1" OnCheckedChanged="test100" AutoPostBack="true" />
<asp:RadioButton ID="rdbTest2" runat="server" Text="test2" OnCheckedChanged="test100" AutoPostBack="true" />
<asp:TextBox ID="txtTest1" runat="server" Visible="false"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
below is the image of the tooltip and radio button before postback:
any help will be highly apprecaited.
After each update on UpdatePanel you need to initialize again your JavaScript.
UpdatePanel gives the pageLoad() function that is called on each update - so you can use this for init, and re-init your javascript. So just change your code to this.
function pageLoad()
{
$('[data-toggle="tooltip"]').tooltip();
}

Server Control Auto Postback with form has _blank attribute

My case is I have an asp.net page has a form
<form id="form1" runat="server" target="_blank">
and a button redirect to another page and this page will open in a new window because of the target attribute of the form .
<asp:Button ID="button1" runat="server" PostBackUrl="~/kindofpage.aspx" Text="Generate" />
and I have a dropdownlist has auto postback = true to post the past to fill another dropdownlist by selected data .
<asp:dropdownliast id="Make" name="Make" runat="server" autopostback="true"></asp:dropdownlist>
the question is : why when I select item from the auto postbacked dropdown an blank page opened ?
I need a way to post the page by the dropdownlist without openning a blank page ..
Thank you,
For lack of a better idea, you could just remove the target="_blank" attribute from your markup, and when your button is clicked, modify the form tag with JavaScript and set the attribute.
You can set the OnClientClick property and run JavaScript when it's clicked. For example:
<asp:Button ID="button1" OnClientClick="document.getElementById('form1').setAttribute('target', '_blank')" runat="server" PostBackUrl="~/kindofpage.aspx" Text="Generate" />
You could always just adjust your buttonpress code to open a new window such as this:
<asp:Button ID="myBtn" runat="server" Text="Click me"
onclick="myBtn_Click" OnClientClick="window.open('kindofpage.aspx', 'kindofpage');" />
then remove the:
target="_blank"
From the form tag.
I struggled with a similar situation but solved it in the following way.
As mentioned in this answer, you can use the OnClientClick property to set the target to "_blank". E.g.
<asp:Button ID="button1" OnClick="codebehind_method" OnClientClick="document.forms[0].target = '_blank';" runat="server" Text="targets new window" />
Then, in the aspx page that my "codebehind_method" function redirects to, I reset the target of the opener form like so:
<script type="text/javascript">
function resetTarget() {
opener.document.forms[0].target = '';
}
</script>
<body onload="resetTarget()">
Now, if you go back to your opener form and use a control that does not have the "OnClientClick" property set, the AutoPostBack should occur in the same tab.
If you want to find your form by ID, replace "document.forms[0]" with:
document.getElementByID('yourFormName')
<form id="form1" runat="server">

how to set a default 'enter' on a certain button

There is a textbox on a ContentPage. When the user presses Enter in that textbox I am trying to fire a 'Submit' button on this ContentPage. I'd like to fire off that particular button's event.
Instead, there is a search textbox & button on the top of the page from a MasterPage, and this search button's event fires off.
How do I control to fire off this ContentPage's submit button, instead of the MasterPage's search button?
I am using Ektron CMS for my content management.
The easiest way is to put the fields and button inside of a Panel and set the default button to the button you want to be activated on enter.
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
if you need to do it from code, use
Me.Form.DefaultButton = Me.btn.UniqueID
Where btn is your button control.
You can use the DefaultButton property on either a server-side form control or Panel control. In your case, group the controls together in a Panel that should fire off the same button:
<asp:Panel ID="SearchBox" runat="server" DefaultButton="BtnSearch">
...
<asp:Button ID="BtnSearch" runat="server" Text="Search!" />
</asp:Panel>
....
<asp:Panel ID="UserPanel" runat="server" DefaultButton="BtnUserSubmit">
...
<asp:Button ID="BtnUserSubmit" runat="server" Text="Submit" />
</asp:Panel>
You can now use UseSubmitBehavior property to disable all the buttons you don't want to fire when hitting submit (check out the documentation for more info)
<asp:Button ID="BtnNotToFIre" runat="server" Text="Search" UseSubmitBehavior="false" />
Microsoft say:
<form id="Form1"
defaultbutton="SubmitButton"
defaultfocus="TextBox1"
runat="server">
enter link description here
$(document).ready(function(){
document.getElementById("text_box_id")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("button_id").click();
}
});
});

jQuery click disappears into some abyss

Here is my setup:
I have an asp.net button on a page --
<asp:Button id="btnSelectEmp" runat="server" Text="Select Employee" />
I have a .js file with the following jQuery click event --
$("input[id$='_btnSelectEmp']").click(function ($e) {
$("div[id$='_divEmpSearch']").css("display", "inline");
$e.preventDefault();
});
As you can see, clicking upon the button will set a div visible. Nothing special; not rocket science.
The div is wrapped with an asp.net update panel, and it contains an asp.net user control (.ascx)
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divEmpSearch" runat="server" style="display: none;">
<uc:EmpSearch ID="ucEmpSearch" runat="server" />
</div>
// And a bunch of other controls that are updated according to whatever the user selects in the user control above
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ucEmpSearch" />
</Triggers>
</asp:UpdatePanel>
The user control above is also wrapped in an asp.net update panel, because it has to communicate with the server. Among other controls like textboxes and such, the user control has two buttons upon it: 1) an asp.net button that does a postback and 2) an asp.net button that does an asynchronous postback.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /
<br />
asp:Button ID="btnContinue" runat="server" Text="Select" OnClick="btnContinue_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
<asp:PostBackTrigger ControlID="btnContinue" />
</Triggers>
</asp:UpdatePanel>
The button in the user control that does a postback is working great. I click it, a postback occurs and my div control is re-hidden. I can then click on the Select Employee button (the one that I supplied the code for at the very first of the question) and the jQuery click event is handled and the div will be reshown.
However, the button in the user control that does an asynchronous postback works also, but after it hides the div, if I then click on the Select Employee button the jQuery click event will not be handled.
What this tells me is that for some reason during an asynchronous postback to the page, something happens to the Select Employee button so that the jQuery click event no longer happens. Why?
Your button is replaced with a new one when your update panel comes back with new content, so this:
$("input[id$='_btnSelectEmp']").click(function ($e) {
Binds to the elements it finds at that time, instead you'll want .delegate() or .live() here to listen for click events from current and future elements, like this:
$("input[id$='_btnSelectEmp']").live("click", function ($e) {
$("div[id$='_divEmpSearch']").css("display", "inline");
$e.preventDefault();
});
Or a bit cheaper using .delegate():
$("#container").delegate("input[id$='_btnSelectEmp']", "click", function ($e) {
$("div[id$='_divEmpSearch']").css("display", "inline");
$e.preventDefault();
});
In this case #container should be a parent of the update panel, one that doesn't get replaced in the postback.
Use the live() function. live() delegates the click event to a parent element, so the element (in this case btnSelectEmp) doesn't need to exist at the time the event is bound.
$("#<%=btnSelectEmp.ClientID%>").live("click" function ($e) {
$("#<%=divEmpSearch.ClientID%>").css("display", "inline");
$e.preventDefault();
});
What is happening is the btnSelectEmp button is getting replaced by the asynchronous call and the new element has not been bound to an event handler.
Also, I've modified the jquery selector here to use the exact client id of the element. This will improve speed, plus I seem to recall certain selectors don't work with event delegation in certain versions of Jquery.
try live('click', function(){...}) instead of click(function(){...})
Wild guess : "_btnSelectEmp" is used more than once?

.net Accordion Causing me Problems

I had a bunch of controls that I displayed, hid, enabled and disabled based on actions in the web page. Everything worked until i put them into an accordian. Now I can't get the Javascript to be able to update their state. I have a small example
this is the Javascript
<script type="text/javascript">
var ctrl = document.getElementById('<%= btmRocp.ClientID %>');
function ShowPanel(control)
{
alert('<%= btmRocp.ClientID %>');
ctrl.disabled = true;
}
</script>
This is the Accordian
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="MyAccordion"
runat="Server"
SelectedIndex="0"
>
<Panes>
<cc1:AccordionPane ID="accordianPane0" runat=server>
<Header>Create New Report </Header>
<Content>a
<asp:Button ID="Button1" onmouseup="ShowPanel('') " runat="server" Text="Button" />
<asp:Button ID="btmRocp" runat="server" Text="Button" />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="accordianPane1" runat=server>
<Header>Create New Report </Header>
<Content>b</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
I would love to know what i am doing wrong here the Alert prints out the right ID.
If i do something where i pass the "this" Object to the function i can disable that button but I truly need it to disable, or hide like 10 objects
Does anyone have an idea?
Sample Code at http://www.riconllc.com/accordian.zip
What is the default state of the Accordion? collapsed? I have no idea how the Accordion works, but I'm suspecting that it is modifying the HTML DOM such that when the page first loads "btmRocp" is not actually present on the page itself, until it becomes "visible". That is, it might be injecting controls into and out of the page, based on the accordion status.
Your best bet in figuring out this behavior is to insert "debugger;" statements into your page at appropriate points, to inspect the live DOM at those points in time.
<textbox id="debugbox" onblur="this.value = eval(this.value);"></textbox>
Is a good way to monkey with script on your page as well.

Resources