How to disable saveRow event ui-grid - javascript

I am using ui-grid to display my table in UI. I have a requirement where I don't want table to auto-save the data. I want user to edit all data in a table and click a button to update all the edited data.
Above behavioud is working fine but only problem what I am getting is whenever a user edits a cell in a row, after few seconds, that cell becomes grey and uneditable. On browser cnsole I am getting this error:
A promise was not returned when saveRow event was raised, either nobody is listening to event, or event handler did not return a promise
Because of above JS error, whole row becomes un-editable.
How to tell ui-grid to don't save the data unless I click my button.
If I handle saveRow event then my button is not working. Please help me in this regard.
Here are the snippets of relevant codes:
var grid = {
data : 'hwData['+key+']',
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
enableGridMenu: true,
enableFiltering: true,
enableSelectAll: true,
enableColumnResize : true,
exporterCsvFilename: 'myFile.csv',
exporterMenuPdf: false,
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
onRegisterApi: function(gridApi){
$scope.gridApi.push(gridApi);
gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
if(oldValue == newValue){
return false;
}
$("#test").prepend('<font color= "red"> ' +colDef.name+ 'Edited ');
})
},
..............some more code
..............
$.ajax({
type:'POST',
url:'/HardwareInventory/ajax/storage/edit_owned_storage',
data: jsonHostNames,
dataType:"json",
contentType: "application/json; charset=utf-8",
success : function(result){
if(result.status == "Success"){
location.reload(true);
}else{
bootbox.alert("Either hostname is not correct or you don't have permission to edit this team's data");
}
},
statusCode: {
500: function(){
alert("Oops!, there has been an internal error");
}
},
complete: function(result){
}
});
}
});

Set "rowEditWaitInterval :-1" in your grid options and it will never call saveRow method by default , so you can save modified data in your custom method.
And you can access dirtyrows like this
var dirtyRows = $scope.gridApi.rowEdit.getDirtyRows($scope.gridApi.grid);

#Jha : Have a look on below url where I have just added fake save method, which will not save any data until you will define your save function inside it.
http://plnkr.co/edit/T0TLGLpLsk25vY6SUnzR?p=preview
// Save each row data
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
$scope.saveRow = function (rowEntity) {
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);
promise.resolve();
};
The above code will resolve your error"A promise was not returned when saveRow event was raised, either nobody is listening to event, or event handler did not return a promise". Do not forget to add "$q" in controller function. I hope your save function will also work properly.

Related

TypeError: oTable.fnReloadAjax is not a function - DataTables

