I am now trying to add a dropdown into my editable html table, for the edit operation. I am using some JS code that I have used many time in my non ABP solutions. This is code that works. It is almost working here too in the ABP solution, but I am running into one issue.
[attachment=0:2bwqtg08]Screenshot (55).png[/attachment:2bwqtg08]
On the line with the red X, shown above, it keeps throwing an error that value is null. I have debugged this AJAX call, it reached my controller method and data is loaded into JSON object. You can see that the array is loaded with data on the right side panel. Yet when the above line in the JS code is reached, it keeps throwing NULL error. Is there something in the ABP template that is causing this behaviour/error?
I just tried this technique for another dropdown, for country and it is having the exact same issue.
Here is the exact error message I am getting and the response body from controller method.
Uncaught TypeError: Cannot read property 'value' of null
at eval (eval at <anonymous> (jquery.min.js:1), <anonymous>:77:82)
at Function.each (jquery.min.js:2)
at Object.success (eval at <anonymous> (jquery.min.js:1), <anonymous>:76:23)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at y (jquery.min.js:4)
at XMLHttpRequest.c (jquery.min.js:4)
{"result":
[{"disabled":false,
"group":null,
"selected":false,
"text":"--Please Choose--",
"value":"-"},
{"disabled":false,
"group":null,
"selected":false,
"text":"United States of America",
"value":"2"}],
"targetUrl":null,"success":true,"error":null,"unAuthorizedRequest":false,"__abp":true}
Thanks very much for the sample code, that was helpful! I have it working now, the app service method is getting called. I just need to fix a entity validation error now. Thanks again!
var _addressService = abp.services.app.address;
_addressService.updateAddress({
Id: aData[0],
AddressType: aData[1],
AddressLine1: aData[2],
AddressLine2: aData[3],
AddressLine3: aData[4],
City: aData[5],
StateId: 1,
CountryId: 1,
PostalCode: aData[8],
DefaultYN: aData[9]
}).done(function () {
alert("AddressSaved");
});
I understand how the call to the app service is made in the typical EditModal.js file (shown below). Can you tell me how I can use this same code in a totally separate JS file, that is not attached to a modal?
Also, I dont have a form tag, i just want to post the HTML table row data to my app service method. So not sure if I can use this stmt: _$tenantInformationForm.serializeFormToObject() with a table row?
var EditTenantModal = (function ($) {
app.modals.EditTenantModal = function() {
var _modalManager;
var _tenantService = abp.services.app.tenant;
var _$tenantInformationForm = null;
this.init = function (modalManager) {
_modalManager = modalManager;
_$tenantInformationForm = _modalManager.getModal().find('form[name=TenantInformationsForm]');
_$tenantInformationForm.validate();
};
this.save = function () {
if (!_$tenantInformationForm.valid()) {
return;
}
var tenant = _$tenantInformationForm.serializeFormToObject();
_modalManager.setBusy(true);
_tenantService.updateTenant(
tenant
).done(function () {
abp.notify.info(app.localize('SavedSuccessfully'));
_modalManager.close();
abp.event.trigger('app.editTenantModalSaved');
}).always(function () {
_modalManager.setBusy(false);
});
};
};
})(jQuery);
Ok I will check that out and see if I can implement it.
I have been working on alternate solution to this problem. I have implemented a DataTables GRID in my edit modal to hold all the addresses for the company entity. This datatable is fully editable and new rows can be added. The data tables provides a facility to make AJAX call to server side methods.
Can you tell me if I should implement a pure AJAX call to a new method in my controller for this update from the datatables grid OR should i use the ABP app service code method, where the form content is serialized and then posted to the AppService method? Is that possible?
Thanks very much for your help with Note issue!
I still have this issue with the sub-entity updates. Can you provide a suggestion on the issue described above?
Thanks for the reply!
It turns out that the Bootstrap_DatePicker and Bootstrap_DateTimePicker were not in the "libs" folder.
I added those folders and updated the script paths file and it finally worked!
I added it as shown below. It did not work, until I placed the code at the end of my script.
(function ($) {
app.modals.CreateNurseHomeModal = function () {
//Did not work here
//$('.datepicker').datepicker();
var _nurseHomeService = abp.services.app.nurseHome;
var _$form = null;
var _modalManager;
this.init = function (modalManager) {
_modalManager = modalManager;
//Did not work here
//$('.datepicker').datepicker();
_$form = _modalManager.getModal().find('form[name=CreateHome]');
_$form.validate();
};
this.save = function () {
if (!_$form.valid()) {
return;
}
var home = _$form.serializeFormToObject();
_modalManager.setBusy(true);
_nurseHomeService.createNurseHome(
home
).done(function () {
abp.notify.info(app.localize('SavedSuccessfully'));
_modalManager.close();
abp.event.trigger('app.createNurseHomeModalSaved');
location.reload();
}).always(function () {
_modalManager.setBusy(false);
});
};
};
//Works here, but shows JQuery datepicker
$('.datepicker').datepicker();
})(jQuery);
However the above code renders the JQuery calendar? [https://drive.google.com/open?id=0B5HAoiVVXzY7WG01cnk4bGZlMEE])
I am having this exact same issue on my Create Modal. I cannot get any of the date picker to display. Even the default date range picker is not rendering.
Here is a screenshot of the Google chrome console showing that all the scripts are present on the page, yet the calendar is not displayed? [https://drive.google.com/open?id=0B5HAoiVVXzY7d1liWTFmZG9kblk])
I am working on the MPA JQuery MVC solution.
Related to this same issue, I am also running into the same issue as posted here: [http://forum.aspnetboilerplate.com/viewtopic.php?p=6142#p6142])
When the "UpdateCompany" app service method is called, the address and contacts are posted back as empty.
Is that something that cannot be achieved with ABP template and EF?
I have a need to do this with multiple entities in my project.
For example, Company entity. When the user edits a company, they should be able to update the company, addresses and contacts for the company, all from the single edit modal. When they click save any changes to company, address or contacts needs to be saved into DB.
I copied that code from the ABP code in the editions app service, see below. I am using this exact same code for another entity and it works just fine there too.
//Edition app service method
//var editionItems = new ListResultDto<ComboboxItemDto>(editions.Select(e => new ComboboxItemDto(e.Id.ToString(), e.DisplayName)).ToList()).Items.ToList();
//country app service method
var countryItems = new ListResultDto<ComboboxItemDto>(countries.Select(e => new ComboboxItemDto(e.Id.ToString(), e.CountryName)).ToList()).Items.ToList();
Why does it not work here?
public async Task<List<ComboboxItemDto>> GetEditionComboboxItems(int? selectedEditionId = null)
{
var editions = await _editionManager.Editions.ToListAsync();
var editionItems = new ListResultDto<ComboboxItemDto>(editions.Select(e => new ComboboxItemDto(e.Id.ToString(), e.DisplayName)).ToList()).Items.ToList();
var defaultItem = new ComboboxItemDto("null", L("NotAssigned"));
editionItems.Insert(0, defaultItem);
Also, I could not get your suggested code to work either. It gives syntax error soon as the statement is coded.