I am working on a page that would allow users to enter an edit mode, in which dropdown forms appear when clicking on links, but I would like to disable this when users are not in editing mode. What I need to happen is for the data-dropdown attr to start as "disabled" but then be set to whatever id that corresponds with the form it should open, "drop25" for example. I have tried using both the attr and prop methods but haven't gotten very far. I can get them to start as disabled, but if I try to edit the attribute in a click handler it doesn't seem to work, even when the source says they change.
Here is what I have so far:
$(document).ready(function () {
$('a').attr('data-dropdown', 'disabled');
$(document).on("click", ":button.edit", function() {
//Enter Edit mode
if (editMode == false) {
editMode = true;
//when editing, enable dropdown
$('a').attr('data-dropdown', 'drop1');
}
else {
//turn off editing mode
editMode = false;
//disable dropdown
$('a').attr('data-dropdown', 'disabled');
}
});
});
Does anyone know if what I'm trying to accomplish is possible? Should I instead maybe just use another type of dropdowns?
Here is what I did to solve my problem
$(document).on('click', 'a', function () {
if (editMode == false && $('.f-dropdown').hasClass('open')) {
$(this).trigger('click');
window.location = $(this).attr('href');
};
As you can see, I added a click handler to all links, if the user isn't in edit mode and the foundation dropdown is open (which happens when you click on a link connected to a dropdown), trigger a click function on the link to close the dropdown and then visit the link that was clicked on.
Related
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've got a 'catch 22' in Chrome. I cannot programmatically select a radio button within a click event if any other function bound to the same event makes a call to preventDefault().
For example, I have a radio button with a parent element bound to a click event in which preventDefault() is called. If the radio button is clicked directly it is not checked. This is to be expected. However, I actually need the radio button to be selected so within code I attempt to check it in another function bound to the click event: $(this).prop('checked', true);.
Oddly, this doesn't work and I cannot remove the call to preventDefault() or disable propagation because it is in third party code that I need to run.
Is this a bug? Any suggested workarounds?
Here is an example:
http://jsfiddle.net/LnLuk4st/
UPDATE:
I have tried #RGraham's suggestion. His example clearly works, but oddly it does not work in the context of my code. #RGraham's code had a syntax error which made it appear to be working.
Here's some context:
// Remember kendo tab
$(".k-tabstrip").each(function () {
var $tabStrip = $(this);
var $tabs = $tabStrip.find(".k-tabstrip-items .k-item");
var tabCookie = "Current_Tab_" + $tabStrip.attr("id");
// On tab change, set cookie
$tabs.click(function () {
createCookie(tabCookie, $(this).attr("aria-controls"), 1);
$tabStrip.parent().css({ 'min-height': $tabStrip.parent().height() });
if ($(this).is('input')) { // Doesn't eval to true, 'this' is always a '.k-item'.
$(this).prop("checked", true);
} else {
// Never works if the input is clicked directly
$(this).find('input').prop("checked", true);
}
});
// #RGraham's suggestion...
$tabs.on('click', 'input', function() {
$(this).prop("checked", true); // Line reached but doesn't work either :(
});
// If cookie set, select tab
var tab = readCookie(tabCookie);
if (tab) {
$tabs.each(function () {
if ($(this).attr("aria-controls") == tab) {
$(this).click();
}
});
}
});
I still believe this behaviour to be a bug but I have found a workaround.
Capture the click of the radio button directly, prevent propagation, then programmatically click the parent of the radio button. This allows the third party code to run without applying preventDefault to the radio button.
// preventDefault bug fix.
$tabs.find("input").click(function (e) {
e.stopPropagation();
$(this).parent().click();
});
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 am trying to run the following code on IE but not able to get the 'event.which' as '3' / event that alert itself is not coming, when I right click.
$(document).bind('click', function(event) {
alert("event.which = "+event.which);
});
My Base requirement is to bind a click event as above and then if it is a anchor link on which i have clicked then I want to restrict a default options which we usually get on right click like 'Open in new window','BookMark this link' etc.
Thx
If you mean you want to disable right click then:
$(document).ready(function() {
//disable the right mouse click menu
$(document)[0].oncontextmenu = function() {return false;}
});
Did you mean something like that.
Below code should work: (tested in IE 7)
$(document).mousedown(function () {
if (event.button == 2 && event.srcElement.id == 'your element id') {
alert('right click not allowed');
return false;
}
});
if you want to block context menu on anchor element then
This will prevent the context menu from appearing on a particular element
$('a').observe("contextmenu", function(e){
e.stop();
});
So, if you wish to stop all anchor tags from showing a context menu
$('a').each(function(anch){
$(anch).observe("contextmenu", function(e){
e.stop();
});
})
i think you want something different then this but
see if this is your need
I have a list of radio buttons that I can toggle "yes" or "no" to using Javascript.
$(document).ready(function(){
$('#select-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', true);
$('input[type="radio"]', this).eq(1).attr('checked', false);
});
});
$('#deselect-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', false);
$('input[type="radio"]', this).eq(1).attr('checked', true);
});
});
});
this works just fine. Now I have a separate piece of code that detects when a user has changed something, and asks them if they want to leave the page.
var stay_on_page;
window.onbeforeunload = confirm_exit;
$('.container form input[TYPE="SUBMIT"]').click(function(){
stay_on_page = false;
});
$('#wrapper #content .container.edit-user form').change(function(){
stay_on_page = true;
});
function confirm_exit()
{
if(stay_on_page){ return "Are you sure you want to navigate away without saving changes?"; }
}
The problem is that if the user uses the first piece of functionality to toggle all radio buttons one way or another. The JS detecting form changes doesn't see that the form was changed. I have tried using .live, but to no avail. Anyone have any ideas?
I do something similar to this by adding change() (or whatever's appropriate, click() in your case I suppose) event handlers which set either a visible or hidden field value, then check that value as part of your onbeforeunload function.
So, my on before unload looks like:
window.onbeforeunload = function () {
if ($('#dirtymark').length) {
return "You have unsaved changes.";
}
};
And, or course, dirtymark is added to the page (a red asterisk near the Save button), when the page becomes dirty.