MsgBox- How to set focus on Ok button of Msgbox? - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » MsgBox- How to set focus on Ok button of Msgbox?

MsgBox- How to set focus on Ok button of Msgbox?

Options

Previous Topic · Next Topic

Vishakha

Posted: Saturday, April 3, 2010 3:50:11 AM

Rank: Member
Groups: Member

Joined: 2/5/2010
Posts: 24

Hi,

I want to set focus on Accept button of Msgbox after showing the Msgbox.
I have tried with focus() method
eo_GetObject('W_Alert').focus();
but focus is not getting set on Accept button.
Please help

Thanks & regards,
Vishakha Vaidya

Vishakha

Posted: Saturday, April 3, 2010 5:31:39 AM

Rank: Member
Groups: Member

Joined: 2/5/2010
Posts: 24

Hi,

I have tried to convert Dilaog object to behave like msgbox and it is working perfeclty fine. i.e It is not allowing me to change the form data(Modal) as well focus is automatically getting set on Ok button.
But if I replace this with new Msgbox Control with BackShadeColor="White" BackShadeOpacity="50" I can see it as modal msgbox but it is actully not. I can edit the forms data even if Msgbox is visible. Also focus is not getting set on OK button by default.
Please help.

Thanks & Regards,
Vishakha Vaidya

Vishakha

Posted: Saturday, April 3, 2010 6:29:07 AM

Rank: Member
Groups: Member

Joined: 2/5/2010
Posts: 24

Here is the sample page . If you click On ShowDialog button we can not type into the text box.
But if we click on ShowMsgBox Button we can type into the textbox as focus is still there.

Please help

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="MesggageBoxTest._Default" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!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 id="Head1" runat="server">
<title></title>

<script type='text/javascript'>

function Button5_Click() {
document.getElementById("test1").focus();
document.getElementById("label1").innerHTML = "";
eo_GetObject('Dialog3').show(true);
return false;
}

function Button7_Click() {

document.getElementById("test1").focus();
eo_MsgBox(
"MsgBox1", //ID of the MsgBox control
"Hello", //Message box title
"This is a test message.", //Message text
null, //Icon
[
{
Text: "OK", //OK button
ClientSideHandler: "btn_ok" //Client side event handler
},

{
Text: "Cancel", //Cancel button
ClientSideHandler: "btn_cancle" //Client side event handler
}
]);
//eo_GetObject('MsgBox1').show(true);

return false;
}

