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');
Related
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/)
I have tried to click to NO or YES on login.microsoftonline.com on the Stay signed in? dialog and I cant get pass this page, checking the code this page has
There is no frames on the page :(
<input value="Yes" aria-describedby="KmsiDescription" id="idSIButton9" class="btn btn-block btn-primary" data-bind="
attr: {
'id': primaryButtonId || 'idSIButton9',
'aria-describedby': primaryButtonDescribedBy },
value: primaryButtonText() || str['CT_PWD_STR_SignIn_Button_Next'],
hasFocus: focusOnPrimaryButton,
click: primaryButton_onClick,
enable: isPrimaryButtonEnabled,
visible: isPrimaryButtonVisible" type="submit">
<input value="No" id="idBtn_Back" class="btn btn-block" data-bind="
attr: {
'id': secondaryButtonId || 'idBtn_Back',
'aria-describedby': secondaryButtonDescribedBy },
value: secondaryButtonText() || str['CT_HRD_STR_Splitter_Back'],
hasFocus: focusOnSecondaryButton,
click: secondaryButton_onClick,
enable: isSecondaryButtonEnabled,
visible: isSecondaryButtonVisible" type="button">
Please anyone could help me?
Is this page in the same frame?
If not then you may have to switch to the right frame and then select the button.
In order to select the button you may use SelectBy ID etc.
Or else you may use JavaScriptexecutor to execute the Javascript event to select the button.
https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/JavascriptExecutor.html
It looks like the Yes button has the id idSIButton9. You should be able to just use that.
browser.click('#idSIButton9');
Or even this should work
browser.click('input[value="Yes"]');
How to add button in sibling of div.selectize-dropdown-content div.
So that list item should scroll as usual but that button should be fixed at bottom.
I have gone through plugin for selectize js but all the render function is only for list , header and item.
Any help will be appreciable.
var $select = $('#select-state').selectize({
sortField: 'text',
hideSelected: false,
plugins: {
'dropdown_header': {
title: '<button class="btn full-width ng-binding" data-options="modal"><i class="fa fa-plus"></i> Yeni Ekle</button>'
}
}
});
I want videos playing in the reveal modal window to stop playing when the modal window closes (who doesn't?). This is easily done with jQuery by setting the iframe source to empty.
But I can't figure out how to make it work in a callback. The modal window itself functions as expected. And this works:
$('.close-button', '#video-reveal').on('click', function() {
$('#video-player').attr("src", "");
console.log("button event fired");
});
However, neither of the following has any effect:
// from documentation
$(document).on('close.fndtn.reveal', '[data-reveal]', function() {
var modal = $(this);
console.log("closing reveal event fired");
});
// my attempt to do it programmatically
$('[data-reveal]').on ('opened.fndtn.reveal', function() {
var modal = jQuery(this);
console.log("opened reveal");
});
So it feels like the event is not firing. I'm sure it is, but how to capture it?
The magic of Foundation 6 is not all obvious without some digging. Working with version 6.2.3
$(document).on(
'open.zf.reveal', '[data-reveal]', function () {
console.log("'open.zf.Reveal' fired.");
}
);
It appears as though you are using Foundation 5's callbacks, rather than Foundation 6...
For your callbacks, I'd suggest using 'closed.zf.reveal', 'open.zf.reveal' or 'closeme.zf.reveal' as mentioned here:
http://foundation.zurb.com/sites/docs/reveal.html
In HTML
<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
<div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<!--in apps.js-->
function destroyVideo(){
var url = $('#youtubePlayer').attr('src');
$('#youtubePlayer').attr('src', '');
$('#youtubePlayer').attr('src', url);
}
I have an asp:button with appropriate OnClick. I also have a jQuery UI dialog that opens when said button is clicked. I would like the OnClick function to be called when the user clicks "Yes" in the dialog. Even better would be if one codebehind function was called for "Yes" and another for "No." But for the life of me I can't figure out how.
Here's my current code:
$(function() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-confirm").dialog({
autoOpen:false,
resizable:false,
height:175,
width: 450,
modal:true,
buttons: {
"Yes": function() {
$(this).dialog("close");
},
"No": function() {
$(this).dialog("close");
}
}
});
$(".navigation").click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog('open');
});
});
and the button:
<asp:Button ID="testerE" class="navigation" runat="server" OnClick="JustATest" Text="Test me" />
Why don't you put those buttons inside a div and use that as the html that is displayed in the modal dialog?
<div id="my-placeholder-for-dialog">
Text goes here
<asp:Button ID="testerE" class="navigation" runat="server" OnClick="JustATest" Text="Test me" />
</div>
Otherwise, you would need to call the __doPostBack function that is present on the page.