Creating a confirmation box jquery php - javascript

I have a website where i have comments . now people can delete comments using .del button
$('.del').click(function(){
var id = $(this).attr('cmnt-id');
$.post(url,{
//data sent
},function(data){
//remove the comment div
})
});
Now what i want is a confirmation box to be appear on screen which has simply 2 options delete and cancel. When someone presses delete it deletes but when pressed cancel it returns false.
But i dont know how do i do it.
UPDATE
I have my own confirmation box and dont wanna use any PLUGINS
But how do i take em into action ??
updated fiddle

Try this:
if (confirm('Are you sure you want to delete this?')) {
//delete code, OK was pressed (confirmed), execute delete code
} else {
//cancel was pressed return false
return false;
}
No jquery needed nor fancy box.
If you need something fancy I would suggest using JQuery UI where you can use Dialog widget to have a confirm box.
UPDATE
var confirmed = false;
$('.del').click(function(){
//show your confirm dialog
});
$('.confirm .yes').on('click', function() {
//execute delete code
});
$('.confirm .no').on('click', function() {
//code to close your confirm dialog
});

Related

Modal dialog to show when link is clicked and button to point to window.location

I have a "Delete Account" link. I want to show a dialog box confirmation when this link is clicked.
See: http://jsfiddle.net/jPzj6/
The problem is that in this code, the confirmation "Are you sure you want to delete your account?" is already showing.
I also want to show the dialog box with the Delete button linking to:
window.location = bender.base_url + '?page=user&action=delete&id=' + bender.user.id + '&secret=' + bender.user.secret;
and the Close button to simply close the dialog box.
I wanted to make it look like this: http://jsfiddle.net/taditdash/vvjj8/
Would really appreciate any help. Thanks!
You should just copy code from example. Your code has lack of buttons identifiers
buttons: {
"Yes": function () {
$(this).dialog('close');
callback(true);
},
"No": function () {
$(this).dialog('close');
callback(false);
}
}
and for some reason, in your code buttons is array and in example it is object. Also, you have undefined value of bender, you should create object before fill it
var bender = {};

Confirm box when browser/Tag close button clicks

I have created my website for this I like to create confirm box when user clicks browser close button.....
So i created my coding as
window.onbeforeunload = bunload;
function bunload() {
dontleave = "Are you sure you want to leave?";
return dontleave;
}
By this coding I got confirm box for each and every time when browser get loading.....I need confirm box when user only clicks browser close button......
Can anyone give me a idea
Try adding an if condition like below to your code.
if(event.clientY < 0){
window.onbeforeunload = bunload;
function bunload() {
dontleave = "Are you sure you want to leave?";
return dontleave;
}
}
This worked for me on IE8.

Using jquery / javascript to create a popup confirm box

Here is the extract code of how to make a confim box when delete,
For html part:
A link is to trigger JS code , but it will trigger the php code at same time
For JS part:
popupbox is triggered
For php part:
Process the sql query, it should be ok
The problem are:
I should use js to trigger the php page?But how can i let the php page know that which ListID i want to delete?
What should i put in the html link?
Thank you
html
<a id="delete" href='delete.php?id=$set[ListID]'>Delete</a>
Js
$(function(){
$("#delete").click(function() {
$.messager.alert('Warning','The warning message');
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r){
alert('ok');
}
});
});
});
php
//connection db
INSERT INTO delete_list SELECT * FROM list WHERE ListID=?;
INSERT INTO delete_user_list SELECT * FROM user_list WHERE ListID=?;
INSERT INTO delete_require_attributes SELECT * FROM require_attributes WHERE ListID='2';
INSERT INTO delete_subscriber SELECT * FROM subscriber WHERE ListID=?;
INSERT INTO delete_subscriber SELECT * FROM subscriber WHERE ListID=?;
DELETE FROM list WHERE ListID = '1'
What if i want to include the list name in the popup box e.g. do you want to delete list A ,where list A is a variable already. The only thing is how can i append it to the popup box
"<tr><td>".$set['ListName']."</td><td>"
I don't know what $.messager does, but I suppose this should work
$(function(){
$("#delete").click(function(evt) {
evt.preventDefault();
var urlscript = this.href; /* read link url (e.g. delete.php?id=314159) */
$.messager.alert('Warning','The warning message');
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r) {
$.ajax(urlscript); /* make ajax call to that url with the right id */
}
});
});
});
and I supposing that your source code is actually showing smthg like
<a id="delete" href='delete.php?id=314159'>Delete</a>
so on the ajax call you're sending that id.
Try this:
if (confirm("Question?")) {
// IF OK CLICKED
$.get('delete.php?id=MyID', function(data) {
alert('List DELETED');
});
}
$("#delete").click(function(e) {
e.preventDefault();
var url = this.href;
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r){
location.href = url;
}
});
Let the link trigger the javascript code to show the popup window for delete confirmation. at the same time, you can update value of a hidden field in your page with the selected item id. When you user confirms the deleting by clicking on the "Yes" button in the confirm box. Read the value of the hidden input and then post that to the server (php) page to do the actual deletion from the database.
I wouldnt send the ID as a GET, else people can increment the value and delete your records?
<a class="delete" id="someId" >Delete</a>
$('.delete').click(function() {
var id = $(this).attr('id');
$.messager.alert('Warning','The warning message');
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
if (r) {
$.post('delete.php', {id:id}, function(response) {
//check the status of the reponse
});
});
});

jQuery Exit Popup Redirect?

So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});
This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18
Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});
Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.
Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}

Show modal when using javascript confirm

I have the following function that will show a modal:
confirmModal: function (message) {
// CODE TO SHOW MODAL HAS BEEN REMOVED FOR THIS QUESTION //
}
And because it's been namespaced it's called like: uiModal.confirmModal('Test message');
Inside the modal I have two buttons:
<button class="cancel">Cancel</button>
<button class="ok">Ok</button>
Now what I want to do is two things:
When I do something like: onsubmit="confirm('Are you sure?');" or onclick="confirm('Are you sure?');" it will show the modal instead of an alert box. Note that it needs to work for both links and form submits.
The two buttons in the modal need to either cancel or allow the request to happen. I have already got the cancel to close the modal fine so it's just a case of allowing or denying the request to happen.
Can anyone help? I've looked at some other questions on here and seen bits about using window.location($(this).attr('href')) but that would only work on links and not for the submit of a form.
I've also looked at doing window.confirm = uiModal.confirmModal('message'); but how would I use that in my example of an onclick or onsubmit
Thanks
This doesnt work because confirm is a blocking call (the javascript won't continue when the box is open), while your modal dialog isn't.
You can solve it by doing something like:
// have some temp var that holds confirmation state
var isConfirmed = false;
$("form").submit(function () {
// when someone tries to submit the form, verify whether it's confirmed
if (!isConfirmed) {
// show modal dialog
// prevent direct submit
return false;
}
});
// when hitting the OK button in the modal, change the confirmation state
$(".modal .ok").click(function () {
isConfirmed = true;
// and re-submit the form
$("form").submit();
});

Categories