jQWidgets Forums

jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton button wrapped in a DIV can be clicked even if disabled

This topic contains 4 replies, has 2 voices, and was last updated by  Dan Fad 12 years, 2 months ago.

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

  • Dan Fad
    Participant

    Hi,

    button wrapped in a DIV can be clicked even if disabled. Is there a way to suppress the click event?

    here is a sample code with Div Button vs Input button

    <!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" src="../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme=getTheme();
    $("#divButton").jqxButton({ theme: theme, width: 120, height: 20, disabled:true });
    $("#inputButton").jqxButton({ theme: theme, width: 120, height: 25, disabled:true });
    $("#divButton").click(function (event) {
    $("#inputButton").jqxButton({disabled:false });
    });
    $("#inputButton").click(function (event) {
    $("#divButton").jqxButton({disabled:false });
    });
    });
    </script>
    </head>
    <body>
    <div id="divButton" style="float: left; margin-left: 5px;"><span style="margin-left: 4px;">Div Button</span></div>
    <input type="button" id="inputButton" value="Input Button" />
    </body>
    </html>

    thanks,
    dan fad


    Dimitar
    Participant

    Hello dan fad,

    The issue comes from the span element inside the div from which the jqxButton is created. If you only have:

        <div id="divButton" style="float: left; margin-left: 5px;">
    Div Button</div>

    there should be no issues with the button.

    Best Regards,
    Dimitar

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


    Dan Fad
    Participant

    hi Dimitar,

    i tried to remove the span element but the Click event is still invoked.

    thanks,
    dan fad


    Dimitar
    Participant

    Hi dan fad,

    It seems the div-created button only works properly in Internet Explorer. Creating a button from a div element is not suggested. You should initialize a jqxButton from either button or input elements. The following code works correctly on all browsers:

    <!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="../2.6/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../2.6/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../2.6/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    $("#divButton").jqxButton({ theme: theme, width: 120, height: 20, disabled: true });
    $("#inputButton").jqxButton({ theme: theme, width: 120, height: 25, disabled: true });
    $("#divButton").click(function (event) {
    $("#inputButton").jqxButton({ disabled: false });
    });
    $("#inputButton").click(function (event) {
    $("#divButton").jqxButton({ disabled: false });
    });
    });
    </script>
    </head>
    <body>
    <button id="divButton" style="float: left; margin-left: 5px;">
    Div Button</button>
    <input type="button" id="inputButton" value="Input Button" />
    </body>
    </html>

    Best Regards,
    Dimitar

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


    Dan Fad
    Participant

    hi Dimitar,

    this solves the problem particularly buttons with image.

    thanks,
    dan fad

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

You must be logged in to reply to this topic.