I am using jsGrid to show data. I want to replace the default delete confirmation message with that of "Alertify".
I tried to replace deleteConfirm:"Are you sure?" with a function below but it shows an empty alert box and When I click on OK or CANCEL, it shows custom "Alertify" box that I wanted to show.
deleteConfirm: function(item){
alertify.confirm("Do you want to delete this work experience?",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
},
delete from database
deleteItem: function(item){
return $.ajax({
url: "<?php echo base_url('admin/delWork');?>",
data: item
});
},
},
I want to show custom("Alertify") dialog box instead of default confirm dialog box.
You need to set confirmDeleting to false and use something like his in jsgrid configuration:
confirmDeleting: false,
onItemDeleting: function (args) {
if (!args.item.deleteConfirmed) { // custom property for confirmation
args.cancel = true; // cancel deleting
confirm.showConfirm('Are you sure?', function() {
args.item.deleteConfirmed = true;
$grid.jsGrid('deleteItem', args.item); //call deleting once more in callback
});
}
},
Related
I'm trying to force submitting of my form, the problem is that I use bootboxjs
(that uses an asynchronous code) to make a confirmation dialog before submitting, this is exactly I want, also the required inputs are validated in that way.
This is the structure of my JS code:
$("#myForm").submit(function(e){
bootbox.confirm({
message: "Are you sure?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-danger'
},
cancel: {
label: 'NO, STOP!',
className: 'btn-primary'
}
},
callback: function (result){
if (result)
{
// Some code to set values to hidden inputs and another irrelevant stuff...
// The right command (that I didn't know) to force the form
}
}
});
return false;
});
How can I avoid this issue and preserve the validation of required inputs?
You can prevent the jquery event and use a native one to force a browser default submit when you are ready
$("#myForm").submit(function(e){
// store reference to form due to callback context
var form = this;
bootbox.confirm({
message: "Are you sure?",
buttons: {... },
callback: function (result){
if (result)
{
// Some code to set values to hidden inputs and another irrelevant stuff...
// Now use native submit
form.submit();
}
}
});
// prevents jQuery submit only
return false;
});
I have two date pickers, from date and to date, and a delete button.
On click of delete, validation should be done if from date is greater than to date and etc then the delete-confirmation popover should come displaying yes or no.
If clicked on yes, the delete callback should be called else it will return false!
How to do so??
Any help would be appreciated
This is my code
"#Delete click": function(el, ev) {
this.validate();
this.confirmation("#Delete", "Are you sure?", "Yes", "No", this.deleteConfirmCallback, this);
},
confirmation: function(element, text, yesText, noText, yesCallback, context) {
$(element).confirmation({
title: text,
singleton: true,
popout: true,
btnOkClass: "btn btn-sm default-color",
btnCancelClass: "btn btn-sm primary-color text-case ",
btnOkLabel: yesText,
btnCancelLabel: noText,
btnOkIcon: "glyphicon-tiny glyphicon-ok",
btnCancelIcon: "glyphicon-tiny glyphicon-remove",
onConfirm: function() {
yesCallback(context, this);
}
});
},
Blockquote
For the first time click I'm not able to get that delete-confirmation popup
Blockquote
Try some thing like this:
if('#btn').click(function(){
if($('#fromDate').val() > $('#toDate').val())
// You can also make a function to check this and call it here
{
// Open delete confirm
// Check if user select OK or cancel and make an ajax call to delete if use select delete option
}
});
you may try like this:
var from_date = $("#from_date").val();
var to_date = $("#to_date").val();
if(from_date > to_date) {
//true condition statement
// should be alert or confirmation
} else {
//false condition statement
// should be alert or confirmation
}
<script type="text/javascript">
var customDiv ="hello";
$(function () {
var $form = $("#authNotificationForm");
var startItems = $form.serializeArray();
startItems = convertSerializedArrayToHash(startItems);
$("#authNotificationSubmit").click(function (e) {
var currentItems = $form.serializeArray();
currentItems = convertSerializedArrayToHash(currentItems);
var itemsToSubmit = hashDiff(startItems, currentItems);
for (var item in itemsToSubmit) {
customDiv = "test";
}
});
$(".confirm").confirm({
text: "Are you sure you want update the following changes?" + customDiv,
confirm: function (button) {
// do something
},
cancel: function (button) {
// do something
},
confirmButton: "Yes I am",
cancelButton: "No",
post: true
});
</script>
All I am trying to do is on form load get the serializeArray of the form. Then after changing the fields again on submit click get a new serializedArray of form compare the 2 and get which fields were changed then on the confirmation box just show the field that were changed by the user. But the confirmation box is displaying hello instead of test.
It is my assumption that the confirmation box text is already loaded on document ready and it is never updated , so it always has the global variable value which is set on document ready.
(I am getting the updated values correctly so the serialization and the hashDiff functions are fine that not the issue the issue is only getting this values to the confirmation box.)
Thanks for the concern..
You're setting the text: option at load time. Changing customDiv later doesn't affect it because the concatenation was done earlier.
Instead of binding the confirmation dialog directly to the button, use $.confirm so you can pass arguments at the time of the call:
$(".confirm").click(function() {
$.confirm({
text: "Are you sure you want update the following changes?" + customDiv,
confirm: function (button) {
// do something
},
cancel: function (button) {
// do something
},
confirmButton: "Yes I am",
cancelButton: "No",
post: true
});
});
This question is continuation of the following question Add JSON data to the view that unfortunately ended up unresolved yet.
In my main view which has a form with 2 controls and placeholder for flexigrid I added the following at the bottom
<div id="add-edit-dialog" style="display: none" title="Add / Edit Client">
#Html.Partial("_ClientForm", Model)
</div>
The flexigrid pluglin instantiates in run-time and adds 3 buttons: Add, Edit, Delete.
For Edit button I need to get the current row information from the server and then display it in the Form. For Add button I do not need to go to the server (I think).
This is my current code for the Edit button:
function edit(com, grid) {
$('.trSelected', grid).each(function () {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row') + 3);
currentId = id;
$('#fntype').val('Edit');
var ClientName;
ClientName =$('.trSelected td:eq(2)').text();
var url = '/Client/Edit/' + id ;
$.getJSON(url, function (html) {
// setFormControls(data.Id, data.Role, data.Location, data.JobType,
// data.Description);
// alert(data);
$($dlg).html(html);
});
//location.replace(url);
RunModalDialog("Edit Client: " + ClientName);
});
So, it is going to Edit controller action and returns that same partial view _ClientForm with correct information passed as a model. If I look at the response result returned in FireBug I can see that the returned HTML is correct and all the textboxes have correct information in their values.
However, the dialog that opens looks exactly the same as the dialog for the Add button - in other words, all form controls come blank. I can not figure out what is wrong and why it is not working the way I want it.
This is what I have for the RunModalDialog:
var validator = $("#add-edit-form").validate();
var $dlg = $("#add-edit-dialog").dialog({
autoOpen: false,
show: "blind",
closeOnEscape: true,
resizable: true,
width: 1200,
height: 750,
minHeight: 600,
minWidth: 950,
buttons: {
"Save": function () {
if ($("#add-edit-form").valid()) {
// jobPost.setVals(txtId.val(), txtRole.val(),
// txtLocation.val(), txtJobType.val(),
// txtDescription.val());
$.ajax({
type: 'POST',
//data: JSON.stringify(clientInformation),
url: '/Client/Save',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
// insert new list into grid
$('#flexClients').flexAddData(result);
}
});
$(this).dialog('close');
} else return false;
},
Cancel: function () {
$(this).dialog("close");
clearForm();
if (validator)
validator.resetForm();
}
},
close: function () {
clearForm();
},
open: function () {
//$("#add-edit-dialog").parent().appendTo($("#add-edit-form"));
}
});
function RunModalDialog(title, url) {
if (title) {
$dlg.dialog("option", {"title": title });
}
if (url) {
$dlg.load(url).dialog("option", { "title": title }).dialog("open");
//$dlg.load(url, function () {
// var validator = $("#sform").validate();
// if (validator)
// validator.resetForm();
// $dlg.dialog("option", { "title": title }).dialog("open");
//});
} else {
$dlg.dialog("open");
}
}
The code with the load (and commented code) was another attempt to solve this problem. That sort of worked (the form displayed with the info), but the main Client view was also reloaded so I was seeing double grid.
Do you see what should I change in my code to get this thing working?
Thanks a lot in advance.
With Jazzen Chen from MS help we solved this problem. All I needed to do to display the data correctly was to change getJSON to just get jquery function. Now my form comes with data populated correctly and the next challenge will be to save the data.
I posted a blog post with what I have so far - hope it may help
http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/AJAX/asp-net-mvc-project-with
The work flow:
user click the button, a dialog box opens with a search form. An ajax post request is sent to the server, and get a json response. I get the callback on success handler. Now two issues.
the dialog closes upon success callback (successFn). I get the json response in the success call back, and I want the user to see the result and press close button to terminate the dialog,.
Soon after the dialog closes, a get request is sent to server. After closing the dialog by itself, the url is like http://localhost:8080/search?query= . I do not send any GET request explicitly
jQuery(document).ready( function(){
jQuery("#myButton").click( showDialog );
$myWindow = jQuery('#myDiv');
$myWindow.dialog({ width: 400, autoOpen:false, title:'Hello World',
overlay: { opacity: 0.5, background: 'black'},
modal: true,
/*open: function (type, data) {
// include modal into form
$(this).parent().appendTo($("form:first"));
}, */
buttons: {
"Submit Form": function() { $('form#myform').submit();},
"Cancel": function() {$(this).dialog("close");}
}
});
});
var showDialog = function() {
$myWindow.show();
$myWindow.dialog("open");
}
var closeDialog = function() {
$myWindow.dialog("close");
}
var successFn = function (response) {
var obj = JSON.parse(response);
$("#result").html('').html(obj.name);
}
var errorFn = function (xhr, ajaxOptions, thrownError){
$("#myform").parent().html('').html(xhr.statusText);
}
var query = $("input#query").val();
var dataString = 'query='+ query ;
$('form#myform').submit(function(){
$.ajax({
type: 'post',
dataType: 'json',
url: '/search',
async: false,
data: $("#myform").serialize(),
success: successFn,
error: errorFn
});
});
It would be a good idea to add method="post" to your form to avoid any accidental GET data being sent.
Adding return false; to the success function may stop the dialog from closing. I'll test this if I can.
Edit: also check that all your code is inside jQuery(document).ready( function(){
Hope that helps!
I think you just need to add return false.
"Submit Form": function() { $('form#myform').submit(); return false;},