I have a Fancybox with two buttons in it: Merge and Cancel. Cancel closes the fancybox and Merge posts a form and wait for the page to reload. It takes a couple of seconds for the page to reload so after the user has pressed Merge I disable the Cancel button and I would like to set the option modal to true but I can't seem to find a way to set an option on a already opened fancybox. Does anyone have any suggestion on how to do this?
Playground: http://jsfiddle.net/vCtVq/
There is no simple option to toggle "modal" state, fancyBox is either modal or not. But I can think of two solutions.
1) Hide close button and unbind click event on the overlay -
$('#merge').click(function() {
$('#cancel').attr("disabled", "disabled");
$('.fancybox-item').hide();
$('.fancybox-overlay').unbind();
console.log('submit');
});
Demo - http://jsfiddle.net/am8d3/
2) Create a global variable, and check it using "beforeClose" callback. You can cancel closing by returning "false" -
var busy = false;
$(".o").fancybox({
//modal: true
beforeClose: function() {
if (busy) {
return false;
}
}
});
Demo - http://jsfiddle.net/MLjAT/
Fancybox is initilized once when the function is ran and cannot be reinitilized with different options I'm pretty sure. What you can do is create a flag and use some more traditional javascript to control the closing behavior. Set modal to true from the get go, and instead handle the close with a body click event. Then, have a true/false flag set determining if merge was clicked that does or doesn't allow the window to close on a body click. Something like this:
$('body').click(function(e) {
if (allowClose == true) {
$.fancybox.close();
}
})
I've updated you're fiddle with this solution here.
Related
I have a button similar to below
<button id="uniqueId" onclick="runMethod(this)">Submit</button>
What I'm trying to do is stop the runMethod from running, until after I've done a check of my own. I've tried using the stopImmediatePropagation function, but this doesn't seem to have worked. Here's my jQuery:
$j(document).on('click', '#uniqueId', function(event) {
event.stopImmediatePropagation();
if(condition == true) {
// continue...
} else {
return false;
}
return false;
});
Note: runMethod basically validates the form, then triggers a submit.
What you want to do, especially in the way that you want to do it, requires a some sort of workaround that will always be a bit fiddly. It is a better idea to change the way the button behaves (e.g. handle the whole of the click event on the inside of the jQuery click() function or something along those lines). However I have found sort of a solution for your problem, based on the assumption that your user will first hover over the button. I am sure you can extend that functionality to the keyboard's Tab event, but maybe it will not work perfectly for mobile devices' touch input. So, bear in mind the following solution is a semi-complete workaround for your problem:
$(document).ready(function(){
var methodToRun = "runMethod(this)"; // Store the value of the onclick attribute of your button.
var condition = false; // Suppose it is enabled at first.
$('#uniqueId').attr('onclick',null);
$('#uniqueId').hover(function(){
// Check your stuff here
condition = !condition; // This will change to both true and false as your hover in and out of the button.
console.log(condition); // Log the condition's value.
if(condition == true){
$('#uniqueId').attr('onclick',methodToRun); // Enable the button's event before the click.
}
},
function(){
console.log('inactive'); // When you stop hovering over the button, it will log this.
$('#uniqueId').attr('onclick',null); // Disable the on click event.
});
});
What this does is it uses the hover event to trigger your checking logic and when the user finally clicks on the button, the button is enabled if the logic was correct, otherwise it does not do anything. Try it live on this fiddle.
P.S.: Convert $ to $j as necessary to adapt this.
P.S.2: Use the Javascript console to check how the fiddle works as it will not change anything on the page by itself.
Your problem is the submit event, just make :
$('form').on('submit', function(e) {
e.preventDefault();
});
and it works. Don't bind the button click, only the submit form. By this way, you prevent to submit the form and the button needs to be type button:
<button type="button" .....>Submit</button>
Assuming there's a form that is submitted when button is clicked.
Try adding
event.cancelBubble();
Hence your code becomes:
$j(document).on('click', '#uniqueId', function(event) {
// Don't propogate the event to the document
if (event.stopPropagation) {
event.stopPropagation(); // W3C model
} else {
event.cancelBubble = true; // IE model
}
if(condition == true) {
// continue...
} else {
return false;
}
return false;
});
Your code is mostly correct but you need to remove J:
$(document).on('click', '#uniqueId', function(event) {...
You also need to remove the onClick event from the inline code - there's no need to have it there when you're assigning it via jQuery.
<button id="uniqueId">Submit</button>
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.
I have modal popup with an overlay written in html / js, everything works fine but if a user tabs enough they can get to the underlying form fields / buttons. Is there any good way of preventing this?
This is a rough idea but I'm hoping to inspire ideas rather than tell you exactly how to do it. I'll use a combination of pseudocode and pseudo-jquery-code:
function showMymodaldExample() {
//Show modal dialog (mymodal) code goes here
//
//Then we bind an event
$(document).bind('mymodal.keydown', function(e) {
if ( currently focussed element is not a child of mymodal ) {
set the focus previous element
}
});
}
And then remember to unbind mymodal.keydown when you destroy/hide the dialog
I just want to enable / disable onclick and href on elements (a or div).
I don't know how to do this.
I can disable onclick by adding an handler on click event, but the href is still available.
$(this).unbind().click(function(event){
event.preventDefault();
return;
});
Edit FOUND A HACK FOR A ELEMENTS
if ($(this).attr("href")) {
$(this).attr("x-href", $(this).attr("href"));
$(this).removeAttr("href");
}
If you return false on the onclick event, the href is irgnored.
This will go to Goole: <a
href="http://www.google.com"
onclick="alert('Go to
Google')">Test</a>
This will not go to Google: Test
Ok i've found a workaround : putting an overlay over the main div containing all the elements i wanted to disable ..
It just works.
You could try the following:
$('a, div').click(
function(e){
return false;
// cancels default action *and* stops propagation
// or e.preventDefault;
// cancels default action without stopping propagation
});
MDC documentation for preventDefault, jQuery documentation for event.preventDefault.
SO question: JavaScript event.preventDefault vs return false.
I'm unsure as to the problem of the "href still being available," since the click event is cancelled; however if you want to remove the href from a elements:
$('a[href]').attr('href','#');
will remove them (or, rather, replace the URL with a #).
Edited in response to comment (to question) by OP:
Ok, sorry ;) I just want to be able (by clicking on a button), to disable / enable all the links (click or href) over elements (div or a)
$('#buttonRemoveClickId, .buttonClassName').click(
function() {
$('a, div').unbind('click');
});
$('#buttonReplaceClickId, .buttonOtherClassName').click(
function() {
$('a, div').bind('click');
});
unbind(),
bind().
Try this to disable click:
$(this).unbind('click');
You can set the href attribute directly to "" to prevent the original from showing up in the status bar, if that's what you're asking.
$(this).unbind().click(function(event){
event.preventDefault();
}).attr("href", "");
Otherwise, a event.preventDefault() already stops links from being clickable.
I'm using SimpleModal (http://www.ericmmartin.com/projects/simplemodal/) and I have a form that displays in a dialog. What I want to do is be able to have a confirmation come up each time that the user tries to close the dialog (either by escape or clicking on the close icon) and asks them if they really want to close it without saving the form data. I tried the following:
onClose: function (dialog) {
if (confirm('Are you sure you want to close without saving?')) {
$.modal.close();
}
}
But it only triggers once. If you hit cancel then fails to close again later, which kind of makes sense. Anybody have a suggestion or solution? Any help would be greatly appreciated. :)
I looked at the source of SimpleModal for you and what you are wanting to do can't be done with their code. This is why:
Just prior to calling your custom callback onClose it calls this:
s.unbindEvents();
Which effectively says "This box is going to close whether you like it or not". It is not like a normal callback which you can cancel.
I would recommend instead using the jQuery UI Dialog, which you should find super easy to implement that functionality by using their beforeclose callback. You would simply use:
beforeclose: function(){
return confirm('Are you sure you want to close without saving?')
}
I got this working using sort of what jerone was trying but also rebinding the events:
onClose: function (dialog) {
if (confirm('Are you sure you want to close without saving?')) {
$.modal.close();
}else{
this.occb = false;
this.bindEvents();
}
}
This plugin needs to be updated to support the cancel of the close event. It looks like its not really being thought of as a event in the code. I would like it to behave just like any other js event.
I've also looked at the source and when the onclosed event is executed a occb flag is enabled.
What you can try (I haven't tried it) is to override this occb as it's passed to the this variable:
onClose: function (dialog) {
if (confirm('Are you sure you want to close without saving?')) {
$.modal.close();
}else{
this.occb = false;
}
}
Hope this helps.