jQuery - How to add event to control after DOM loading?

Question

I need to add a virtual keyboard after a validation in the codebehind. The control is invisible until this validation is true.

When I add the virtual keyboard with the control already visible on the screen, it works 100%. After validation is not working.

The scripts used are:

<link href="../../css/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>   
<link href="../../css/keyboard.css" rel="stylesheet"/>
<script src="../../js/jquery.keyboard.js"></script>    
<link href="../../keyboard/demo.css" rel="stylesheet"/>
<script src="../../keyboard/demo.js"></script>
<script src="http://mottie.github.com/Jatt/js/jquery.jatt.min.js"></script> 
<script src="../../keyboard/jquery.chili-2.2.js"></script> 
<script src="../../keyboard/recipes.js"></script>

The control that is receiving the virtual keyboard is:

<asp:TextBox ID="txtEmailCliente" runat="server"></asp:TextBox>

The code that makes the virtual keyboard appear in the control is in the demo.js file and the code follows below:

    jQuery(function ($) {
    var configAlpha = {
        display: {
            'bksp': '\u2190',
            'accept': 'Concluido',
            'default': 'ABC',
            'shift': '\u21d1',
            'meta1': '.?123',
            'meta2': '#+='
        },
        layout: 'custom',
        customLayout: {
            'default': [
                'q w e r t y u i o p {bksp}',
                'a s d f g h j k l {enter}',
                '{s} z x c v b n m , . {s}',
                '{meta1} {space} {meta1} {accept}'
            ],
            'shift': [
                'Q W E R T Y U I O P {bksp}',
                'A S D F G H J K L {enter}',
                '{s} Z X C V B N M ! ? {s}',
                '{meta1} {space} {meta1} {accept}'
            ],
            'meta1': [
                '1 2 3 4 5 6 7 8 9 0 {bksp}',
                '- / : ; ( ) \u20ac & @ {enter}',
                '{meta2} . , ? ! \' " {meta2}',
                '{default} {space} {default} {accept}'
            ],
            'meta2': [
                '[ ] { } # % ^ * + = {bksp}',
                '_ \\ | ~ < > $ \u00a3 \u00a5 {enter}',
                '{meta1} . , ? ! \' " {meta1}',
                '{default} {space} {default} {accept}'
            ]
        }
    };      

    $('#txtEmailCliente').keyboard(configAlpha);    
});

Someone could tell me how to do it so that after clicking a certain button, do a validation and give txtEmailClient.Visible = true this virtual keyboard appears?

I’d have to bind the event to control somehow, someone knows how?

Answer 1

You can perform this server-side validation through for example a button.

<input id="foo" runat="server" type="button" onserverclick="ex_OnClick" />

from the server side you would then create the method:

protected void ex_OnClick(object sender, EventArgs e)
{
//validacao e em seguida o seu txtEmailCliente.Visible = true

}

Answer 2

found the solution to my problem. When there was a partial post in AJAX PANEL, the code below was losing the CSS classes.

$('#txtEmailCliente').keyboard(configAlpha); 

I made a change so that the DOM does not lose the CSS property of the control as below:

$(document).on('focus', '#txtEmailCliente', {}, function (e) {
    $(e.currentTarget).keyboard(configAlpha)
})

That way, even if you post the form, when you receive the Focus, the control will display the virtual keyboard.

I hope I could have helped with my doubt, but I had to research and put the solution for you.