i thought i will have no more problems with dataTables as its working now even the refresh.
Turns out some time it works in some places, but in some places it just give this stupid error.
TypeError: oTable.fnReloadAjax is not a function
Well i have a functon which adds new data in table, after success i want datatable to refresh.
it did work on other view but now As i have created this view, it is not working.
Im using Ignited Datatables.
i have a common.js file includes the datatables script. this script is working fine.
function commonDataTables(selector,url,aoColumns){
var responsiveHelper;
var breakpointDefinition = {
tablet: 1024,
phone : 480
};
oTable = selector.dataTable({
sPaginationType: 'bootstrap',
oLanguage : {
sLengthMenu: '_MENU_ records per page'
},
"autoWidth" : false,
"aoColumns":aoColumns,
"bServerSide":true,
"bProcessing":true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": url,
"iDisplayLength": 25,
"aLengthMenu": [[2, 25, 50, -1], [2, 25, 50, "All"]],
'fnServerData' : function(sSource, aoData, fnCallback){
$.ajax ({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
}); //end of ajax
},
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr("data-id",aData[0]);
responsiveHelper.createExpandIcon(nRow);
return nRow;
},
fnPreDrawCallback: function () {
// Initialize the responsive datatables helper once.
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(selector, breakpointDefinition);
}
},
fnDrawCallback : function (oSettings) {
// Respond to windows resize.
responsiveHelper.respond();
}
});
}
Then in my Codeigniter View file.
oTable = '';
//Data Tables Script Here.
var selector = $('#ManageTabs');
var url = "{{base_url()}}admin/configurations/listTabs_DT/";
var aoColumns = [
/* ID */ {
"bVisible": false,
"bSortable": false,
"bSearchable": false
},
/* Tab Name */ null,
/* Tab Order */ null,
/* Tab Desc */ null,
/* Actions */ null
];
commonDataTables(selector,url,aoColumns);
//End Of dataTables Script..
i am using oTable as global variable so defined the oTable outside the document.ready function
var oTable;
i know its a bad practice to use global variable but i wanted to find a work around to make the datatable refresh all the data.
Well this global variable Method did worked out for 1 view but in this next view i get the error which i told you already.
Here, below is the code of the button where in success it should have performed its duty but instead it gave error..
$('#createTabBtn').on('click', function(e){
//e.stopImmediatePropagation();
e.preventDefault();
var selector = $('#createTabModelForm');
HRS.formValidation(selector);
if(selector.valid()){
var formData = {
TabName : $("#cTabName").val(),
TabOrder : $("#cTabOrder").val(),
TabDesc : $("#cTabDesc").val()
};
$.ajax({
type:"post",
url:"{{base_url()}}admin/configurations/addNewTab/",
dataType:"json",
data: formData,
success: function(output){
if (output == true){
oTable.fnReloadAjax();
}
}
});
//Do Stuff After pressing the Create Button.
// Close the Modal
$('#addNewTabModal_ManageTabs').modal('hide');
// Reset All the TextBoxes and CheckBoxes
$("#createTabModelForm")[0].reset();
// Reset/Empty All the Select2 Dropdowns
//jQuery('.select2-offscreen').select2('val', '');
}
else{
//The Else Portion if you want Something else to Happen if not validated Form
}
});
Please can anyone know the best way to refresh the dataTables..
OMG, i forgot to add the fnReloadAjax.js file. i added that in first view but forgot to add in this view..
so anyone if face any problem like this, just see if the js file is attached.
being careless cost me my time but eventually problem solved.
But still there is a issue of Global Variable i mean i use global variable to refresh the grid.
if anyone has better option to use this fnreloadajax function. plz share.

$.when(ajaxCall) Versus success

I have the following code inside my asp.net MVC view:-
$('body').on("click", "#transferserver,#transfersd,#transferfirewall,#transferrouter,#transferswitch", function () {
$("#showoptions").dialog({
title: "Assign Selected Records To New Rack",
width: 'auto', // overcomes width:'auto' and maxWidth bug
maxWidth: 600,
height: 'auto',
modal: true,
fluid: true, //new option
resizable: false
});
var ajaxCall = $.ajax({
url: '#Url.Content("~/Rack/ShowTransferSelectedDialog")',
data: {
rackfrom: "#Model.Rack.ITsysRackID",
assettype: $(this).attr('id')//get the id for the clciked link, so that the submit button will call the associted action method.
},
type: 'get',
success: function (html) {
$('#showoptions').html(html);
$("#showoptions").dialog("show"); //This could also be dialog("open") depending on the version of jquery ui.
}
});
$.when(ajaxCall)
.then(function (data) { showDialog(data); });
});
I have the following questions:
What are the differences between the $when(ajaxcall) and on success ?
In my above code if I remove the $.when(ajaxCall) the dialog box will still be displayed . so is there any need to have it?
Thanks
EDIT
But one benefit i find for using $.when(ajaxCall) is that i have defined a custom authorization attribute as follow:-
[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public class CheckUserPermissionsAttribute : AuthorizeAttribute
{
protected override bool AuthorizeCore(HttpContextBase httpContext)
{
}
protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)
{
if (filterContext.HttpContext.Request.IsAjaxRequest())
{
var viewResult = new JsonResult();
viewResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
viewResult.Data = (new { IsSuccess = "Unauthorized", description = "Sorry, you do not have the required permission to perform this action." });
filterContext.Result = viewResult;
}
}
}
currently if the user clicks on the link to display the dialog box and he is not authorize to do so , he will receive a jAlert containing the unauthorized message as follow:-
![enter image description here][1]
but if i remove the $.when(ajaxCall), then the user will not receive the unauthorization message , and instead the dialog will be blank .. so can anyone advice ?
1) This is the definition of jQuery when
Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
It make no sense to use it for a single ajax call, you want to use it for 2 or more so you wait for them to finish before executing some code.
2) I don't know what showDialog does but your dialog already shows because in your success handler you have $("#showoptions").dialog("show");. Again, no need at all to use when here

