jQWidgets Forums

This topic contains 9 replies, has 2 voices, and was last updated by Hristo 4 years, 10 months ago.

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

Author

Deactivate and activate event click on toggledbutton Posts
May 15, 2020 at 6:40 pm Deactivate and activate event click on toggledbutton #111988

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>

May 18, 2020 at 11:25 am Deactivate and activate event click on toggledbutton #112004

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

May 19, 2020 at 2:50 pm Deactivate and activate event click on toggledbutton #112019

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.

May 21, 2020 at 10:18 am Deactivate and activate event click on toggledbutton #112034

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

May 23, 2020 at 5:38 pm Deactivate and activate event click on toggledbutton #112052

pepe
Participant

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

May 30, 2020 at 10:38 pm Deactivate and activate event click on toggledbutton #112111

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=”etiquetaDescripcionTiposVias”>
<label id=”lblDescripcionTiposVias”>DESCRIPCION</label>
</div>

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

</div>

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