How can I disable window.onbeforeunload using jQuery class click function? - javascript

I want to make a button that toggles a new class when it's clicked, then when that new class is clicked, it sets goAway to true. Here's what I'm using, does anyone notice something that would prevent this? It works in all other onclick functions that have the line: goAway = true;
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
goAway = true;
});
});
I have also tried this below, but neither seem to work...
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
window.onbeforeunload = null;
});
});

You can try either one of this.
First one:
$(window).unbind('onbeforeunload');
Second one:
window.onbeforeunload = false;
I hope this works for you.
Update:
I noticed you placed onbeforeunload function inside click function.
Once try by placing this function out side of click function.
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}

Finally! I figured it out. Attached a JavaScript onClick event to the element set to toggle with jQuery ;)
The html button:
<button onclick="removeWarning()">This is the button</button>
Then the rest:
<script>
var goAway = false;
$("button").click(function(){
$(this).toggleClass('MyNewClass');
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
function removeWarning(){
if ($("button").hasClass('MyNewClass')){
goAway = true;
}
}
</script>

Related

disable function using javascript

I can not seem to find the code to disable a javascript function. What I want to do is have a javascript function and then I want to disable it. Here is the code:
<script>
var fooFunc = function fooFunction() {
alert("HELLO");
};
$(document).ready(function() {
fooFunc.disable();
});
</script>
<button onclick="fooFunc()">Button</button>
Basically, when the button is click the function should not work, it should be disabled. Thanks
"Disabling" fooFunc is the same as setting it to an empty function (not to null--that will cause an error when it is called the next time). In this case:
$(document).ready(function() {
fooFunc = function() { };
});
But I don't see how this is different from simply removing the onclick handler from the HTML element.
If you want the ability to disable/re-enable the function, you can write it like this:
fooFunc = function() {
function _fooFunc() {
if (!enabled) return;
alert("HELLO");
}
var enabled = true;
_fooFunc.enable = function() { enabled = true; };
_fooFunc.disable = function() { enabled = false; };
return _fooFunc;
}();
If you want to extend this to allow any function to be enabled/disabled, you can write a higher-order function, which takes any function as a parameter, and returns a function with enable and disable methods attached to it:
function disablable(fn) {
function inner() {
if (!enabled) return;
fn();
}
var enabled = true;
inner.enable = function() { enabled = true; };
inner.disable = function() { enabled = false; };
return inner;
}
Now you can define fooFunc as
var fooFunc = disablable(function fooFunction() {
alert("HELLO");
});
and the rest of your code will work as you want.
You can access the onclick property of the element..
<button id="id" onclick="fooFunc()">Button</button>
<script>
document.querySelector('#id').onclick = '';
</script>
If you don't want the function to work at all and be totally disabled then use the below.
If you want the function to work only under certain conditions then you will need if/else statements so it will work only when the conditions that you have set are met.
$(document).ready(function(){
$("button").onclick(function(event){
event.preventDefault();
});
});
You were going to define it back to undefined or null.
fooFunc=undefined;
You Should be doing this :) Change function definition on very first run and you are good to go.
<! DOCTYPE html>
<html lang="en">
<body>
<script>
var fooFunc = function() {
alert("HELLO");
fooFunc = function(){};
};
var enablefooFunc = function()
{
fooFunc = function() {
alert("HELLO");
fooFunc = function(){};
};
}
</script>
<button onclick="fooFunc()">Run once and Disable FooFunc</button>
<button onclick="enablefooFunc()">Enable FooFunc</button>
</body>
</html>

Reenable button onClick

I tried to disable my button with an onClick function using this:
document.getElementById("btn").onClick = null;
How can I reenable it back again?
example:
if(some condition)
document.getElementById("btn").onClick = null;
else
//reenable it again
Try like this
disable
document.getElementById("btn").disabled=true;
enable
document.getElementById("btn").disabled=false;
Simple way is that save old onclick's method to value (tempFn). Then you can reenable again.
var tempFn;
document.getElementById("btn2").onclick = function () {
if (!tempFn) {//some condition
tempFn = document.getElementById("btn").onclick;
document.getElementById("btn").onclick = null;
} else {
document.getElementById("btn").onclick = tempFn;
tempFn = null;
}
}
document.getElementById("btn").onclick = function () {
alert("btn");
}
<button id="btn">btn</div>
<button id="btn2">Disable/Enable</div>
You can do it with jquery
$(function(){
if(smth){
//Set button disabled
$("#btn").attr("disabled", "disabled");
}else{
$("#btn").removeAttr("disabled");
}

toggle() not working for content loaded with ajax?

$('.slideArrow').toggle(function (event) {
//some code
}, function (event) {
//some code
});
This works fine for content which are loaded on page-load.But the same function does not work for content loaded with ajax.It just does not intercept the click.
What should I do?
In an other scenario,i faced a same problem(not for toggle,for click) and sorted it this way.I dont know what to do for toggle?
$('.common-parent').on('click','.target-of-click',function(){
//some code
})
The flag method :
var flag = false;
$(document).on('click', '.slideArrow', function(event) {
if (flag) {
// do one thing
}else{
// do another thing
}
flag = !flag;
});
the data method
$(document).on('click', '.slideArrow', function(event) {
if ( $(this).data('flag') ) {
// do one thing
}else{
// do another thing
}
$(this).data('flag', !$(this).data('flag'));
});

add1 does not exist in DOM How to Add?

I am having an issue with java-script and an HTML form.
I have a form and next to the form is a button called "add" when I click add the second form appears. Next to form 2 is another button called add1, when I click this button I am wanting the third form to display. For some reason only the first add button is working.
Below is the code I have so far:
<style type="text/css">
#newservicesetup1, #newservicesetup2 {
display:none;
}
</style>
<script type="text/javascript">
function showform(theform) {
var showHides = new Array('newservicesetup1','newservicesetup2');
for (i=0;i<showHides.length;i++) {
document.getElementById(showHides[i]).style.display=
(document.getElementById(showHides[i]).id == theform) ? 'block' : 'none';
}
}
function loadBehaviors () {
if (document.getElementById) {
document.getElementById('add').onclick = function() { showform('newservicesetup1'); }
document.getElementById('add1').onclick = function() { showform('newservicesetup2'); }
}
}
window.onload = loadBehaviors;
</script>
Try adding a semicolon to the end of the assignments:
function loadBehaviors () {
if (document.getElementById) {
document.getElementById('add').onclick = function() { showform('newservicesetup1'); };
document.getElementById('add1').onclick = function() { showform('newservicesetup2'); };
}
}
You can check your Javascript for syntax using Online Javascript Lint.
why not just
document.getElementById('add').onclick = function() {
document.getElementById('newservicesetup1').style.display = 'block';
}
document.getElementById('add1').onclick = function() {
document.getElementById('newservicesetup1').style.display = 'block';
}
that will show the correct forms when you click the appropriate button. if you want them to disappear when clicking again, you will only need a slight modification
When loadBehaviors() is called, add1 does not exist in the DOM yet. Bind to the event handler after you add it to the DOM.

applying a var to an if statement jquery

Need to apply a var to a statement if its conditions are met, this syntax isn't throwing errors but its not working.
<script type="text/javascript">
$(document).ready(function(){
var action_is_post = false;
//stuff here
$(this).ready(function () {
if ($("#stepDesc0").is(".current")) {
action_is_post = true;
}
});
//stuff here
</script>
should I use something other than .ready? Do I even need the $(this).ready(function ()... part? I need it to apply the var when #stepDesc0 has the class current.
$(document).ready(function(){
var action_is_post = false;
$("form").submit(function () {
action_is_post = true;
});
if ($("#stepDesc0").is(".current")) {
var action_is_post = true;
}
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (!action_is_post)
return 'Using the browsers back, refresh or close button will cause you to lose all form data. Please use the Next and Back buttons on the form.';
}
});
<script type="text/javascript">
$(document).ready(function(){
var action_is_post=$("#stepDesc0").is(".current");
});
</script>
If you want the variable to be accessible outside the $(document).ready(function(){..., then you'll need to declare it outside the statement like this:
<script type="text/javascript">
var action_is_post;
$(document).ready(function(){
action_is_post=$("#stepDesc0").is(".current");
});
</script>
HTML (in order to test it):
Show value
$(function() {
var actionIsPost = $('#stepDesc0').is('.current');
alert( actionIsPost );
});
If you are adding the current class to #stepDesc0 on an event then put the .is check in the event handler.

Categories

Resources