[LuiginoParticipant]

hello Peter,

after two years I am picking this thread back because I recently updated library to 3.1.0 and I noticed the piece of code

     $('#rt_status.jqx-switchbutton').jqxSwitchButton('checked', true);
      $('#rt_status.jqx-switchbutton').jqxSwitchButton('_switchButton', true);

doesn’t work anymore, even it says _switchButton is invalid. Isn’t there yet the possibility to set current state without firing the bind ‘checked unchecked’ event?

Thanks in advance
Cheers,
Luigi

[LuiginoParticipant]

Good morning,

sorry to pick this thread back…but I’d like to ask to jqWidgets developers about jqxSwitchButton which latest release 3.1.0 looks like having event ‘change’ not working anymore even with bind() or on() as you can see in this JSFiddle example…

http://jsfiddle.net/6VbfW/14/

I tried also to change jQuery/JQuery UI versions on jsfiddle but no changes…

What I could do to fix it? Is there an alternative? Or even a patch to fix ‘change’ event?

Thanks a lot in advance!

Cheers,
Luigino

[LuiginoParticipant]

Hello Peter,

I saw there’s a 2.2 version online… does that version release have the ‘check’/’uncheck’ fixed? Would those properties just change state without fire the toggle/change?

Thanks again!
Cheers,
Luigi

[LuiginoParticipant]

Hi again,

ah ok, as workaround in fact I am using a true/false’s global variable so I won’t just fire again…

Thanks
Luigi

[LuiginoParticipant]

Hello again Peter,

it works… but not really because I think the _switchButton will fire the bind again, indeed it shouldn’t fire it… just only change css state button back to previous state…

Thanks
Ciao
Luigi

[LuiginoParticipant]

Here the piece of test code:

.jqx-switchbutton-label-on-custom
{
background: #56aa1c !important; /* Old browsers */
filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr=#56aa1c, EndColorStr=#00ce1a,GradientType=0 ) !important; /* IE6-9 */
background: linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* W3C */
background: -o-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(40,206,26) 62%) !important; /* Opera 11.10+ */
background: -moz-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* FF3.6+ */
background: -webkit-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(bottom, rgb(106,255,125) 20%, rgb(0,206,26) 62%) !important; /* IE10+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(20%, rgb(106,255,125)), color-stop(62%, rgb(0,206,26))) !important; /* Chrome,Safari4+ */
/*text-shadow: 0px -1px 1px #000; */
font-size: 12px !important;
color: black !important;
}

