Starting with this fiddle:
https://jsfiddle.net/okuem1fb/
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE2" class="alert-status pt2">
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE3" class="alert-status">
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked="true" data-checkbox="VALUE4" class="alert-status">
</div>
$('.alert-status').bootstrapSwitch('state', true);
$(".alert-status pt2").attr('data-indeterminate', 'true');
$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {
alert($(this).data('checkbox'));
});
From the indeterminate state the button reacts based on which side you click:
Click on 'On' and the switch goes to 'Off'
Click on 'Off' and the switch goes to 'On'.
I would like to change that, when I click on the side of 'On' I actually expect it to go to the status 'On' and vice versa for 'Off'...
Also when clicking on 'Off' from the indeterminate state, the event used doesn't trigger...
Any thoughts on how to change this?
I hope that the solution has been found since....
In case for those who are in the same situation, here is the solution.
It is necessary to modify the js file (bootstrap-switch.js) and find the line corresponding to :
key: '_handleHandlers',
value: function _handleHandlers() {
var _this6 = this;
this.$on.on('click.bootstrapSwitch', function (event) {
event.preventDefault();
event.stopPropagation();
_this6.state(true); //--> _this6.state(false);
return _this6.$element.trigger('focus.bootstrapSwitch');
});
return this.$off.on('click.bootstrapSwitch', function (event) {
event.preventDefault();
event.stopPropagation();
_this6.state(false); //--> _this6.state(true);
return _this6.$element.trigger('focus.bootstrapSwitch');
});
}
That will modify the switch to go "On" when you click on "On" and go "Off" when clicking on the other-side. You can modify the minified file the same way (juste have to find which specific places to modify)...
For the change event, after initialization, you have to set the switch state to null :
$("#my-switch").bootstrapSwitch({
indeterminate: true,
state: null
});
This has been discused on Github here : https://github.com/Bttstrp/bootstrap-switch/issues/426 (with a corresponding JSFiddle : http://jsfiddle.net/2m4b4bb2/3/)
Related
I am working on a small project with checkbox and node js. I need the checked box stay on the screen after I click submit button and reset the form after clicking reset button.How can do that?
ejs code
<form method="post" action="/">
<input type="checkbox" name="preference" value="A">A
<input type="checkbox" name="preference" value="B">B
<input type="checkbox" name="preference" value="C">C
<input type="submit" value="Click to Submit">
<input type="reset" value="Erase and Restart">
</form>
node js
express.get('/', (req, res) => {
res.render('form');
});
express.post('/', (req, res) => {
console.log(req.body);
let checkedValue =req.body.preference;
let output = checkedValue==undefined?`You didn' make selection.`:`The preference iterm on menu is ${checkedValue}`;
res.render('form',{
output:output,
});
});
What's going on is that when you submit your form, the webpage is reloaded, so you lose your checked state. You can either save the values on your server and have them pre-checked using an optional checked flag in your ejs template or you can add some client side javascript to handle the form submission for you by writing and event handler for the submit event on the form.
if you expand your ejs template with a conditional checked value on your inputs, your returned page will have them pre-checked
<input type="checkbox" name="preference" <% if (submittedValue === "A") { %>checked<% } %> value="A">A
Or, here's a super simple bit of javascript that would send the values to your server
document.forms[0].addEventListener('submit', function (e) {
e.preventDefault(); // prevent the form from submitting with a page refresh
const data = { values: [] };
e.target.elements.forEach((formEl) => {
if (formEl.checked) data.values.push(formEl.value);
});
fetch('/urlToProcessYourForm', { method: 'POST', body: JSON.stringify(data) });
});
I'm very new to react JS, and I am using it to build a app now. I have a question.
In of of the Button Click event i have a code logic like this:
handlestartbutton(event) {
const accesskey = localStorage.getItem(localStorageKeys.accessTokenKey);
const decodedAccessKey = jwt_decode(accesskey);
const date = dateConverter.epochToReadableDate(decodedAccessKey.exp);
if (date.currentTime < date.expiryDate) {
this.setState({
accesstokenexpirydate: true
}, () => {
if(this.state.accesstokenexpirydate === false) {
//rest of the code
}
})
In renderer() i have a a pop up UI like this:
renderer()
{
{this.state.accesstokenexpirydate === true ? (
<Popup
open ={this.state.open}
closeOnDocumentClick={false}
closeOnEscape={false}
onClose={this.closeModal}className
>
<div className={popstyles.popupBody}>
<div className={popstyles.modalClose}>
<a className="close" onClick={this.closeModal}>
×
</a>
{""}
<div className ={popstyles.unAutherizedUser}>
<label >{homeConstantMessages.accessTokenExpire}</label>
<div className ={popstyles.unAutherizedUserMsg}>
<label>{homeConstantMessages.accessTokenExpireMsg}</label>
<button className ={styles.refreshaccessbtn} onClick = {this.navigateToHomePage.bind(this)} label = {homeConstantMessages.refreshbtn}>
</button>
</div>
</div>
</div>
</div>
</Popup>
) : (
''
)}
}
The problem is when the first time start button is clicked this pop up UI is not getting popped even though the state variable accesstokenexpirydate is set to true. when second time the button is cicked UI is popping up. can anyone please help me out here
1) I think you have to apply arrow function like follows and then you can use this
handlestartbutton=(event)=> {...}
2) I'm quite confused about the name, don't you think it should be render(...) instead of renderer()
I'm updating my extension with an options_ui and when the user updates the extension I call browser.runtime.openOptionspage() to make them aware of the new options page, but for some screen sizes the options_ui is not visible so for a better user experience I want to scroll my form with radio buttons into view, I've tried .scrollIntoView() on an input element but it does not appear to work.
I have a feeling this might not be possible in the context of about:addons is this possible?
Here's an image of what I mean, https://i.imgur.com/2bZx7d1.png
my options page/code:
<body>
<form>
<label>Enable for:</label><br>
<input type="radio" name="setting" id="global" value="global"> All tabs<br>
<input type="radio" name="setting" id="tabs" value="tabs"> Only tabs I click the icon in
</form>
<script src="options.js"></script>
</body>
function restoreOptions() {
document.getElementById("tabs").scrollIntoView(); //nada
var mode_getter = browser.storage.local.get("tab_mode");
mode_getter.then((obj) => {
switch (obj.tab_mode) {
case "tabs":
document.getElementById("tabs").checked = true;
break;
default:
document.getElementById("global").checked = true;
}
});
}
document.addEventListener('DOMContentLoaded', restoreOptions);
document.querySelector("form").addEventListener("change", saveOptions);
Im building a custom Minecraft Server Status and hit a problem. The first version of this was successful but the code was rather long and I decided to make it better and shorter. The script is supposed to fill the elements of each .server but it doesn't work.
<div class="server_status">
<div class="container servers_info">
<h1>My Network</h1>
<div id="of the server" class="server" title="of the server" server-ip="0.0.0.0">
<div class="name"></div>
<div class="count"><i class="fa fa-spinner fa-spin"></i></div>
<div class="players">Loading player data <i class="fa fa-spinner fa-spin"></i></div>
<div class="status"></div>
</div>
<div id="of the server" class="server" title="of the server" server-ip="0.0.0.0">
<div class="name"></div>
<div class="count"><i class="fa fa-spinner fa-spin"></i></div>
<div class="players">Loading player data <i class="fa fa-spinner fa-spin"></i></div>
<div class="status"></div>
</div>
<!-- ..... more servers -->
<span class="total"><i class="fa fa-spinner fa-spin"></i></span>
</div>
$(document).ready(function ping() {
$( ".servers_info .server" ).each( function() {
var name = $(this).attr( "title" );
var ip = $(this).attr( "server-ip" );
var id = $(this).attr( "id" );
var total = 0;
var call = "Get Avatar List adress";
//Set the name:
$(".name",this).html(name);
//Gets the data:
$.getJSON("http://mcapi.ca/v2/query/info/?ip=" + ip, function (json) {
//Checks The status and applies visual effects:
if (json.status !== "false") {
$(".status",this).html("<span class=\"l-online\">" + json.ping + " ms</span>");
$(this).removeClass('blur');
} else {
$(".status",this).html("<span class=\"l-offline\">0 ms</span>");
$(this).addClass('blur');
};
});
});
//Sets Refresh rate of 10s
setTimeout(ping, 10000);
});
I narrowed down the problem to the $.getJSON part. The data is retrieved correctly but cannot be placed in its respective DIVs. The only difference with the first version of the script is that I used 4 getJSON separately for each of the servers I wanted to display. Now using .each to combine it for all 4 of them and also $(this) to use relative objects.
I suspect the problem is in th usage of $(this) in .get but I'm nnot sure and don't know how to fix it.
As you suspect, the issue is the $(this). part. Inside the $.getJSON callback this no longer refers to the DOM object that triggered the event.
To fix this you can either:
Add a .bind(this) to the callback function. No changes required inside the function itself.
$.getJSON(url, function(json) {
/* all your code here */
}.bind(this)
);
Or save the reference to this before $.getJSON and use it inside the callback.
var _this = this;
$.getJSON(url, function(json) {
/* replace all references of this to _this for example*/
$(_this).removeClass('blur');
});
Hope that helps
Can anyone help me understand why this is not working?
<div id="css-check" class="css-check tool-tip checkbox inline" ...
<input id="someid" name="somename" type="checkbox" value="somevalue" />
</div>
$('.css-check').bind({
click: function() {
$(this).toggleClass('clicked');
this.children[0].click();
},
mouseenter: function() {
// do something on mouseenter
}
});
Only the first action is taken. So, the class is toggled but the checkbox, that is the [0] child of the div, is not clicked.
EDIT
This works.
var $checkbox = $(this).children('input:first-child');
$checkbox.prop('checked', !$checkbox[0].checked);
$(this).toggleClass('clicked');
change:
this.children[0].click();
to:
$(this).children('input:first-child').click();
Note: this triggers the click event, if you want to check the checkbox then use:
$(this).children('input:first-child').attr('checked', 'true');