Get data from the server and display in the Edit Form

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

jquery ui dialog cancel for ajax request

Im trying to send multiple pieces of information via a form submit. On this submit I would like to return false (cancel page request as it has been ajax) and close the form. Unfortunately close seems to also do return, true i assume.
So that the post request doesn't fail. This leaves the dialog still on the screen.
And if I call $("#dialog-form").dialog("close"); then return false does not run and the page changes.
If anyone knows how to fix this or if im doing something wrong it would be very helpful:
javascript:
$('#modifyConsoleForm').submit(function(evt) {
$.ajax({
type : 'POST',
url : jQuery("#modifyConsoleForm").attr("action"),
data : jQuery(this).serialize(),
dataType : "json",
success : function(data) {
hideError();
},
error : function(data) {
setError('modify of console failed');
}
});
$("#dialog-form").dialog("close");
return false;
});
and my dialog initialisation:
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
I have also tried always returning false in the dialogs close but it didnt seem to work.
Am I missing something?
Try using event.preventDefault() to stop the page changing
eg:
$('#modifyConsoleForm').submit(function(evt) {
evt.preventDefault();
$.ajax({
type : 'POST',
url : jQuery("#modifyConsoleForm").attr("action"),
data : jQuery(this).serialize(),
dataType : "json",
success : function(data) {
hideError();
},
error : function(data) {
setError('modify of console failed');
}
});
$("#dialog-form").dialog("close");
return false;
});
Closing the dialog and returning true/false should be done when the ajax request has been finished, in the success and error functions.
It is also wise that you put an activity indicator while you run ajax requests and hide/remove it once you got the response from the server, this way users know that there is a process going on.

jQuery: Can't retrieve an attribute of a dynamically created DOM element

Here's the situation: I'm writing a simple AJAX application that performs CRUD functions. When the user double clicks on a particular element, the element changes into a text box so that they can edit inline. When the text box loses focus (code for which is below), the value of the textbox gets POSTed to a PHP script that updates the database.
All is groovy except for one thing. When I create a new record, which gets popped onto the top of the list with AJAX, I can't edit that record without refreshing the page. I mean, the edit looks like it's been committed, but when you refresh, it reverts back to the original. After refreshing, there are no issues.
To boil it down: When I try to run the following code on newly created rows in my table (both in the database and on the page), the edit appears to be made on the page, but never makes it to the database.
//Make changes on FOCUSOUT
$('#editable').live('focusout', function(){
var parentListItem = $(this).parents('li');
var theText = $(this).val();
var parentListItemID = parentListItem.parents('ul').attr('id');
$(this).remove();
parentListItem.html(theText);
parentListItem.removeClass('beingEdited');
$.post("databasefuncs.php?func=edit", { postedMessage: parentListItemID, fullTextContent: theText },
function(result){
if(result == 1) {
parentListItem.parents('ul').animate({ backgroundColor: 'blue' }, 500).animate({ backgroundColor: '#eeeeee' }, 500);
} else {
alert(result);
}
});
});
I suppose you are not binding the event to the new DOM Element loaded via AJAX.
Your problem is that the post executes but the function you target (func=edit) never fires, the params you are sending after the question mark are never read by your php, you are sending a post request and wanting it to behave like a get by attaching parameters to the URL, change your request to:
$.ajax({
type: "POST",
url: "databasefuncs.php",
data: {func: "edit", postedMessage: parentListItemID, fullTextContent: theText},
success: function(data, textStatus, jqXHR) {
if(textStatus === "success") {
parentListItem.parents('ul').animate({ backgroundColor: 'blue' }, 500).animate({ backgroundColor: '#eeeeee' }, 500);
}
else {
alert(textStatus);
}
}
});
Now in your PHP you have $_POST["func"] = "edit";
Hope this is clear and it helps. Cheers.

Categories