I am wanting to show a tooltip only on a specific function.
Here is the function
$('#search').submit(function (e) {
//check atleat 1 checkbox is checked
if (!$('.its').is(':checked')) {
//prevent the default form submit if it is not checked
$( ".pk" ).tooltip({
content: "Please select a source"
});
e.preventDefault();
}
})
I want to make a tooltip appear only if they do not have a checkbox selected and they have tried to submit the form, the tooltip will prompt them to check a box before submitting the form.
Is this possible with the jQuery Tooltip widget? All I am finding about the Tooltip widget is how to use onHover or onClick If not is there a recommended tooltip script to use for something like this, or is there a way for me to go about this differently?
Related
My HTML page has a Button and a Select Drop-Down (Combo Box). Drop-Down change event is like this:
$('#DDL_ID').on('change', function (e) {
// Some Code Here
});
When I click the button, I am setting some value to Drop-Down and it is working fine.
$('#BTN_ID').on('click', function (e) {
$('#DDL_ID').val('123');
});
When I click the button, Drop-Down value is getting changed but Drop-Down change event is not firing. Can anyone help me on this?
Please note this is not a duplicate question.
Setting the val() through jquery will not automatically trigger the event on the item... so you need to manually trigger() it...
$('#BTN_ID').on('click', function (e) {
$('#DDL_ID').val('123').trigger('change');
});
I have a jQuery selectmenu widget with about 30 options. To try and make it more usable, I'm only showing the most commonly selected 15 options. I then have a 16th option called "Show more". What I'd like jQuery to do is then display the other 15 options (below the 15 already present).
At the moment, I have the 15 showing with the show more button. But when clicked, it makes the selectmenu (popup) go away (with "Show more" selected). Clicking the button again brings up the selectmenu list again with all of the options. So, it's working, it's just that it hides the list of options after "show more" is clicked. Is there a way to prevent the list from going away? I have included event.preventDefault(), but that doesn't seem to be doing the trick.
Essentially, all I really want to do is show and hide options of a selectmenu widget. I'm happy to do it another way if there's something easier!
$(document).ready(function() {
$('#holderForFamilySelect').on('change', 'select#selectImplantFamily', function(){
if ($(this).val() == "loadMore") {
event.preventDefault();
$("select#selectImplantFamily option.ui-screen-hidden").removeClass("ui-screen-hidden");
$("select#selectImplantFamily").selectmenu("refresh");
} else {
loadImplantsOfFamily($(this).val());
}
});
});
You need not only to prevent default but also to stop propagation (so the click doesnt do anything from this point but your code), like this:
$(document).ready(function() {
$('#holderForFamilySelect').on('change', 'select#selectImplantFamily', function(){
if ($(this).val() == "loadMore") {
event.preventDefault();
event.stopPropagation();
$("select#selectImplantFamily option.ui-screen-hidden").removeClass("ui-screen-hidden");
$("select#selectImplantFamily").selectmenu("refresh");
} else {
loadImplantsOfFamily($(this).val());
}
});
});
I am trying to toggle the visibility of some custom meta boxes via jQuery.
I managed to hide them by default and to make them visible when clicking on the correct post format.
I am not finding a solution for making the meta boxes disappear when the user changes the post format.
e.g.
Default: Hidden
Click on "Aside": Show
Switching from "Aside" to any other post format: hide.
I have the following code:
jQuery(document).ready(function () {
jQuery("#postbox-container-2").addClass("hidden");
if (jQuery("input#post-format-video").is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
jQuery("input#post-format-video").change(function () {
if (jQuery(this).is(':checked')) {
jQuery("#postbox-container-2").removeClass("hidden");
}
});
});
Any idea?
Different approach based on #zipp fiddle
Query(document).ready(function() {
jQuery( "#postbox-container-2" ).hide();
var toToggle='';
jQuery('input#post-format-video').change(function() {
if (toToggle){
jQuery(toToggle).hide();
}
//alert(this.value+ " is checked");
var selector='#postbox-container-2';
jQuery(selector).toggle();
toToggle=selector;
});
});
even this one works fine but does not change live when I click on a different radio button
Here is a jsfiddle with your example. The change event is triggered only on the checked input. It won't be triggered when it is unchecked for a specific input. In order to know if your specific input is unchecked you need to test if the selected input is yours: $(this).attr('id') == 'post-format-video' and do your action. In my example I am selecting the radio input with $('input:radio[name=myRadio]') therefore you need to adapt your html and code to have the correct selector.
//This selector is triggered when my radio is selected for all input radio that I want to listen to
$('input:radio[name=myRadio]').change(function() {
//if we have a radio button selected previously we hide the div related
if (toToggle){
$(toToggle).hide();
}
//select the div we want to show
var selector;
if ($(this).attr('id')=='post-format-video'){
selector='#postbox-container-2';
}
...
//show it (could have called toggle() )
$(selector).show();
//store it for the next selection
toToggle=selector;
I am using jQuery trying to validate that a checkbox has been checked before allowing a user to click on a 'Proceed' button.
The 'Proceed' button is set 'Enable = false' when the page loads.
So far I have tried :
// On check of the accept terms checkbox
$(".chkTandCs").change(function () {
// If checked, enable the Continue button, else, disable it.
if ($(this).is(":checked")) {
$(".lbnAcceptCurrent").removeAttr('disabled');
}
else {
$(".lbnAcceptCurrent").attr("disabled", "disabled");
}
});
This hasn't worked.
The checkbox and 'Proceed' button are inside a modal that opens when a different button has been clicked.
All help very much appreciated
Use prop() instead
$(".chkTandCs").change(function () {
$(".lbnAcceptCurrent").prop('disabled', !this.checked);
});
If the modal generates the markup dynamically, you'll need to delegate
$(document).on('change', '.chkTandCs', function () {
$(".lbnAcceptCurrent").prop('disabled', !this.checked);
});
and replace document with the closest static parent element of the modal
I have built a modal box, which uses a cover-all div background to fade out the content and allow the user to click off the box in order to close it. I do this by capturing all of the clicks, but filtering out any that are over the model box.
$('body').on('click', '.cover_slide > *',function(e){
e.stopPropagation();
});
$('body').on('click', '.cover_slide',function(){
helper.cover.close();
$('body').off('click', '.cover_slide');
});
I would like to be able to interact with some elements on my modal box with clicks, but I can't seem to figure out how to do that AND still have my 'click off to close' function. At present all clicks on the box are ignored.
There is no need to bind the click multiple times. Try using this snippet. Note that you might have to change the closest selector depending on what the element really is
$(document).bind("click", function(e) {
if($(e.target).closest("div").hasClass('coverSlide')) {
//do stuff if someone clicks the box
}
});