$(document).ready(function () {
$("#close").click(function () {
var link = $(this).attr("href"); // "get" the intended link in a var
var result = confirm("Are you sure?");
if (result) {
document.location.href = link; // if result, "set" the document location
}
});
});
How would I use Bootbox dialogs instead of the JavaScript Dialogs?
EDIT
Well I've tried but nothing happens upon clicking the Ok button the bootbox dialog
$(document).on("click", "#close", function (e) {
e.preventDefault();
var link = $(this).attr("href"); // "get" the intended link in a var
bootbox.confirm("Are you sure you want to close this Incident? This operation cannot be reversed.", function (result) {
if (result) {
document.location.href = link;
} else {
console.log("user declined");
}
});
});
I would consider using a Bootbox Dialog, like below.
Bootbox Dialogs allow you to attach callback functions to the buttons, so you can specify a specific function to occur for each button.
I also included the line closeButton: false, so that the user cannot click a close button to dismiss the Dialog, and instead must either click Ok or Cancel.
$(document).on("click", "#close", function (e) {
e.preventDefault();
var link = $(this).attr("href"); // "get" the intended link in a var
bootbox.dialog({
closeButton: false,
message: "Are you sure you want to close this Incident? This operation cannot be reversed.",
buttons: {
cancel:{
label: "Cancel",
callback: doThisOnCancel
},
ok:{
label: "Ok",
callback: doThisOnOk
}
}
});
doThisOnCancel(){
console.log("user declined");
}
doThisOnOk(){
document.location.href = link;
}
});
Related
I had an issue with delete button.
ex: I press delete at driver 1 and choose no, after that I press delete at driver 2 and choose yes. driver 1 also deleted automatically.
here's my delete button code :
$(document).ready(function(){
$('#datatable tbody').on('click', '.delete', function(event) {
event.preventDefault();
$('.modal-header h4').html($(this).data('title'));
$('.modal-body p').html($(this).data('message'));
var url = $(this).data('url');
var datatable = $('#datatable').DataTable();
$('#confirmDel').on('click', function(e) {
e.preventDefault();
$.ajax({
headers: {
'X-CSRF-TOKEN': $('.modal-body input[name="_token"]').val()
},
url: url,
type: "DELETE",
success: function (data) {
console.log(data);
datatable.ajax.reload();
$.gritter.add(
{
title: "Record has been deleted succesfully",
});
},
error: function (data) {
console.log(data);
}
});
$('#modalDelete').modal('hide');
});
});
});
Any Idea ?
Do you use the same button with id ConfirmDel inside the modal?
Try unbinding the button event:
$('#confirmDel').unbind('click');
Before binding it again:
$('#confirmDel').on('click', function(e) { ...
I think this is an event bubble. Clicking on child element will fire the
click event on parent element also.
try something like this:
child.on('click', function(e){
e.stopPropagation();
});
I am working on such a application in which I have to choose question type in a popup window and after choosing type, I supposed to click OK button which will display a webGrid of multiple Questions. Since I have created popup and it's working well and while I click on OK button, the window get normal.
As my code for popup is
//Link
#Html.ActionLink("Contact Us", "AddDependentQuestion", "Question",
new { QuestionID = question.QuestionID },
new { #class = "openDialog", data_dialog_title = "Dependent Question" })
<script type="text/javascript">
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("#popup")
addClass("dialog")
.attr("id", $(this)
)
.appendTo("body")
.dialog({
close: function () { $(this).remove() },
modal: true
})
.load(this.href);
alert(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
I'm trying to implement a fancy Yes No confirm and I'm having problems getting the callback to work as needed. The example below is using Fancybox v2.
The problem with the code below is that the function "do_something" is being call when HREF "Test" is clicked and not being called when the user clicks #fancyConfirm_ok.
function fancyConfirm(msg,callback) {
var ret;
jQuery.fancybox({
'modal' : true,
'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyconfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
'afterShow' : function() {
jQuery("#fancyconfirm_cancel").click(function() {
ret = false;
//jQuery.fancybox.close();
$.fancybox.close();
})
jQuery("#fancyConfirm_ok").click(function() {
ret = true;
jQuery.fancybox.close();
})
},
'afterClose' : function() {
if (typeof callback == 'function'){
callback.call(this, ret);
} else {
var callback_type = typeof callback;
alert(callback_type);
}
}
});
}
Test
Your method "do_something('a', 'b')" will be executed whenever user clicks on the link and the returned result will be passed as the second parameter to the "fancyConfirm" method. This is why your parameter "callback" is always "undefined".
There is also a problem with fancyBox - "afterClose" callback gets called twice - before opening and after closing (this will be changed in the next release).
I would bind a click event on the link and call a callback when user clicks on one of the buttons, like - http://jsfiddle.net/xcJFY/1/
Not a big fan of the double callback method (Sorry Janis).
So while trying to find a solution to this myself played around with similar code and found that as long my return value wasn't defined inside the scope of the function it works fine, when my return value was defined inside the function I would get weird behaviour where it would work for a time then revert to undefined.
Effectively the return value needs to be outside the scope of the function, global, closure etc.
$(document).ready(function() {
$(".fancybox").on("click", function(e){
e.preventDefault();
confirm("Do you wish to continue?", true, function(resp) {
alert("You clicked " + resp);
});
});
});
function confirm(msg, modal, callback) {
$.fancybox("#confirm",{
modal: modal,
beforeShow: function() {
$(".title").html(msg);
},
afterShow: function() {
$(".confirm").on("click", function(event){
if($(event.target).is(".yes")){
ret = true;
} else if ($(event.target).is(".no")){
ret = false;
}
$.fancybox.close();
});
},
afterClose: function() {
callback.call(this, ret);
}
});
}
Here is a jsfiddle example
Thanks to Francisco Diaz who's post on Google Groups FancyBox forum pointed me in the right direction.
UPDATE:
Have now extended my example to use dynamically built buttons and custom return values, so you are not just limited to true and false.
$(document).ready(function() {
$(".fancybox").on("click", function(e){
e.preventDefault();
confirm("Do you wish to continue?", {
/*
Define your buttons here, can handle multiple buttons
with custom title and values
*/
buttons: [
{ class: "yes", type: "button", title: "Yes", value: "yes" },
{ class: "no", type: "button", title: "No", value: "no" },
{ class: "maybe", type: "button", title: "Maybe?", value: "maybe" }
],
modal: true
},
function(resp) {
alert("You clicked " + resp);
}
);
});
});
function confirm(msg, options, callback) {
$.fancybox("#confirm",{
modal: options.modal,
beforeShow: function() {
this.content.prepend("<p class=\"title\"></p>");
$(".title").html(msg);
for (i = 0; i < options.buttons.length; i++) {
this.content.append($("<input>", {
type: "button", class: "confirm " + options.buttons[i].class,
value: options.buttons[i].title
}).data("index", i));
}
},
afterShow: function() {
$(".confirm").on("click", function(event){
ret = options.buttons[$(event.target).data("index")].value;
$.fancybox.close();
});
},
afterClose: function() {
this.content.html("");
callback.call(this, ret);
}
});
}
Added jsfiddle example
I'm trying to create a dialog box that adds an item to a dropdownlist;
here's the code.
$(function () {
$('#applicantDialog').dialog({
autoOpen: false,
width: 600,
height: 500,
modal: true,
title: 'Add Applicant',
buttons: {
'Save': function () {
var createApplicantForm = $('#createApplicantForm');
if (createApplicantForm.valid()) {
$.post(createApplicantForm.attr('action'), createApplicantForm.serialize(), function (data) {
if (data.Error != '') {
alert(data.Error);
}
else {
// Add the new Applicant to the dropdown list and select it
$('#Applicant').append(
$('<option></option>')
.val(data.id_applicant)
.html(data.Applicant.Applicant_name)
.prop('selected', true) // Selects the new Applicant in the DropDown LB
);
$('#applicantDialog').dialog('close');
}
});
}
},
'Cancel': function () {
$(this).dialog('close');
}
}
});
$('#applicantAddLink').click(function () {
var createFormUrl = $(this).attr('href');
$('#applicantDialog').html('')
.load(createFormUrl, function () {
// The createGenreForm is loaded on the fly using jQuery load.
// In order to have client validation working it is necessary to tell the
// jQuery.validator to parse the newly added content
jQuery.validator.unobtrusive.parse('#createApplicantForm');
$('#applicantDialog').dialog('open');
});
return false;
});
});
My problem is that when the form is saved and the item is added, it never closes the dialog box. When I click on cancel, the list is not updated until I refresh the page.
Is it a problem with postback and how can I deal with that?
Thanks
I have a form where I need to display a confirm dialog to the user before saving.
I have done this by intercepting the form submit function as follows:
$("#my_form").submit(function(e) {
if ($("#id").val() > 0) {
var $dialog = $('<div></div>')
.html('Are you sure?')
.dialog({
autoOpen: false,
title: 'Save New Invoice',
modal: true,
buttons: {
"OK": function() {
$dialog.dialog('close');
$("#my_form").submit();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
e.preventDefault();
return false;
}
});
However, the OK button does not function correctly - the dialog does not close and the form is not submitted.
If I change the OK function as follows, then the dialog is closed and the alert is shown.
"OK": function() {
$dialog.dialog('close');
alert('form will be submitted');
},
So, I am guessing that this is something to do with the $("#my_form").submit(); method.
Isn't this like calling your form submit function again and again. I see you are attaching the function to submit functionality, and when you call the submit again,it is invoking the same function.
Your $("#invoice_edit_form") is some other form.Is it like asking one form to submit other form?
The problem you've got is that your submit handler always returns false and has e.preventDefault() too for good measure. Both of these will stop the form being submitted, regardless of whether the user clicked OK or Cancel.
You need to change the logic so that your modal confirmation is shown on a button click (or any other event), not on the form submission. Then, if the user clicks ok you can call the forms' submit() method.
$("#submitButton").click(function(e) {
if ($("#id").val() > 0) {
var $dialog = $('<div></div>')
.html('Are you sure?')
.dialog({
autoOpen: false,
title: 'Save New Invoice',
modal: true,
buttons: {
"OK": function() {
$dialog.dialog('close');
$("#my_form").submit();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
}
});