function btn_ok() {

alert("Ok");
}
function btn_cancle() {

alert("btn_cancle");
}

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:Button ID="Button5" runat="server" OnClientClick="return Button5_Click()" Text="ShowDialogBox" />
<asp:Button ID="Button7" runat="server" Text="ShowMessageBox" OnClientClick="return Button7_Click()" />
</div>
<div>
<asp:Label runat="server" ID="label1"></asp:Label>
<asp:TextBox runat="server" ID="test1"></asp:TextBox>
</div>
<eo:MsgBox runat="server" ID="MsgBox1" HeaderHtml="PageName" MinWidth="100" Width="250px"
HeaderHtmlFormat='<div style="padding-top:4px">{0}</div>' Height="100px" ControlSkinID="None"
MinHeight="100" HeaderImageHeight="27" AllowResize="True" CloseButtonUrl="00020440"
ShadowColor="Gray" ShadowDepth="10" MsgBoxButtonType="PushButton" CssClass="PageLeftBorder PageRightBorder PageBottomBorder PageTopBorder"
IsModal="true">
<FooterStyleActive CssText="background-color:#F9FBED; padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma">
</FooterStyleActive>
<HeaderStyleActive CssText="background-color:#D3E5A7;color:#444444;font-family:'trebuchet ms';font-size:10pt;font-weight:bold;padding-bottom:7px;padding-left:8px;padding-right:0px;padding-top:0px;">
</HeaderStyleActive>
<ContentStyleActive CssText="background-color:#F9FBED;padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;text-align:center;">
</ContentStyleActive>
</eo:MsgBox>
<eo:Dialog runat="server" ID="Dialog3" ControlSkinID="None" Width="250px" Height="80px"
HeaderHtml="Header for WebControl Alert" BorderStyle="Solid" ContentHtml="Button Clicked for EO web Alert"
BorderWidth="1px" ShadowColor="LightGray" BorderColor="#335C88" ShadowDepth="3"
AcceptButton="btnOKMessage" ClientSideOnAccept="OnDialogAccept" CancelButton="btnCancel"
ClientSideOnCancel="OnDialogCancel" BackShadeColor="Gray">
<HeaderStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 12px; background-image: url(00070104); padding-bottom: 3px; padding-top: 3px; font-family:Arial;font-weight:bold;">
</HeaderStyleActive>
<ContentStyleActive CssText="border-top:#335c88 1px solid;background-color:#e5f1fd;font-family:Arial;font-size:1;">
</ContentStyleActive>
<FooterStyleActive CssText="background-color: #e5f1fd" />
<FooterTemplate>
<div style="text-align: center">
<asp:Button ID="btnOKMessage" BackColor="DarkBlue" runat="server" ForeColor="White"
Text="OK"></asp:Button> 
<asp:Button ID="btnCancel" BackColor="DarkBlue" runat="server" ForeColor="White"
Text="Cancel"></asp:Button>
</div>
</FooterTemplate>
</eo:Dialog>
</div>
</form>
</body>
</html>

eo_support

Posted: Sunday, April 4, 2010 1:32:03 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

I believe you can always manually set the focus to any elements inside the dialog by calling focus on that element directly, for example, by calling focus() on the OK button directly. The key is the dialog/msgbox itself is NOT a DOM element. So you can not call focus() on the object you get back from eo_GetObject.

Thanks!

Vishakha

Posted: Monday, April 5, 2010 5:40:15 AM

Rank: Member
Groups: Member

Joined: 2/5/2010
Posts: 24

Hi,

Thanks for your prompt reply.
In this case I can not find the Ok button directly as ID for OK button is not specified in the code(button is created by EO web only) so can not set focus() on OK button directly.
Please let me know if I am doing wrong interpretation of your solution.

Also my other question was Msgbox is not working as modal as it was expected.
I can edit or enter value in textbox if focus is already set on that textbox before calling
eo_MsgBox() function.
I have already given test code for this.
I want to disable the backgrounf form completely till Msgbox is not clicked

Thanks & Regards,
Vishakha Vaidya

eo_support

Posted: Monday, April 5, 2010 2:37:32 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

Ah. I see. Please use the following code to focus the OK button:

Code: JavaScript

Copy

//function that focus the first input element of
//a given root element
function focusFirstInputElement(root)
{
    if (!root)
        return;
		
    if (root.tagName && 
        (root.tagName.toLowerCase() == "input"))
    {
        root.focus();
        return;
    }
		
    for (var i = 0; i < root.childNodes.length; i++)
    {
        var child = root.childNodes[i];
        if (focusFirstInputElement(child))
            return;
    }
}

Use the following code to focus the first button

Code: JavaScript

Copy

//show the mesage box
eo_MsgBox(......);

//Focus the first input element in the msgbox
var msgBox = eo_GetObject("");
var rootElement = msgBox.getRootElement();
focusFirstInputElement(rootElement);

Hope this helps.

Thanks!

Vishakha

Posted: Tuesday, April 6, 2010 2:07:13 AM

Rank: Member
Groups: Member

Joined: 2/5/2010
Posts: 24

Hi,

Thanks a lot for the solution. Working perfectly fine.

Thanks & Regards,
Vishakha Vaidya

eo_support

Posted: Tuesday, April 6, 2010 7:35:29 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Thanks for the update, Glad that it works for you!

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.