sorry for this very basic question but it's makes me crazy, I don't understand what is not working on this very simple Jquery code.
I just want to change my "abc" boolean from false to true when clicking on my document and launch an alert when "abc" is true (just for exemple).
$(document).ready(function(){
var abc = false;
$(document).click(function(){
abc = true;
});
if (abc == true){
alert("ALERT");
//do some other things
}
});
Somebody to help ? Thanks
This is caused by JavaScript using an event model. This is your piece of code with detailed explanations:
var abc = false;
$(document).click(function() {
// Note that this function is attached to the `click` event
// It will be triggered only when the `click` event is triggered
// This means that the code inside it is not executed at the moment
abc = true;
});
// abc is false at the moment so the if statement won't execute
if (abc == true) {
alert("ALERT");
//do some other things
}
To fix this, just put the if statement inside the click handler and it will work fine.
$(document).ready(function() {
var abc = false;
$(document).click(function(){
abc = true;
if (abc == true){
alert("ALERT");
//do some other things
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your alert won't launch because it is not inside the click handler. It executes only once when document loaded and stays calm. You should move your checking inside click
$(document).click(function(){
abc = true;
if (abc == true){
alert("ALERT");
//do some other things
}
});
moreover, for boolean values you can directly write the varaible name inside if condition as if expect a boolean anyway
if (abc == true){
can be shorten to
if (abc){
So, after putting all your pieces together,
$(document).ready(function() {
var abc = false;
$(document).click(function() {
abc = true;
if (abc) {
alert("ALERT");
//do some other things
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
Hello everyone so I want to show and hide a button using jQuery, but only if a variable is true for example.
Ex:
var st1wch1 = false;
$(document).ready(function(){
$("#choice1").click(function(){
var st1wch1 = true
state1_1warrior()
});
});
$(document).ready(function(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
})
But for some reason it never hides, any ideas??? Thanks in Advance.
The most simple way to do it may be this:
$(document).ready(function(){
$("#choice1").click(function(){
$("button#choice1").toggle()
});
});
The logic you've implemented to show or hide the element is defined within the document ready event, which is raised before the user has a chance to click on the button and raise the event handler which toggles your global variable.
You probably wanted to hide and show when the element is clicked?
$("#choice1").click(function(){
$(this).toggle();
});
After changing the variable, you code does not go through the if else conditions. Put that show and hide condition inside a function like below
function toggleButton(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
}
and then call this function everytime you change the variable's value.
You must place your code inside the click handler.
I think you want to add at least 2 buttons later, and you want to toggle just a part of them or something like this.
var st1wch1 = false;
$(document).ready(function(){
$("#choice1").click(function(){
if(st1wch1 == false){
st1wch1 = true;
$("button#choice1").show()
}
else if(st1wch1 == true){
st1wch1 = false;
$("button#choice1").hide()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="choice1">choice1</button>
You can use toggle:
var st1wch1 = true;
$('#choice1').toggle(condition);
Side note: Don't use things like
if (st1wch1 === true)
Do:
if (st1wch1)
and (for the == false / === false case):
if (!st1wch1)
document.ready() is only called when the page initially loads, so it evaluates the if/else statement when you load the page and then never again. Clicking the element doesn't rerun the if else statement.
To get the behavior you want you can either do
$("#choice1").click(function(){
$(this).toggle();
});
or
$("#choice1").click(function(){
evaluateBoolean();
});
function evaluateBoolean(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
}
You can use toggleClass.
$('#button').toggleClass('hidden', condition);
Created css class with display: none;
$(document).on('click', '.add-button-prototype', function(){
if ($(this).closest('.collectionContainer').find('input[type="text"]').val() == '') {
return false;
}
});
Example 1 catch click event for all new added element with given class, but not prevent execution of the code.
$('.add-button-prototype').click(function(e){
if ($(this).closest('.collectionContainer').find('input[type="text"]').val() == '') {
return false;
}
});
Second example work only for loaded element with given class and not for new added after init of page. But it prevent execution of the code.
How to catch all element of same class, old and newly added and prevent execution of code if condition are true;
Besides return false add e.preventDefault();
So your code should look like:
$(document).on('click', '.add-button-prototype', function(e){
if ($(this).closest('.collectionContainer').find('input[type="text"]').val() == '') {
e.preventDefault();
return false;
}
});
When i mouseenter through the #infobox div the value is not assigned to true . the value is assigned as false always ! But the console.log("in") segment is executed. Is there s anything wrong with my code
var infoChk = false;
$("#infobox").mouseenter(function(){
console.log("in")
infoChk = true;
});
if(infoChk == false){
console.log("false")
}
else{
console.log("true")
}
Your code is correct but you are checking the value of the variable the wrong way.
To show you that your variable is being set correctly you can do like the code below.
var infoChk = false;
$("#infobox").mouseenter(function(){
console.log("in");
infoChk = true;
showVariableValue();
});
function showVariableValue() {
console.log(infoChk);
}
You can see it in action here in jsFiddle
I think you misinterpreted your own code.
The first code block is runned as an event. Every time your mouse enters div#infobox it will be runned. However, the if statement is runned once, returning false. This is because the code is runned immediately and your mouse is most likely OUT of the box.
Try:
var infoChk = false;
$("#infobox").mouseenter(function()
{
infoChk = true;
console.log('Entered!');
}).mouseleave(function()
{
infoChk = false;
console.log('Leaved!');
});
I have two methods
$('.btn-delete').click(function(){
//do A
//return false?
});
$('.btn-delete').click(function(){
//do B
});
How can I stop 'B' from happening when A returns false?
var whatDoesAReturn = false;
$('.btn-delete').click(function(){
if (something) {
whatDoesAReturn = true;
return true;
} else {
whatDoesAReturn = false;
return false;
}
});
$('.btn-delete').click(function(){
if (!whatDoesAReturn) {
// Do whatever
}
});
Use the jquery event's stopImmediatePropagation. That's exactly what it's for:
$('.btn-delete').click(function(e){
//do A
if (a is returning false)
e.stopImmediatePropagation();
});
$('.btn-delete').click(function(){
//do B
});
Why not to put altogether?
$('.btn-delete').click(function(){
//do A
// if true do B
});
You better make a single function and put condition to handle if that is not the solution you can set a flag in first event.
Using single event handler
$('.btn-delete').click(function(){
//do A
if(condition != false)
execute code of second event.
//return false?
});
Using flag
flag = true;
$('.btn-delete').click(function(){
//do A
if (something) {
flag = true;
else
flag = false;
return flag;
});
$('.btn-delete').click(function(){
if(!flag) return;
//do B
});
(Just in case anyone wants a non-jQuery solution).
This can't be done directly in plain JavaScript, because you can't be sure in which order the event listeners will be triggered.
According to the spec,
Although all EventListeners on the EventTarget are guaranteed to be
triggered by any event which is received by that EventTarget, no
specification is made as to the order in which they will receive the
event with regards to the other EventListeners on the EventTarget.
Then, one possibility is joining all handlers inside only one function.
But if that's not possible, you could use event delegation to a wrapper, and stop propagation if necessary:
<div class="btn-wrapper"><button class="btn-delete">Delete</button></div>
var btn = document.querySelector('.btn-delete');
btn.addEventListener('click', function(e){
// do A
if(cond) e.stopPropagation();
}, false);
btn.parentNode.addEventListener('click', function(e){
//do B
}, false);
I have a form that needs to get submitted. After clicking on submit I have a javascript alert/confirm that asks: Are you sure you want to submit the order?
If the user clicks "OK", I want to execute a JQuery method. But if they click "Cancel", I don't want to execute anything. Is there a way to do this?
Here's the JQuery I want to submit if they click "Ok":
<script>
$(document).ready(function() {
$('#saving').click(function() {
// do something
});
});
</script>
my button:
Save
The javascript popup:
function askUserIfTheyAreSure() {
var check = confirm("Are you sure you want to submit the order?");
if(check == true) {
document.forms["myform"].submit();
}
}
I suggest this way:
<script>
$(document).ready(function() {
$('#saving').click(function() {
if(confirm("Are you sure you want to submit the order?")){
document.forms["myform"].submit();
}else{
return false;
}
});
});
</script>
Do you mean, like this?
<script type='text/javascript'>
function askUserIfTheyAreSure(){
var check = confirm('Are you sure you want to submit the order?');
if(check == 1) {
// run you jQuery Function Here
}
else{
// do something else
return false;
}
}
$(document).ready(function(){
$('#saving').click(askUserIfTheyAreSure);
</script>
Really, I would use external JavaScript, so it's cached.
Just copy whatever you have inside "click" code into the "check==true" block.
It won't be executed if user clicks cancel.
function askUserIfTheyAreSure() {
var check = confirm("Are you sure you want to submit the order?");
if(check == true) {
// do something begin
// do something end
document.forms["myform"].submit();
}
}