.jqx-switchbutton-label-off-custom
{
color: black !important;
background: #cfcfcf !important; /* Old browsers */
filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr=#cfcfcf, EndColorStr=#fefefe, GradientType=0 ) !important; /* IE6-9 */
background: linear-gradient(top, #cfcfcf 0%,#fefefe 100%) !important; /* W3C */
background: -moz-linear-gradient(top, #cfcfcf 0%, #fefefe 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(207,207,207)), color-stop(100%, rgb(254,254,254))) !important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(207,207,207) 0%, rgb(254,254,254) 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cfcfcf 0%,#fefefe 100%) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cfcfcf 0%,#fefefe 100%) !important; /* IE10+ */
font-size: 12px !important; /*!important;*/
/*color: #808080 !important; */
}

.jqx-switchbutton-thumb-custom, .jqx-fill-state-normal-custom
{
background: #969696 !important; /* Old browsers */
background: -moz-linear-gradient(top, #969696 0%, #dbdbdb 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#dbdbdb)) !important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* Opera 11.10+ */
background: -ms-linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* IE10+ */
background: linear-gradient(top, #969696 0%,#dbdbdb 100%) !important; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr=#969696, EndColorStr=#dbdbdb,GradientType=0 ) !important; /* IE6-9 */
border: 1px solid black !important; /* !important */
-webkit-box-shadow: -6px 0px 17px 1px #275292 !important;
-moz-box-shadow: -6px 0px 17px 1px #275292 !important;
box-shadow: -6px 0px 17px 1px #275292 !important;
color: black !important;
}

.jqx-switchbutton-custom
{
border: 1px solid black !important; /* !important */
/* background: #d9d9d9 !important; */
}
.settings-setter
{
float: left !important;
margin-left: 10px !important;
margin-top: 2px !important;
width: 90px !important;
/*border: 0.1em dotted green;*/
}
.events-container
{
margin-left: 20px !important;
}
.settings-label
{
font-weight: bold !important;
font-family: Sans-Serif !important;
font-size: 13px !important;
margin-left: 14px !important;
margin-top: 15px !important;
float: left !important;
color: #d9d9d9 !important;
}

var realtime_status = false;

function load() {
if (realtime_status) {
$('#rt_status').jqxSwitchButton({ height: 18, width: 65, theme: 'custom', checked: true });
} else {
$('#rt_status').jqxSwitchButton({ height: 18, width: 65, theme: 'custom', checked: false });
}
}

$(document).ready(function () {
$('#rt_status').bind('change', function (event) {
if ( $('#rt_status').jqxSwitchButton('checked') ) {
if (!confirm("Really want to deactivate?") ) {
alert('ok, gotta ckeck it back then...');
//$('#rt_status .jqxSwitchButton').jqxSwitchButton('check');
$('#rt_status.jqx-switchbutton').jqxSwitchButton('check');
}
} else {
if (!confirm("Really want to activate?") ) {
alert('ok, gotta unckeck it back then...');
//$('#rt_status .jqxSwitchButton').jqxSwitchButton('uncheck');
$('#rt_status.jqx-switchbutton').jqxSwitchButton('uncheck');
}
}
});
});

As you can see, I try to click and when I click “Cancel” it should back to the previous state but it doesn’t… why?….

Thanks
Ciao
Luigi

[LuiginoParticipant]

Hello Peter,

I solved anyway that strange behavior.. it wasn’t really jqxSwitchButton’s fault even if it seemed to, but just if I put the jqxSwitchButton inside a two-rowspan’s cell table it would behave different, so I put just another table inside the cell with no rowspan and it worked.

Now I have just a little question… I see the “change” event can be used to manage the change of the property but how I can do something like:


$('#jqxSwitchButton').bind('change', function (event) {
if ( !$('#jqxSwitchButton').jqxSwitchButton('checked') && !confirm("Really want to activate?") )
$('#jqxSwitchButton').jqxSwitchButton({checked: false});
elseif ( $('#jqxSwitchButton').jqxSwitchButton('checked') && !confirm("Really want to deactivate?") )
$('#jqxSwitchButton').jqxSwitchButton({checked: true});
});


since I implemented something like that but it doesn’t work… like I wrong clicked it so I don’t really want to activate…

Thanks
ciao
Luigi

[LuiginoParticipant]

Hi again Peter,

I am trying to reproduce with a test.php file and weirdly the:


if (realtime_status) {
alert('I am true');
$('#rt_status').jqxSwitchButton({ height: 18, width: 61, theme: 'custom', checked: true });
} else {
alert('I am false');
$('#rt_status').jqxSwitchButton({ height: 18, width: 61, theme: 'custom', checked: false });
}


is executed correctly and it draws an OFF button…
I checked with Chrome Debugger Tools and looks like all .js scripts are correctly loaded…but still the $(‘#rt_status’).jqxSwitchButton({ height: 18, width: 61, theme: ‘custom’, checked: false }); draws an ON button…

I cleared also totally the cache but nothing… any suggest at least about debugging the function if it would return some messages?…

Thanks
ciao,
Luigi

[LuiginoParticipant]

Hello Peter,

first, thanks for replying….and fixed that ‘checked’ thing which it’s (‘checked’) and not ({‘checked’}) becuase otherwise it woudnt work…

what about the issue on Chrome which doesn’t put the correct button as unchecked since that IF says FALSE?….

Thanks
Luigi

[Author]

Posts