I have a master page with RadWindowManager in it.
In a child page, there are multiple buttons. On clicking each a radalert message pops up, but it shows in center of page and I would like to show it to immediate right of the button.
How would I make sure that radalert popup shows to immediate right of the clicked button? Bottom of radalert should align with bottom of clicked button.
Use JavaScript to move the dialog when you open it. Something like:
<asp:Button ID="Button1" Text="open RA" OnClientClick="openRA(this); return false;" runat="server" />
<script type="text/javascript">
function openRA(btn)
{
var oAlert = radalert("message");
var btnPos = $telerik.getBounds(btn);
oAlert.moveTo(btnPos.x + btnPos.width, btnPos.y - oAlert.getWindowBounds().height);
}
</script>
Related
I have a web form in asp.net coding with vb and it has multiple textboxes and buttons. If one textbox is empty, I would like one button to be clicked if the enter key is pressed, whereas if a different textbox is empty, I would like the other button to be clicked, when the enter key is pressed. I know I can change the default button in the form section, but I don't know how I could go about changing the default button depending on which textbox is empty? I assume I have to do this in javascript, which I have little understanding of so any help would be much appreciated.
Can I do something like this to change the default button?
If txtMembranePressure.Text = "" Then
Dim sb As New System.Text.StringBuilder()
sb.Append("<form id='form1' runat='server'" + "defaultbutton='btnMembranePressure'")
Else
Dim sb As New System.Text.StringBuilder()
sb.Append("<form id='form1' runat='server'" + "defaultbutton='btnDiamondPressure'")
End If
Could I put the default button directly on the form like this?
Would it not be better to have one click routine - all buttons can freely point to that one click routine - but inside of that click routine, you can freely check the value(s) of the given text boxes, and then run the desired code. This seems a whole lot less complex then trying to change what actual button supposed to be clicked. So, have all buttons run the SAME routine, but that routine can simple check which text boxes have values in them.
Then based on what text boxes have (or have not) a value, you simple run or call the code you want based on this information.
Keep in mind, that in most cases, hitting enter key will trigger the button that FOLLOWS the control in the markup after that text box.
Edit: correction: the FIRST button on the page will trigger.
However, you can TURN OFF this behavour by setting in the button markup usesubmitBehaviour=False
<asp:TextBox ID="txtSearchOC" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
UseSubmitBehavior="False" />
In fact, if you drop a text box on a form, then say a gridview with 10 rows, and each row of the gridviewe has button with click event? Hitting enter key in above will in fact trigger the FIRST row button click of the gridview!!!
So, often by correct placement of buttons, say like a search text box, and a button after to click "search data", then in fact, if they hit enter key, the button that follows that text box will trigger anyway. (as noted, first button on markup fires - not any button, or not actually the one that follows the textbox).
So, in some cases, the correct order of a text box, and the button that follows can be put to good use here. But, often it can surprise you. You drop in a text box, and a form has 10 buttons that follow, ONE of them WILL trigger when you hit enter key - and this can often be harder to PREVENT this from occurring.
So, keep the above in mind. but, given that you want code to run based on values in text boxes (or lack of values), then I would have ONE routine that the button clicks ALL use, and the code behind can then check the text box values, and take the desired course of action and run your desired code based on this information.
There are 3 steps to do.
You need to know, when a Textbox is changed. For that you can use the TexboxChanged Event.
You need to know, if the Textbox is empty.
You need to know, how to change the default button.
Every Textbox need a TextboxChanged Event. And in every event you should check, if the Textbox is empty. If it is empty, you should set it to default.
In Pseudocode:
if Textbox.Text = "" then
set Textbox to default
For further information on the Textbox Change EVent, search in a searchengine (for example duckduckgo.com) for "textbox changed event":
https://meeraacademy.com/textbox-autopostback-and-textchanged-event-asp-net/
To change the default button, please consider following Answers at Stackoverflow:
How to set the default button for a TextBox in ASP.Net?
I have provided you with sufficient detail and example code below to re-engineer this yourself, even if I have not quite understood your requirement. I do agree with the comments above, this is probably not the best approach. You are better off checking server-side whether text boxes are populated or not, and then following a different path in your code.
JQuery lets you find elements by class name (CssClass="" in .NET, class="" on a normal HTML element)
$(".ClassName") makes JQuery find all elements with that class name on the page.
$("#Id") makes JQuery find all elements with that Id on the page.
data-whatYouWantToStore is a convenient way of storing data against an element, that you can then read with Javascript / JQuery. Just keep it all lower case to avoid upsetting it.
$(element).data("the name after the data- bit") will get you the value.
The only bits you need to change to make it run are on the text-boxes:
data-targetbuttonemptyclass="js-button-1" data-targetbuttonnotemptyclass="js-button-2"
Set the class of the button you want it to click when enter is pressed, if the textbox is empty in the data-targetbuttonemptyclass property, and the button to click if text is present in the data-targetbuttonnotemptyclass property. Text boxes must have the class js-click-if-not-empty set on them if you want them to be handled by the "empty / not empty" JavasScript.
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Buttons.aspx.vb" Inherits="Scrap.Buttons" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!--Add reference to Jquery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--Your Javascript -->
<script type="text/javascript">
$(document).ready(function () {
// find all the buttons we want to set this behaviour on
$(".js-click-if-not-empty").each(function () {
// add a keypress event hander to each button
$(this).on("keypress", function () {
// get the key that was pressed
var keycode = (event.keyCode ? event.keyCode : event.which);
// is it the ENTER key?
if (keycode === 13) {
// prevent anything else that was going to happen because enter was pressed.
event.preventDefault();
// is the textbox empty?
if ($(this).val() === "") {
// yes - get the css class of the button to click when the textbox is empty
var button = $("." + $(this).data("targetbuttonemptyclass"))[0];
// just for debugging to show which button is about to be clicked
alert("going to click empty button: " + button.id);
// click the button
button.click();
} else {
// no - get the css class of the button to click when the textbox is not empty
var button = $("." + $(this).data("targetbuttonnotemptyclass"))[0];
// just for debugging to show which button is about to be clicked
alert("going to click not empty button: " + button.id);
// click the button
button.click();
}
};
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="tb_TextBox1" runat="server" CssClass="js-click-if-not-empty" data-targetbuttonemptyclass="js-button-1" data-targetbuttonnotemptyclass="js-button-2"></asp:TextBox>
<asp:TextBox ID="tb_TextBox2" runat="server" CssClass="js-click-if-not-empty" data-targetbuttonemptyclass="js-button-1" data-targetbuttonnotemptyclass="js-button-2"></asp:TextBox>
<asp:TextBox ID="tb_TextBox3" runat="server" CssClass="js-click-if-not-empty" data-targetbuttonemptyclass="js-button-1" data-targetbuttonnotemptyclass="js-button-2"></asp:TextBox>
<asp:Button ID="btn_ClickIfEmpty" runat="server" CssClass="js-button-1" Text="Click If Empty" />
<asp:Button ID="btn_ClickIfNotEmpty" runat="server" CssClass="js-button-2" Text="Click If Not Empty" />
</div>
</form>
</body>
</html>
In my Web application, I am dynamically adding a Button named as "Click Me !". At Stage 1 , when the Button is clicked, it has to show a alert box . At Stage 2, it has to show a Popup.
I use ModalPopupExtender to achieve popup. The Problem is, the popup is just blinked once, instead of Displaying it constantly. Given below my codes...can any one help me to get rid of this ?
Page_OnLoad():
**************
Button Button1=new Button();
Button1.Text="Click Me !";
Button1.ID="LogBut";
Controls.Add(LogBut);
Stage 1:
JavaScript:
***********
function alert()
{
alert("Stage 1");
}
Code behind:
************
LogBut.Attributes.Add("OnClick", "alert();");
Stage 2:
JavaScript:
***********
var Modalpopup='<%=modalPermission.ClientID %>';
function Popup()
{
$find(Modalpopup).show();
}
Design:
*******
<Ajax:ModalPopupExtender ID="modalPermission" runat="server" TargetControlID="Infield"
PopupControlID="divPermission"></Ajax:ModalPopupExtender>
<asp:HiddenField ID="Infield" runat="server" />
Code Behind:
************
LogBut.Attributes.Add("OnClick", "Popup();");
Note: I am using the hidden field control's Id as ModaPopupExtender's TargetControlId. Am adding this button inside calendar control.
Screenshots of the calendar:
Modal popups do not remember that it's supposed to show after a popup. If you are attaching a popup show to a button, you have to disable the postback to the server. Most likely your problem is the button shows the modal, but also posts back, and on postback, the modal doesn't remember it's supposed to show. You can kill the postback by doing the following; set
UseSubmitBehavior='false'
on the server-side button, and then in the Popup function, do:
function Popup(e) {
// stop button event propagation, which causes postback
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
// show modal
}
And that should prevent a button postback to the server.
EDIT: Your function said Popup, but your javascript is rendering showpopup() as the function call. If that function doesn't exist (and spelled the exact same), it will never stop the postback.
I have dual listboxs (followed by http://www.meadmiracle.com/dlb/DLBDocumentation.aspx) which work well. Now I need a ModalPopupExtender page to confirm user's selected. when user click button submit the ModalPopupExtender will show.
<button id="btnSubmit" title="Submit" onclick="confirm(); return false;"> Submit </button>
<script language="javascript" type="text/javascript">
function confirm() {
$find('mpeOutConfirm').show();
};
</script>
So far, everything is fine. But if I assign value to that confirmation page, like
function confirm() {
$find('mpeOutConfirm').show();
document.getElementsByID('cphContent_lblOutType').innerHTML = "test";
};
it will cause postback and Popup page will be gone and all selected items in listbox2 will disappeared.
my bad. should be getElementsById, not getElementsByID; fixed
Hi,
I want to hide first calendar when a second is open or when the calendar field lost focus. The issue is that if the user doesn't select any date from calendar and go to other control in page the calendar doesn't hide, only when user select any date from calendar the popup hides. This capture show the problem.
I see that in ajaxtoolkit calendarextender sample page the calendar control works fine, when out from one to another calendar prior popup hides but I don't find the sample code of this page. I think this page manage in javascript the event when the focus is lost, but I had found any sample code or project ...
Thank you in advance!
As Yuri mentions, using an ImageButton fixes this... or...
You need to handle the onmouseout event. You can do it this way:
http://forums.asp.net/p/1182269/4708411.aspx/1?Re+Calendarextender+and+Lose+Focus+Or+Mouse+Out
Or you could add some javascript (via jQuery) and inject an onmouseout event:
Adding extra functions to an image's onmouseout attribute
This is also shown in the forums.asp.net link, but basically, on the onmouseout event you can just set the visibility of the calendar extender to hidden or none.
As an option in addition to solutions provided by dash, you may use following decision if you don't want to use ImageButton instead of Image for PopupButton: set OnClientShowing properties on extenders to "hideAnotherOpenedPoups" and add onto a page script below.
// Array of BehaviorIds of each extender for those you use Image as PopupButton
var behaviorIds = ["CalendarExtender1", "CalendarExtender2"];
function hideAnotherOpenedPoups(sender) {
for (var index = 0; index < behaviorIds.length; index++) {
if (behaviorIds[index] !== sender.get_id()) {
var extender = $find(behaviorIds[index]);
if (extender.get_isOpen()) {
extender.hide.call(extender);
}
}
}
}
Try the following line of code to show the calendar on both Textbox and Image click.
<asp:TextBox runat="server" onclick="showCalendar();" onfocusout="showCalendar();" ID="txtDate" />
<asp:ImageButton runat="Server" ID="imgPopup" AlternateText="Click to show calendar" />
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" CssClass="MyCalendar" Format="MMMM d, yyyy" PopupButtonID="imgPopup" />
and add a javascript function like this
<script type="text/javascript">
function showCalendar() {
$( "#<%=imgPopup.ClientID %>" ).trigger( "click" ); //I've used .ClientID here just in case your page is inherited from a Master page
}
</script>
That should display the calendar when you click on the Textbox, and the calendar will be hidden once you click anywhere else on the form
Work on ASP.NET Visual Studio 2008 C#. I have a page. From this page I need to call a page on popup. On the popup page selected value will be set on the parent page text control.
One parent page
One child page.
Call parent to child as popup.
On popup window contain a grid.
On popup grid have command select,click on select close popup and selected value will set on parent page text control.
I have done steps 1,2,3 and 4. But I need to complete step no 5.
On parent page:
<script type="text/javascript">
function f1() {
window.open("child.aspx");
}
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><input type="button" onclick="f1();" value="pop up" />
On child page:
<script type="text/javascript">
function f2() {
opener.document.getElementById("TextBox1").value = "hello world";
}
</script>
<input type="button" value="return hello world" onclick="f2();" />
Also you can pass ID of control which you want fill from child page as GET parameter:
window.open("child.aspx?controlID=<%=TextBox1.ClientID %>");