jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton Deactivate and activate event click on toggledbutton

This topic contains 7 replies, has 2 voices, and was last updated by  pepe 1 day, 16 hours ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • pepe
    Participant

    Good afternoon, I have the following problem. I have 2 buttons:

    A SEND button that is a toggleButton.
    And an UNLOCK button which is a Button.

    What I intend is the following. When I press the send button I cancel its click event so that it cannot be pressed again and then when I want to activate the click event again I press the unlock button.

    The problem I have when pressing the unlock button since the click event of the send button does not activate.

    A greeting.

    <!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>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Documento sin título</title>

    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css”/>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.office.css” type=”text/css”/>

    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {

    $(“#btnSend”).jqxToggleButton({
    theme: ‘office’,
    width: 80,
    height: 30,
    });

    $(“#btnUnlock”).jqxButton({
    theme: ‘office’,
    width: 80,
    height: 30,
    disabled: true,
    });

    $(“#btnSend”).on(“click”, function(){
    $(this).off(‘click’);
    $(‘#btnUnlock’).jqxButton({disabled: false})
    })

    $(“#btnUnlock”).on(“click”, function(){
    $(“#btnSend”).on(‘click’);
    })

    })
    </script>

    </head>

    <body>
    <div style=”float:left;”>
    <input type=”button” id=’btnSend’ value=”Send”/>
    </div>
    <div style=”float:left; margin-left: 20px”>
    <input type=”button” id=’btnUnlock’ value=”Unlock”/>
    </div>
    </body>

    </html>


    Hristo
    Participant

    Hello pepe,

    Please, take a look at this example:
    http://jsfiddle.net/b0gwp45v/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    pepe
    Participant

    Thank you very much Hristo, perfect the answer. This line is the one I don’t understand $(“#btnSend”).On(“click”, hadndleSend);
    Is it too much to ask if there is a possibility of not having to use a function? I’ve been trying but it stops working.


    Hristo
    Participant

    Hello pepe,

    There is a lexical mistake of the naming of the function it should be handleSend name instead of the hadndleSend” name.
    It is used for an easier way to bind the again the same logic there.
    Please, take a look at this topic.
    Let me know if you have any other questions.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    pepe
    Participant

    Thank you very much Hristo, there is another way to lock and unlock a togglebutton without using on off.
    Thank you


    pepe
    Participant

    Good evening Hristo, I have followed the example you have set for me, but I still have a problem. I attach my code and I tell you:

    Pressing the A button will disable the click event of the A button and focus on the description text field. Pressing ESC in the description field will re-enable the click event, but the button’s toggle method does not work for me.

    thanks greetings.

    <!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>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Documento sin título</title>

    <link rel=”stylesheet” href=”styles/jqx.base.css” type=”text/css”/>
    <link rel=”stylesheet” href=”styles/jqx.office.css” type=”text/css”/>

    <script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxmaskedinput.js”></script>

    <style>

    #wndTiposVias{
    visibility: hidden;
    }

    #tituloVentanaTiposVias{
    float:left;
    margin-left: 10px;
    font-weight: bold;
    }

    #contenedorBotonAnadirTiposVias{
    float:left;
    }

    #contenedorBotonEditarTiposVias,
    #contenedorBotonAnteriorTiposVias,
    #contenedorBotonBuscarTiposVias,
    #contenedorBotonSiguienteTiposVias,
    #contenedorBotonEliminarTiposVias{
    float:left;
    margin-left: 5px;
    }

    #etiquetaIdentificadorTiposVias{
    float:left;
    margin-top: 1.3%;
    margin-left: 0.85%;
    width: 12%;
    height:30px;
    line-height: 30px;
    }

    #etiquetaDescripcionTiposVias{
    clear: left;
    float:left;
    margin-left: 0.85%;
    width: 12%;
    height: 30px;
    line-height: 30px;
    }

    #etiquetaAbreviaturaTiposVias{
    clear: left;
    float:left;
    margin-left: 0.85%;
    width: 12%;
    height: 30px;
    line-height: 30px;
    }

    #campoIdentificadorTiposVias{
    margin-top: 1.3%;
    float:left;
    width: 30%;
    height: 30px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    }

    #campoDescripcionTiposVias{
    float:left;
    width: 570px;
    height: 30px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    }

    #campoAbreviaturaTiposVias{
    float:left;
    width: 30%;
    height: 30px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    }

    #btnAceptarTiposVias{
    margin-top: 8px;
    float: right;
    }

    #btnCancelarTiposVias{
    margin-top: 8px;
    margin-right: 5px;
    float: right;
    }

    .jqx-window-content {
    padding: 8px;
    }

    </style>

    <script type=”text/javascript”>
    $(document).ready(function () {
    $(“#wndTiposVias”).jqxWindow({
    height: 265,
    width: 700,
    theme: ‘office’,
    showCollapseButton:true
    });

    $(“#botonA”).jqxToggleButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    });

    $(“#botonB”).jqxToggleButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(“#botonC”).jqxButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(“#botonD”).jqxToggleButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(“#botonE”).jqxButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(“#botonF”).jqxToggleButton({
    theme: ‘office’,
    width: 27,
    height: 27,
    disabled: true,
    });

    $(‘#tabTiposVias’).jqxTabs({
    width: ‘auto’,
    height: 145,
    theme: ‘office’
    });

    $(“#txtIdentificadorTiposVias”).jqxMaskedInput({
    height: ’22px’,
    width: “40px”,
    disabled: true,
    theme: ‘office’
    });

    $(“#txtDescripcionTiposVias”).jqxMaskedInput({
    height: ’22px’,
    width: “400px”,
    disabled: true,
    theme: ‘office’
    });

    $(“#txtAbreviaturaTiposVias”).jqxMaskedInput({
    height: ’22px’,
    width: “45px”,
    disabled: true,
    readOnly: true,
    theme: ‘office’
    });

    $(‘#btnAceptarTiposVias’).jqxButton({
    width: ’80’,
    height: ’27’,
    disabled: true,
    theme: ‘office’,
    })

    $(‘#btnCancelarTiposVias’).jqxButton({
    width: ’80’,
    height: ’27’,
    theme: ‘office’,
    })

    //———–( MOSTRAMOS EL DIV QUE CONTIENE EL FORMULARIO UNA VEZ CARGADO )

    $(‘#wndTiposVias’).css({“visibility”:”visible”});

    //———- ( ACCION BOTON AÑADIR )

    $(“#botonA”).on(“click”, eventoClick);

    function eventoClick(){
    console.log(“CLICK – A”);
    console.log(“TOGGLE – ” + $(“#botonA”).jqxToggleButton(‘toggled’));
    $(this).off(“click”);

    habilitarCamposNoIdentificador(‘#txtIdentificadorTiposVias’);
    $(“#txtDescripcionTiposVias”).jqxMaskedInput(‘focus’);
    $(‘#btnCancelarTiposVias’).val(“Cancelar”);
    }

    //———-( ACCION CAMPO DESCRIPCION )

    $(“#txtDescripcionTiposVias”).on(‘keydown’, function(e) {

    if (e.which == 27) {
    limpiarCampos();
    desabilitarCampos();
    $(‘#botonA’).jqxToggleButton({toggled: false});
    $(‘#btnCancelarTiposVias’).val(“Salir”);

    console.log(“CLICK – ESC”);
    console.log(“TOGGLE – ” + $(“#botonA”).jqxToggleButton(‘toggled’));
    $(“#botonA”).on(“click”, eventoClick);
    }

    })

    //———-( HABILITAR TODOS LOS INPUT TEXT MENOS EL INPUT IDENTIFICADOR )

    function habilitarCamposNoIdentificador(nombreCampoIdentificador){

    $(“input[type=text]:not(“+nombreCampoIdentificador+”)”).each(function() {
    $(this).jqxMaskedInput({disabled: false});
    });
    }

    //———-( DESABILITAR TODOS LOS INPUT TEXT )

    function desabilitarCampos(){
    $(“input[type=text]”).each(function(){
    $(this).jqxMaskedInput({ disabled: true});
    });
    }

    //———-( LIMPIAR TODOS LOS INPUT TEXT )

    function limpiarCampos(){
    $(“input[type=text]”).each(function(){
    $(this).jqxMaskedInput(‘clear’);
    });
    }

    });
    </script>

    </head>

    <body>
    <div id=’wndTiposVias’>
    <div>
    <div id=”tituloVentanaTiposVias”>TIPOS DE VIAS.</div>
    </div>

    <div>
    <div id=”menuBotonesAccion”>
    <div id=”contenedorBotonAnadirTiposVias”>
    <input type=”button” id=’botonA’ class=”botonesAccion” tabindex=”1″ value=”A”/>
    </div>
    <div id=”contenedorBotonEditarTiposVias”>
    <input type=”button” id=’botonB’ class=”botonesAccion” tabindex=”2″ value=”B”/>
    </div>
    <div id=”contenedorBotonAnteriorTiposVias” >
    <input type=”button” id=’botonC’ class=”botonesAccion” tabindex=”3″ value=”C”/>
    </div>
    <div id=”contenedorBotonBuscarTiposVias”>
    <input type=”button” id=’botonD’ class=”botonesAccion” tabindex=”4″ value=”D”/>
    </div>
    <div id=”contenedorBotonSiguienteTiposVias” >
    <input type=”button” id=’botonE’ class=”botonesAccion” tabindex=”5″ value=”E”/>
    </div>
    <div id=”contenedorBotonEliminarTiposVias”>
    <input type=”button” id=’botonF’ class=”botonesAccion” tabindex=”6″ value=”F”/>
    </div>
    </div>

    <div id=’tabTiposVias’ style=”clear:left; margin-top: 35px;”>
    <ul style=’margin-left: 20px;’>

  •           
  • <div>
    <div id=”etiquetaIdentificadorTiposVias”>
    <label id=”lblIdentificadorTiposVias” disabled=”disabled”>IDENTIFICADOR</label>
    </div>

    <div id=”campoIdentificadorTiposVias”>
    <input id=’txtIdentificadorTiposVias’ type=”text” tabindex=”7″>
    </div>

    <div id=”etiquetaDescripcionTiposVias”>
    <label id=”lblDescripcionTiposVias”>DESCRIPCION</label>
    </div>

    <div id=”campoDescripcionTiposVias”>
    <input id=’txtDescripcionTiposVias’ type=”text” tabindex=”8″>
    </div>

    <div id=”etiquetaAbreviaturaTiposVias”>
    <label id=”lblAbreviaturaTiposVias”>ABREVIATURA</label>
    </div>

    <div id=”campoAbreviaturaTiposVias”>
    <input id=’txtAbreviaturaTiposVias’ type=”text” tabindex=”9″>
    </div>
    </div>

    </div>

    <div>
    <input type=”button” value=”ACEPTAR” id=’btnAceptarTiposVias’ class=”botonRipple” tabindex=”10″/>
    </div>
    <div>
    <input type=”button” value=”SALIR” id=’btnCancelarTiposVias’ class=”botonRipple” tabindex=”11″/>
    </div>

    </div>
    </div>
    </body>
    </html>


Hristo
Participant

Hello pepe,

I would like to mention a few things.
We do not have the practice to revise such an amount of source code.
It will be better for both of us and it will be better if there is a small example that represents the case.
I looked at your example and I saw a few things.
The structure should be as it is required.
Please, take a look at this page.
You could find for each one li tag has one div tag.
Also, after the ul tag starts the content of each one tab and there is no parent container for them.

Another important thing when there is a widget inside another one you should use the “init-” callback for the initialization of the inner widgets.
For the jqxTabs, you need to use the initTabContent callback.

About the handling of the pressing of the “ESC” key, you should bind to some event as the keydown or the keypress event.
I hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com


pepe
Participant

Good afternoon Hristo, sorry for abusing your good predisposition will not happen again. I will implement what you recommend and once again thanks for the reply.
A greeting.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.