[CLOSED] Call an AJAX function from the key map extension...

  1. #1

    [CLOSED] Call an AJAX function from the key map extension...

    How do I call my ajax function when the enter key is pressed on this page?

    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head id="Head2" runat="server">
    
    
    <title>The Magazine Manager</title> 
    
    
    <script runat="server">
    
    
    Protected Overloads Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
    
    
    
    
    End Sub
    
    
    <AjaxMethod()> _
    
    
    Protected Sub btnLogin_Click(ByVal sender As Object, ByVal e As AjaxEventArgs)
    
    
    'get the users credentials
    
    
    Dim username As String = Me.txtUsername.Text
    
    
    Dim password As String = Me.txtPassword.Text
    
    
    'do we want to persist the cookie after browser close
    
    
    Dim rememberme As Boolean = chkRememberMe.Checked
    
    
    'Dim cs As String = Helpers.Connection.ConnectionString(Request.ServerVariables("SERVER_NAME"))
    
    
    'Dim ds As DataSet = SqlHelper.ExecuteDataset(cs, "spLogin", username, password)
    
    
    'If ds.Tables(0).Rows.Count > 0 Then
    
    
    If True Then
    
    
    'we have an authenticated user
    
    
    
    
    
    WindowLogin.Hide()
    
    
    Else
    
    
    Me.WindowLogin.Title = "Login Unsuccessful - Please Try Again"
    
    
    End If
    
    
    End Sub
    
    
    </script>
    
    
    
    
    
    <script type="text/javascript">
    
    
    
    
    
    </script>
    
    
    </head>
    
    
    <body>
    
    
    <form id="form1" runat="server">
    
    
    <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
    
    
    
    
    
    
    
    
    
    
    
    <ext:Window 
    
    
    ID="WindowLogin" 
    
    
    runat="server" 
    
    
    Closable="false"
    
    
    Resizable="false"
    
    
    Height="150" 
    
    
    Icon="Lock" 
    
    
    Title="Login"
    
    
    Draggable="false"
    
    
    Width="350"
    
    
    Modal="true"
    
    
    BodyStyle="padding:5px;">
    
    
    <Body>
    
    
    <ext:FormLayout ID="FormLayout1" runat="server" >
    
    
    <ext:Anchor>
    
    
    <ext:TextField 
    
    
    ID="txtUsername" 
    
    
    runat="server" 
    
    
    FieldLabel="Username" 
    
    
    AllowBlank="false"
    
    
    BlankText="Your username is required."
    
    
    Text=""
    
    
    />
    
    
    </ext:Anchor>
    
    
    <ext:Anchor>
    
    
    <ext:TextField 
    
    
    ID="txtPassword" 
    
    
    runat="server" 
    
    
    InputType="Password" 
    
    
    FieldLabel="Password" 
    
    
    AllowBlank="false" 
    
    
    BlankText="Your password is required."
    
    
    Text=""
    
    
    />
    
    
    </ext:Anchor>
    
    
    <ext:Anchor>
    
    
    <ext:CheckBox 
    
    
    ID="chkRememberMe" 
    
    
    runat="server" 
    
    
    FieldLabel="Remember Me" 
    
    
    />
    
    
    </ext:Anchor>
    
    
    </ext:FormLayout>
    
    
    </Body>
    
    
    <Buttons>
    
    
    <ext:Button ID="btnLogin" runat="server" Text="Login" Icon="Accept">
    
    
    <Listeners>
    
    
    <Click Handler="
    
    
    if(!#{txtUsername}.validate() || !#{txtPassword}.validate()) {
    
    
    Ext.Msg.alert('Error','The Username and Password fields are both required');
    
    
    // return false to prevent the btnLogin_Click Ajax Click event from firing.
    
    
    return false; 
    
    
    }" />
    
    
    </Listeners>
    
    
    <AjaxEvents>
    
    
    <Click OnEvent="btnLogin_Click">
    
    
    <EventMask ShowMask="true" Msg="Verifying..." MinDelay="200" />
    
    
    </Click>
    
    
    </AjaxEvents>
    
    
    </ext:Button>
    
    
    </Buttons> 
    
    
    </ext:Window> 
    
    
    
    
    
    <ext:KeyMap ID="KeyMap1" runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
    
    
    <ext:KeyBinding>
    
    
    <Keys>
    
    
    <ext:Key Code="ENTER" />
    
    
    </Keys>
    
    
    <Listeners>
    
    
    <Event Handler="Coolite.AjaxMethods(btnLogin_Click)" />
    
    
    </Listeners> 
    
    
    </ext:KeyBinding>
    
    
    </ext:KeyMap> 
    
    
    </form>
    
    
    </body>
    
    
    </html>
  2. #2

    RE: [CLOSED] Call an AJAX function from the key map extension...

    Hi,

    First, an AjaxMethod *can't be protected (only public)

    Second, any ajax method can be called using the following syntax

    Coolite.AjaxMethods.btnLogin_Click(user params)
    Third, you can't mark*btnLogin_Click as AjaxMethod because it protected (I mentioned it above) and because the Coolite toolkit can't create*object sender, AjaxEventArgs e parameters

    I suggest to change you handler in KeyMap by*

    <Event Handler="#{btnLogin}.fireEvent('click', this);" />
    Hope this help
    Last edited by geoffrey.mcgill; Feb 21, 2011 at 10:11 PM.
  3. #3

    RE: [CLOSED] Call an AJAX function from the key map extension...

    That worked perfectly, thanks (please mark as [CLOSED]).

    Also thanks for the mini tutorial on AJAX function calls, that helps make things a little clearer for me... keep up the great work.

Similar Threads

  1. [CLOSED] keep the same ColumnModel during a function call
    By ddslogistics in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 13, 2012, 12:43 PM
  2. Replies: 8
    Last Post: Dec 23, 2011, 12:41 PM
  3. Replies: 4
    Last Post: Dec 10, 2010, 2:55 PM
  4. [CLOSED] Call Javascript Function
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 21, 2010, 3:58 AM
  5. [CLOSED] call function from child window
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Apr 29, 2009, 3:31 PM

Posting Permissions