I have a javascript function that calls my javascript function, my func islike this:
function sugParitValidation(){
var isValid = false;
Ext.MessageBox.confirm(' ','Are you sure you want to do this?', function(btn){
if(btn == 'yes'){
isValid = true;
}
});
return isValid ;
}
My problem is - if statement and the return statment is happening, and only after that the confirm window being shown.
That way I can't react to what the user choosed.
how to solve this? tried allready use setTimeOut, no change at all....
i think you are trying to do something like this.
someFunction(){
if(sugParitValidation()){
//todo something
}
else{
//todo another thing
}
}
you can do this easyly with callbacks. This is the example.
someFunction(){
var messageCallback = function(btn){
if(btn === 'yes'){
//todo something
}
else{
//todo another thing
}
}
Ext.MessageBox.confirm(' ','Are you sure you want to do this?',
messageCallback);
}
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;
Just not sure why this doesn't work? the prompt work but nothing after.
function btn(){
prompt('do you like banana?');
if("yes"){
alert = "good";
}
else {
alert = "to bad, try again!";
}
};
Just condensing Sabar's answer and changing alert = ... to the method version (which I'm guessing is what you wanted), it could also be written as:
With a prompt(), which would return what the user enters (random is possible)
function btn(){
if(prompt('do you like banana?') == "yes"){
alert("good");
} else {
alert("to bad, try again!");
}
};
Or with a confirm()
function btn(){
if(confirm('Would you like banana?')){
alert("good");
} else {
alert("to bad, try again!");
}
};
You could take it even further if you like with:
function btn(){
confirm('Would you like banana?') ? alert("good") : alert("to bad, try again!");
};
Or even one step more into the realm of harder to read (as suggested by nnnnnn)
function btn(){
alert(confirm('Would you like banana?') ? "good" : "to bad, try again!");
};
prompt is a function which returns what the user typed, so
function btn(){
userAnswer = prompt('do you like banana?');
if(userAnswer === "yes"){
alert("good");
}
else {
alert("to bad, try again!");
}
};
this should work.
Also, alert is a function, and by writing alert = "asdad", you are instead making it just a string. Also, if("yes") just checks if the string "yes" is evaluated to true or false, and it is always evaluated to false. You may want to take a look at some online course for Javascript, for example this
Are you sure what you want is a prompt?
From your code i understand that it's a confirm.
function btn() {
var r = window.confirm("do you like banana?");
if (r == true) {
alert("good");
} else {
alert("to bad, try again!");
}
};
If you want a prompt then use this:
function btn() {
var r = prompt("do you like banana?", "I'm a monkey!!!");
if (r != null) {
alert("good. " + r);//good. I'm a monkey!!!
}
else
alert("to bad, try again!");
};
Prompt returns null if you have cancelled it, and it select value from textbox if you select ok.
function btn(){
var response = prompt('do you like banana?',"yes");
if(response){
alert("good");
}
else {
alert("too bad, try again!");
}
};
You have to save the value of prompt to a variable:
function btn(){
var response = prompt('do you like banana?');
if(response == "yes"){
alert("good");
}
else {
alert("too bad, try again!");
}
};
I want to pass variable "pageSetUp" from the on click event go through to function x and I keep going in circles.. I'm still a bit of noob when it comes to js. I'd really appreciate your help. Thanks!
$(".link").click(function() {
var pageSetUp = $(this).attr("ID");
});
function x(pageSetUp){
if(pageSetUp == page1){
//do something
}
else if(pageSetUp == page2){
//do something else
}else{
}
});
x();
you need call x with desired parameter.:
$(".link").click(function() {
var pageSetUp = $(this).attr("ID");
x(pageSetUp);
});
function x(pageSetUp){
if(pageSetUp == page1){
//do something
}
else if(pageSetUp == page2){
//do something else
}else{
}
};
Can this be done? I'm coming form php and trying to optimize jquery code I'm writing for validation and I'm repeating my self a lot.
This would be the function:
function errorHint(e,hint){
if(e.parent().hasClass("has-success")){
return false;
}else{
e.addClass('form-control');
e.parent().addClass('has-error');
e.parent().append('<span id="glyph-error" class="glyphicon glyphicon-remove form-control-feedback"></span>');
e.parent().append('<div class="error-hint-empty alert alert alert-warning"><span class="warning-glyph glyphicon glyphicon-warning-sign"></span>'+hint+'</div>');
if(e.parent().hasClass("has-success")){
e.parent().removeClass("has-success");
e.parent().find('span#glyph-ok').remove();
}
}
}
And I would call it like this:
if($('#username').length){
if(testuser == 0 && $('#username').val() !=='' && $('#username').val() !== null){
hint = 'That user already exists!';
errorHint($("#username"),hint);
formvalid = false;
}
}
Your function should be:
function Alert (text){
alert(text);
}
$(form).on("submit", function() {
var text = 'This is alert text';
Alert(text);
});
This is because there is an ambiguous call between javascript's native alert and your defined alert. So I changed the function name to Alert, which should work fine.
Just a side thought..
Why are you doing this?
You can just use alert(text).
I don't think what you are doing is called code optimization. It is called code lengthification ;)
My advice is if you aren't doing anything inside Alert() except again just alerting, you should be better off using native alert('some text');
I'm trying to add some validation to a form. I have a jQuery function that is doing exactly what I want:
jQuery('#post').submit(function() {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
return false;
});
However, I want to change it so that this function only runs if a radio button elsewhere on the page is selected. So I tried this:
if (jQuery('#top').checked) {
jQuery('#post').submit(function() {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
return false;
});
}
That doesn't work - the function doesn't get called even if #top is checked. Can anyone explain why? I'm used to PHP, and JavaScript often throws curveballs at me.
What does firebug or Chrome console tell you? You could try something like this:
$('#top').is(':checked')
as in (thanks RET):
jQuery('#post').submit(function() {
if ($('#top').is(':checked')) {
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}else{
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
}
}
return false;
});
try
$('#top').is(':checked')
but the function submit only binds the function and calls it every time submit is clicked.
so you must put the checked check in the submit function
jQuery('#post').submit(function() {
if(!$('top').is(':checked')){ return };
if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return true;
}
alert("Please set a Featured Image!");
jQuery('#ajax-loading').hide();
jQuery('#publish').addClass('button-primary-disabled');
return false;
});
Yeah, that logic won't quite do what you're hoping for. Try something like:
jQuery('#post').submit(function() {
if ($('#top').is(':checked')) {
// all your existing code
I could be wrong, but I don't think the answer given by #greener is going to work, because that will only declare the submit function if #top is checked at page create time.