Enabled /Disabled in lifetime - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, disabled, enabled, form, jqxButton

This topic contains 3 replies, has 4 voices, and was last updated by Peter Stoev 11 years, 6 months ago.

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

Author

Enabled /Disabled in lifetime Posts

November 29, 2012 at 6:02 pm Enabled /Disabled in lifetime #11739

detberlin

Participant

i have found a problem

the following problem

If I tie a two button in a form and put one of these on disabled true
changes the second button to disabled.
I’ve been trying now to set the second button which is to be not disabled disabled false
but it brings no result.

I’m using the latest version now

here my code….

$(document).ready(function(){
  var paselements = $('<div id="pasWindow"><div>Password vergessen?</div><div>' +
  '<div class="wbTexte2" style = "text-indent:-98px; position: absolute; margin-top: 9px; margin-left: 100px; width: 335px;">E-Mailadresse</div>' +
  '<hr  class="wbLinie2" style = "position:absolute; margin-top:45px; margin-left:3px; width:434px;">' +
  '<form id="pasForm01" action="./">' +
  '<input id="pasFeld01" style="position:absolute;margin-top:10px; margin-left:101px;width:331px;" class="wbInput2" type="text" maxlength="200">' +
  '<div   id="pasAlerts" style="position:absolute; top:99px; left:7px; font-weight:bold;"></div>' +
  '<input id="pasSenden" style="float:right; margin-top:60px; margin-right:3px;" type="button" value="Senden">' +
  '<input id="pasCancel" style="float:right; margin-top:60px; margin-right:3px;" type="reset"  value="Abbrechen">' +
  '</form></div></div>'); $(document.body).append(paselements);
  $('#pasWindow').bind('closed',function (event){ $('#pasForm01').jqxValidator('hide'); $('#pasWindow').remove();});
  var xVarPos = $('#mitte').offset().left; var yVarPos = $('#mitte').offset().top; $('#pasWindow').jqxWindow('bringToFront');
  $('#pasWindow').jqxWindow({
  position:{x: xVarPos + ((742 - 450) / 2), y: yVarPos + ((664 - 136) / 2)}, height:136, width:450, showAnimationDuration:0, closeAnimationDuration:0,
  resizable:false, draggable:false, autoOpen:true, isModal:true, cancelButton:$('#pasCancel'), theme:'darkblue'});
  $('#pasSenden').jqxButton({height:'30px', width:'91px', theme:'energyblue'});
  $('#pasCancel').jqxButton({height:'30px', width:'91px', theme:'energyblue'});
  document.getElementById('pasFeld01').focus(); textFilter('#pasFeld01', 6);
  $('#pasForm01').bind('validationSuccess', function(event) {pasSpeichern();});
  $('#pasSenden').bind('click',function () {$('#pasForm01').jqxValidator('validate');});
  $('#pasForm01').jqxValidator({arrow:false, animation:'none'});
  $('#pasForm01').jqxValidator({rules:[
  {input:'#pasFeld01', message:'E-Mailadresse', action:'keyup', rule:'required', position:'left:0px,0px'},
  {input:'#pasFeld01', message:'E-Mailadresse', action:'keyup', rule:'email',    position:'left:0px,0px'}]});
});
//----------------------------------------------------------------------------------------------------------------------------
function pasSpeichern(){
  $.ajax({type:"POST", url:'phmails.php?malWahlen=1', data:{eigeneMailAdresse:firmenMail,
  pasFeld01: $('#pasFeld01').val()}, success:function (pasCode) {
  switch (pasCode) {
  case '1': $('#pasSenden').jqxButton({disabled:true});  $('#pasCancel')[0].value = 'Schlie' + '\u00DF' + 'en';
            $('#pasCancel').jqxButton({disabled:false}); $('#pasAlerts').html('Daten wurden versendet'); break;
  default:  $('#pasAlerts').html('Datenversand fehlgeschlagen');}}
});}

THX in advance

November 30, 2012 at 7:14 am Enabled /Disabled in lifetime #11753

Dimitar

Participant

Hello detberlin,

We could not reproduce the reported behaviour by trying your code.

Here is a small example, which shows two buttons in a form – one of them is disabled and one of them – enabled:

<!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>
    <title></title>
    <link type="text/css" rel="Stylesheet" href="../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.3.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 () {
            $("#OKButton").jqxButton({ disabled: true });
            $("#CancelButton").jqxButton({ disabled: false });
        });
    </script>
</head>
<body>
    <form id="form" action="Button_Disabled.htm">
    <input id="OKButton" type="button" value="OK" />
    <input id="CancelButton" type="reset" value="Cancel" />
    </form>
</body>
</html>

Best Regards,
Dimitar

jQWidgest team
http://www.jqwidgets.com/

July 2, 2013 at 8:52 pm Enabled /Disabled in lifetime #24355

igci_ing

Member

Hello, i have the same bug.

I change the state the same button, with method:
Test1.jqxButton({ disabled:false,theme: theme, width:70, height: 20 }); to
Test1.jqxButton({ disabled:true}); then Test1.jqxButton({ disabled:false});

When the button is disabled the button work it

July 2, 2013 at 9:04 pm Enabled /Disabled in lifetime #24356

Peter Stoev

Keymaster

Hi,

Your Test1.jqxButton({ disabled:false}); enables the button and it is normal it to be clickable.

Here’s a sample with a Disabled Button. As the Button is Disabled, the Alert in the Click handler will never be displayed.

<!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>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                // Create jqxButton widgets.
                $("#jqxButton").jqxButton({ disabled: false, width: '150', theme: theme });
                $("#jqxButton").jqxButton({ disabled: true});
              
                // Subscribe to Click events.
                $("#jqxButton").on('click', function () {
                   alert('click');
                });
            });
        </script>
        <div style='width: 150px;' id='jqxWidget'>
            <div>
                <input type="button" value="Button" id='jqxButton' />
            </div>
        </div>
    </div>
</body>
</html>

If you use an older version, please consider upgrading it. The above working sample is tested with the current version – jQWidgets 2.9.1.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.