javascript confirm() not working - javascript

This is the code that is not working... It just deletes the form without first prompting.
$(".delete").click(function () {
if(confirm('You honestly want to delete that student?')){
return deleteForm(this, "form");
} else {
return false;
}
});
See it all here: http://jsfiddle.net/broinjc/wR256/

Working fiddle
For those that haven't noticed, the first form can not be deleted (as intended), be sure to create a new form if you want to test the delete action.
You have two click handlers for the delete button. The first looks like this:
$(row).find(".delete").click(function () {
return deleteForm(this, prefix);
});
Change that to:
$(row).find(".delete").click(function () {
if(confirm('You honestly want to delete that student?')){
return deleteForm(this, "form");
} else {
return false;
}
});
Then remove the second click handler (the one shown in the question)

Try the following:
$(".delete").on('click', function () {
if(confirm('You honestly want to delete that student?')){
deleteForm(this, "form");
}
});

Your problem because you've created one more element a (class="delete") at the same position with the currently element a.
Just remove this line and your code work fine:
$('.item fieldset').append('<a id="del" class="delete button alert tiny" href="#" style="position: absolute; top: 8px; right:0;">X</a>');

Related

Toggle click function

Okay, so i successfully toggled a bool and some other options.
But whenever i make another click function for another button to toggle the bool to false, it doesn't work.
My code:
let managementbool = false;
$("#management").on('click', function(){
managementbool = true;
if(managementbool)
{
$(".dot1").hide();
$(".dot2").hide();
$(".topbar").hide();
$(".boostingtext").hide();
$(".mainbar").hide();
$("#container").hide();
$(".dot11").show();
$(".dot22").show();
$(".topbar1").show();
$(".boostingtext1").show();
$(".mainbar1").show();
}
});
$("#contracts").click(function () {
managementbool = false;
$(".dot11").hide();
$(".dot22").hide();
$(".topbar1").hide();
$(".boostingtext1").hide();
$(".mainbar1").hide();
$(".dot1").show();
$(".dot2").show();
$(".topbar").show();
$(".boostingtext").show();
$(".mainbar").show();
$("#container").hide();
});
First button to toggle it to true works, but whenever i click the button that sets it to false. Nothing happens.
You didn't add your function correctly. $("#contracts").on('click', function() { ... }); should work.
Also take a look at whether you really need your managementbool variable. When I click on #management you set it to true and thus always execute the code in your if-statement, making the if-statement redundant. In the code segment you show, it seems you never actually do anything based on the value of managementbool.
$("#show").on('click', function() {
$("#some_element").show();
});
$("#hide").on('click', function() {
$("#some_element").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="some_element">Test</div>

Using onclick on an <a> element

I have an a element containing an href attribute. Clicking on it would delete data so I want the user to confirm that action. The href attribute refers to a php file with an id of the data that will be deleted in the GET parameter. I've added an onclick attribute, that should execute the following piece of JS (it shows a Semantic UI modal that asks for confirmation):
confirmmodal = function () {
beforeunload = function () {
$('.ui.basic.modal')
.modal({
closable: false,
onDeny: function () {
return false;
},
onApprove: function () {
return true;
}
})
.modal('show')
;
}
}
But when I run this it still goes to the page that would delete the data (although I haven't built it yet, so nothing is deleted). Would there be an option that gives the onclick attribute priority over the href attribute somehow?
You need to add event.preventDefault() at the end of your code.
Eg:
Delete
function showDialog(e) {
// custom code to show dialog here
e.preventDefault();
}
Okay, I got there with a few tweaks on the script, taking gavgrif's comment into account as well.
I made the <a> element a little different, so it won't contain an href attribute anymore:
<a title="Delete post" onclick="confirmmodal(this)" data-postid="'. $row['postnr'] .'"><i class="large delete middle aligned icon"></i></a>
Now, if the icon is clicked, the postid is available for the JS as well, so we can just refer to that in the GET parameter when the confirm button is clicked:
confirmmodal = function (a) {
$('.ui.basic.modal')
.modal({
closable: false,
onDeny: function () {
return true;
},
onApprove: function () {
window.location.href = "deletepost.php?id=" + a.dataset.postid
return true;
}
})
.modal('show')
;
}
Which is a semi-ugly fix, but it's not that many more lines, and I don't know s*** about JQuery :)
Thanks for all the help, I almost got there with preventDefault() but I couldn't continue if the action was confirmed, so this is an easier solution.

OR condition for running function

I have button (".moreAlertsBtn") that run function when user click on it
I would like to run the same function if user click on another button that contain the id "#alertsBtn"
how do I add OR condition?
$(document).on('click','.moreAlertsBtn',function() { }
also - inside the function, can i add contision if user click on the first button and another if he click on the second?
Just separate them using comma(,) like this:
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() { });
can i add condition if user click on the first button and another if
he click on the second?
$(document)
.on('click','.moreAlertsBtn, #alertsBtn',function() {
if($(this).hasClass('moreAlertsBtn')) {
//.moreAlertsBtn clicked
} else {
//#alertsBtn clicked
}
});
how do I add OR condition?
You can use the comma, which in CSS is "or" (but keep reading):
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() { });
But:
also - inside the function, can i add contision if user click on the first button and another if he click on the second?
If you're going to do that, then it makes more sense to use separate handlers:
$(document).on('click','.moreAlertsBtn',function() { });
$(document).on('click','#alertsBtn',function() { });
But answering the question, yes, you can tell like this:
if (this.id === "alertsBtn") {
// It's #alertsBtn
} else {
// Must be .moreAlertsBtn
}
E.g.:
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() {
if (this.id === "alertsBtn") {
// It's #alertsBtn
} else {
// Must be .moreAlertsBtn
}
});
That works because jQuery will call your handler with this referring to the DOM element you "hooked" the event on (even when you're actually doing delegation, as you are in your examples).
You can use comma in-between selectors as follows :
$(document).on('click','.moreAlertsBtn,#alertsBtn',function() { }

jQuery first click addClass, second click redirect

I am trying to build a temporary (and fake) form validation.
On the form, if you click submit the first time, it adds a class of ".error" and a span to the required inputs. If you click submit again, I want it to redirect to another page.
I can't seem to figure out how to have two different functions on the same submit button. The first click needs to add a class, the second click should redirect.
Here's my code:
if($("button").hasClass('redirect')){
$("button").click(function(){
window.location.href="index.html";
});
} else {
$("button").click(function(){
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
});
}
you can do like this:
$("button").click(function(){
if(!$(this).hasClass('redirect'))
{
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
}
else
{
window.location.href="index.html";
}
});
maybe you should just use the same function? something like that :
$("button").click(function(){
if($("button").hasClass('redirect')){
window.location.href="index.html";
} else {
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
});
}
$("button").click(function(){
if($("button").hasClass('redirect')){
window.location.href="index.html";
} else {
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
}
});

How to execute .click() code when previous click binding finishes

I am trying to use a Twitter Bootstrap button group with data-toggle="buttons-radio" in my site. Bootstrap markup as follows.
<div class="btn-group program-status" data-toggle="buttons-radio">
<button class="btn">All</button>
<button class="btn">Active</button>
<button class="btn">Planning</button>
<button class="btn">End of Life</button>
<button class="btn">Cancelled</button>
</div>
I need to redirect to the same page with query depending on the pressed button. I tried to use following jQuery code to achieve this.
<script>
var sParamStr = '';
function addToParamStr(str) {
sParamStr += str;
}
function redirectToUpdatedLocation() {
$('.program-status > .btn.active').each(function () {
addToParamStr( '?status=' + $(this).text());
});
console.log(sParamStr);
window.location.href = "program" + sParamStr;
}
$document.ready(function () {
$('.program-status > .btn').on('click', function (e) {
redirectToUpdatedLocation();
});
});
</script>
But the browser always redirects to {site}/program without the query string. By commenting out window.location.href = "program" + sParamStr; line, I managed to observe that second click onwards, sParamStr getting appended properly.
It seems that, my code tries to read the text of the pressed button before, .button('toggle') method form bootstrap.js finished. Code worked as intended when I changed function as follows.
$document.ready(function () {
$( '.program-status > .btn').on('click', function (e) {
$(this).addClass('active');
redirectToUpdatedLocation();
});
});
While this method works for me right now, I would like to know the proper way to achieve this. i.e How to execute my code after previous click binding finishes?
UPDATE:
I found this link in the Twitter Bootstrap forum. Seems it is a known issue.
https://github.com/twitter/bootstrap/issues/2380
I'm not sure what Bootstrap's .toggle is doing exactly, but it seems like it does some sort of animation that completes with the setting of the active class. You can try enqueing your code instead:
$( '.program-status > .btn').on('click', function (e){
$(this).queue(function (next) {
redirectToUpdatedLocation();
next();
});
});
For example, click the div as it is being toggled: http://jsfiddle.net/9HwYy/
It also seems a bit silly to me to update every href instead of just the one you clicked on since you are changing the window location anyway.
try
$('.program-status > .btn.active').each(function(i,v){
v = $(v);
addToParamStr( '?status=' + v.text());
});
since im not sure "this" is working in your case.

Categories