How to submit edited data to object in angularJS? - javascript

When I press accept button task should be updated with new value which I wrote in input.Sad thing it doesnt work like I want.Do i need to add id`s to array with objects?
or maybe there is some good method to send a object to function.Here`s the code:
<tbody>
<tr ng-repeat="task in tasks">
<td>
<button class="btn btn-danger" ng-click="deleteTask(task)">Delete</button>
<!-- $index-->
</td>
<td>{{task.taskName}}</td>
<td>
<input type="checkbox" ng-model="statusCheck"> </td>
<td style="{{setStyleToTd(statusCheck)}}">{{statusChecker(statusCheck)}}</td>
<td>
<button class="btn btn-primary" ng-click="editTask(task)">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-offset-8 edit-box" ng-show="editBoxShow">
<form action="" class="form-inline">
<div class="form-group">
<lable>Edit task here:</lable>
<div class="input-group">
<input type="text" class="form-control" ng-model="editTaskInput"> </div>
<button type="button" class="btn btn-success" ng-click="acceptEdit()">Accept</button>
</div>
</form>
</div>
$scope.editTask = function(taskToEdit) {
$scope.editBoxShow = true;
$scope.editTaskInput = taskToEdit.taskName;
}
$scope.acceptEdit = function() {
$scope.editBoxShow = false;
$scope.taskToEdit = $scope.editTaskInput;
}

You can capture the index of your table data while clicking edit button and then update the table data by using this index in acceptEdit function.
$scope.editTask = function (taskToEdit) {
$scope.selectedIndex=$scope.tasks.indexOf(taskToEdit);
$scope.editBoxShow = true;
$scope.editTaskInput = taskToEdit.taskName;
}
$scope.acceptEdit = function () {
$scope.editBoxShow = false;
$scope.tasks[$scope.selectedIndex].taskName=$scope.editTaskInput;
}

Related

How do i get input values in a view that has multiple forms

i have a view that will have multiple forms based on the number of documents in the model. Each form will contain hidden inputs and a file control for uploading a file and a submit button to upload the file.
i desire to use an ajax call to submit the form how ever i am having issues getting the input values using javascript.
My View
#if (Model.Count > 0)
{
int i = 1;
foreach (var document in Model)
{
var formId = i;
var documentTypeIdInput = formId + "_documentTypeId";
var accreditationApplicationIdInput = formId + "_accreditationApplicationId";
var actionInput = formId + "_action";
<div class="card mb-3">
<div class="card-header text-left">
<b> #($"{i} . {document.TypeDocumentDescription}") </b>
</div>
<div class="card-body">
<div>
<table class="table table-sm text-left">
<thead>
<tr>
<th>Upload Date</th>
<th>File </th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var uploadDoc in document.UploadedDocuments)
{
<tr>
<td>#uploadDoc.CreateDate</td>
<td>#uploadDoc.FileName</td>
<td>
<a class="accordion-edit-btn" title="download file" target="_blank" asp-action="Download" asp-route-id="#uploadDoc.Id"><i class="fas fa-file-download"></i></a>
<a class="accordion-delist-btn" title="delete file" target="_blank" asp-action="DeleteFile" asp-route-id="#uploadDoc.Id" asp-route-actionOfOrigin="AddDocuments"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
}
<tr>
<td colspan="3">
<form id="#formId" class="form" action="UploadDocument" enctype="multipart/form-data" method="post">
<input type="hidden" name="documentTypeId" id="#documentTypeIdInput" asp-for="#document.DocumentTypeId" />
<input type="hidden" name="accreditationApplicationId" id="#accreditationApplicationIdInput" asp-for="#document.AccreditationApplicationId" />
<input type="hidden" name="action" id="#actionInput" value="AddDocuments" />
<div class="form-group">
<input name="file" type="file" multiple />
#* add validation summary per document *#
<button type="submit" title="upload document" class="btn btn-primary rounded submit"><i class="fas fa-file-upload"></i> Upload File</button>
#* *#
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
i++;
}
}
and my javascript sample
$(".submit").on("click", (e) => {
var $form = $(this).closest(".form");
var formId = $(this).closest('form').attr("id");
$form.addEventListener("submit", function (event) {
event.preventDefault();
alert($("#" + formId + "_documentTypeId").val());
})
})
on my javascript i cant get the id of the form or the value of the input from the form which i am submitting, how do i accomplish this
thanks in advance
Adding the submit event listener in the click event of the submit button seems odd.
Why not simply:
$(".form").on("submit", function(event){
event.preventDefault();
const formData = new FormData(this);
alert(formData.get("documentTypeId");
});
You can easily send the FormData object via jQuery's ajax method, or using the fetch API.

angularJs inifinite-scroll directive - shows only first 20 rows

I am trying to use inifinite-scroll directive for angularJS. The examples show usage of div inside the div, but in my case I'm trying to use it in a table. Here is my html:
<div class="scrolling-table-body">
<table class="table table-bordered table-hover table-list">
<thead search-table-header data-table="duplicatesTable"
data-search="sort(column)"
data-show-row-selector="true"
data-hide-sorting-indicator="true"
data-row-selector-click="selectAllRows(allSelected)"
data-column="column">
</thead>
<tbody infinite-scroll="loadMore()">
<tr ng-repeat="row in duplicatesArray"
ng-click="selectedDuplicateIndex=$index;"
ng-class="{selected: $index === selectedDuplicateIndex}">
<td style="text-align:center;">
<input type="checkbox"
name="checkRow"
ng-model="row.isSelected"
ng-change="selectRow(row, $index);" />
</td>
<td>
<span ng-if="row.barcode>0">{{row.barcode}}</span>
<span>{{$index}}</span>
<span class="pull-right">
<i class="fa fa-trash"
style="color:red;"
ng-click="removeRow($index)"
title="#Labels.delete"></i>
</span>
</td>
<td>
<div class="col-xs-12">
<input type="text"
name="assetNo"
id="assetNo"
ng-model="row.assetNo"
class="form-control"
ng-change="checkAssetNo(row)"
ng-maxlength="100"
sm-duplicate-validator
validate-duplicates="true"
error-message="row.errorMessage"
api-method="api/rentalEquipments/checkForDuplicate"
primary-key-value="row.equipmentId"
ng-model-options="{ debounce: { default : 500, blur: 0 }}" />
</div>
</td>
<td>
<input type="text"
name="serialNo1"
id="serialNo1"
ng-model="row.serialNo1"
class="form-control"
ng-maxlength="100" />
</td>
The above is used inside the modal form (bootstrap modal).
I initially load 10 rows into my duplicatesArray and I have the following code for loadMore function:
$scope.loadMore = function () {
const last = $scope.duplicatesArray.length;
if (last < $scope.numberOfDuplicates) {
for (let i = 1; i <= 10; i++) {
self.logInfo("Loading more duplicates...");
const newEquipment = {
equipmentId: (last + i) * -1,
descrip: self.model.descrip,
homeShopId: self.model.homeShopId,
ruleId: self.model.ruleId,
manufacturerId: self.model.manufacturerId,
modelId: self.model.modelId,
typeId: self.model.typeId,
levelId: self.model.levelId,
equipSize: self.model.equipSize,
bootMm: self.model.bootMm,
bindingManufacturerId: self.model.bindingManufacturerId,
bindingModelId: self.model.bindingModelId,
cost: self.model.cost,
bindingCost: self.model.bindingCost,
unitCost: self.model.unitCost,
errorMessage: "",
duplicateForm: true,
duplicatedId: self.model.equipmentId,
isDuplicate: true,
barcode: 0,
assetNo: "",
serialNo1: "", serialNo2: "", serialNo3: "", serialNo4: "",
isSelected: false
};
$scope.duplicatesArray.push(newEquipment);
}
}
};
There is currently an issue in this js code (I moved check for last < numberOfDuplicates before the loop thinking it may be the issue).
When I open my modal I see 20 items in the list and when I scroll I don't see more items.
Do you see what am I doing wrong?
Also, does it matter that I have the following markup for the modal:
<ng-form name="equipmentDuplicatesForm">
<div class="modal-body">
<div id="fixed-header-table">
<div class="fixed-header-bg">
</div>
<div class="scrolling-table-body">
table goes here
</div>
<div class="modal-footer hundred-percent padTop padBottom">
<button type="button" class="btn btn-warning"
data-dismiss="modal" aria-hidden="true"
ng-click="$dismiss()">
#Labels.cancel
</button>
</div>
</ng-form>

Cannot create property '' on string '' angularjs

I need to add rows and inputs dynamically, in addition to filling each entry in these fields, but at the moment of wanting to fill the input I get a error, with this add the rows:
$scope.detalleTransCover = {
details: []
};
$scope.addDetail = function () {
$scope.detalleTransCover.details.push('');
};
$scope.submitTransactionCobver = function () {
angular.forEach($scope.detalleTransCover, function(obj)
{
console.log(obj.cuenta);
});
};
now in the html:
<tr ng-repeat="detail in detalleTransCover.details">
<td>
<input type="text" class="form-control" ng-model="detail.cuenta">
</td>
<td>
<input type="text" class="form-control" ng-model="detail.debeDolar">
</td>
<td>
<input type="text" class="form-control" ng-model="detail.haberDolar">
</td>
</tr>
<button ng-click="addDetail()" class="btn btn-block btn-primary">
Agregar fila
</button>
<button ng-click="submitTransactionCobver()" class="btn btn-block btn-primary">
Agregar
</button>
on the html when I try to fill the input example "cuenta" haver error:
TypeError: Cannot create property 'cuenta' on string ''
When you push a new input to your array, you need to push an object not a string:
// wrong
$scope.addDetail = function () {
$scope.detalleTransCover.details.push('');
};
// right
$scope.addDetail = function () {
$scope.detalleTransCover.details.push({})
});
Strings can't have properties the same way objects can.

Focus lost on Pop-up dialog when browse for File uisng AngularJS pop-up modal

AngularJS boostrap pop-up modal code:
<div class="modal-header">
<h3 class="modal-title">Add Gallery</h3>
</div>
<div class="modal-body">
<input type="file" id="file1" name="file" class="filestyle" onchange="angular.element(this).scope().AddPhotoGallery(this.files)" data-buttonname="btn-primary" />
<span ng-bind="fileValidationMessage" style="color: red;"></span>
<div ng-show="showFileData || isUpdate">
<table id="fileTable" class="table table-striped">
<thead>
<tr>
<td ng-if="!isUpdate">File Name</td>
<td>Image</td>
<td>Message</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in fileObjectList">
<td ng-if="!isUpdate">{{obj.fileName}}</td>
<td><img ng-src="{{obj.fileImageUrl}}" alt="No Profile Picture shows" height="150" width="150" class="img-rounded img-responsive" /></td>
<td>{{obj.fileMessage}}</td>
<td><input type="button" value="Remove" class="btn btn-primary" ng-click="deletePhoto(obj.id)" /></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input type="button" class="btn1 btn-sm" ng-click="UploadFiles()" value="Upload Gallery" ng-show="isAddImage" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="close()">
Cancel
</button>
</div>
$scope.AddPhotoGallery = function ($files) {
$scope.isAddImage = true;
$scope.galleryValidationMessage = '';
var isValid = false;
// Update scenerio $scope.images.length > 0
if ($scope.images.length > 0 && $scope.images.length < 2) {
$scope.images.length++;
angular.forEach($scope.images, function (value, key) {
$scope.fileObjectList.push({
'id': $scope.fileCnt,
'fileMessage': 'File Added to Gallery',
'fileName': value.name,
'fileData': value
})
$scope.fileCnt++;
$scope.isUpdate = true;
});
}
else if ($scope.fileCnt < 2 && $scope.images.length == 0) {
angular.forEach($files, function (value, key) {
isValid = $scope.doFileValidation(value.name);
if (isValid) {
$scope.fileObjectList.push({ 'id': $scope.fileCnt, 'fileName': value.name, 'fileData': value,
'fileMessage': 'File Added to Gallery '
})
$scope.fileCnt++;
}
});
} else {
$scope.fileValidationMessage = "Cannot add more pictures. ";
}
if ($scope.fileCnt > 0) {
$scope.showFileData = true;
}
};
Issue:
When I click on browse for adding file the pop-up controller 'AddPhotoGallery' function call and push the data in fileObjectList. Table/Div is bind to 'showFileData' and it is true when fileCnt > 0 (as see in last line of 'AddPhotoGallery' function). The issue is table/div and the data inside it shows only when I click ANYWHERE on the pop-up screen. It seems that focus shifted to last action i.e. file browse dialog and it didn't come back to the pop-up dialog.
More Explanation:
if ($scope.fileCnt > 0) {
$scope.showFileData = true;
}
When the $scope.showFileData is true the div/table and the data inside it should show immediately but it is showing when I click ANYWHERE on the modal pop-up. I know the actual cause and that is focus doesn't come back to modal pop-up after browse.
Can anywhere suggest how to get the control/focus back to pop-up modal on after file added using File Browse?

Hot Towel/Knockout.js - HTML Display issue with observableArray

I am working with the following objects/structure: Course, SubCategory, SubUniversity, Category, SubCategory, CourseSchedule.
A course can have one and only one subcategory, but can be a part of many subuniversities (hence the CourseSchedule object with one Course and one SubUniversity).
Each SubCategory has one parent Category; each SubUniversity has one parent University.
I have a courseadd view and a courseedit view. Once the Course object is created with the courseadd view, SubUniversities (via CourseSchedules) can be added on the courseedit view.
When I try to add SubUniversites, the first appears twice.
When I add subsequent SubUniversites, they appear correctly with the first still being duplicated.
Here is the View Code
<section id="course-edit" class="view">
<h3 class="page-title" data-bind="text: title"></h3>
<div class="button-bar">
<button class="btn btn-info"
data-bind="click: goBack"><i class="icon-hand-left"></i></button>
<button class="btn btn-info"
data-bind="click: cancel, enable: canSave"><i class="icon-undo"></i> Cancel</button>
<button class="btn btn-info"
data-bind="click: save, enable: canSave"><i class="icon-save"></i> Save</button>
<button class="btn btn-danger"
data-bind="click: deleteCourse, disable: hasChanges">
<i class="icon-trash"></i> Delete
</button>
<i class="icon-asterisk" data-bind="visible: hasChanges"></i>
</div>
<div data-bind="with: course">
<div>
<label for="courseName">Name</label>
<input id="courseName" data-bind="value: courseName" placeholder="Course Name" />
</div>
<div>
<label for="category">Category</label>
<select id="category" data-bind="options: $parent.subcategories, optionsText: 'subCategoryName', value: subCategory"></select>
</div>
<div>
<label for="courseMaterialURL">Material URL</label>
<input id="courseMaterialURL" data-bind="value: courseMaterialURL" placeholder="http://" />
</div>
<div>
<label for="courseImageURL">Image URL</label>
<input id="courseImageURL" data-bind="value: courseImageURL" placeholder="http://" />
</div>
<div>
<label for="courseDescription">Description</label>
<textarea id="courseDescription" data-bind="value: courseDescription" placeholder="Course Description" rows="4"></textarea>
</div>
<div style="width:600px">
<div style="float:right">
<label for="courseUniversity"> </label>
<section id="courseScheduleNode" class="view-list" data-bind="foreach: courseSchedules" >
<article>
<div>
<span style="margin-right: 10px" data-bind="text: subUniversity().subUniversityName"></span>
<button class="btn btn-danger" data-bind="click: $root.removeSubUniversity" style="float:right"><i class="icon-remove"></i></button>
</div>
<br />
</article>
</section>
</div>
<div>
<label for="courseUniversity">Add University</label>
<select id="courseUniversity" data-bind="options: $parent.subuniversities, optionsText: 'subUniversityName', value: selectedSubUniversity, optionsCaption: ' '"></select>
<button class="btn btn-success" data-bind="click: $parent.addSubUniversity"><i class="icon-ok"></i></button>
</div>
</div>
</div>
</section>
This part of the viewmodel is the code for the add and remove onClick functions.
var addSubUniversity = function (selectedCourse) {
if (selectedCourse) {
var cs = datacontext.createCourseSchedule();
cs.courseId(selectedCourse.id());
cs.subUniversityId(selectedCourse.selectedSubUniversity().id());
selectedCourse.courseSchedules.push(cs);
save();
}
};
var removeSubUniversity = function (selectedCourseSchedule) {
if (selectedCourseSchedule) {
selectedCourseSchedule.entityAspect.setDeleted();
save().then(success).fail(failed).fin(finish);
function success() {
inflateCourseSchedules();
}
function failed(error) {
cancel();
var errorMsg = 'Error: ' + error.message;
logger.logError(errorMsg, error, system.getModuleId(vm), true);
}
function finish() {
}
}
};
The data is correct in the database, so this appears to be a knockout binding issue. What would cause the first value to bind twice?
Below is the key code. If subuniversity hides deleted rows. With subuniversity resolves the duplicate issue. The problem was caused by calling subuniversity().subuniversityname. The () broke the relationship between the bound item and the displayed item. When save was called the id was changed causing knockout to think it was a new item and bind it again causing the displayed collection to get out of sync with the databound collection.
<!-- ko if: subUniversity -->
<article>
<div>
<!-- ko with: subUniversity -->
<span style="margin-right: 10px" data-bind="text: subUniversityName"></span>
<!-- /ko -->
<button class="btn btn-danger" data-bind="click: $root.removeSubUniversity" style="float:right"><i class="icon-remove"></i></button>
</div>
<br />
</article>
<!-- /ko -->
Below is some more useful code. The add function adds the item to the collection waiting for save to be called. Since you have the cancel button it seems like it would be good if it was honored. The delete function cancels the add if the item was added in this context. Otherwise it sets it as deleted. Thanks to the if statement in the markup deleted items disappear from the list.
var addSubUniversity = function (selectedCourse) {
if (selectedCourse) {
var cs = datacontext.createCourseSchedule();
cs.courseId(selectedCourse.id());
cs.subUniversityId(selectedCourse.selectedSubUniversity().id());
selectedCourse.courseSchedules.push(cs);
}
};
var removeSubUniversity = function (selectedCourseSchedule) {
if (selectedCourseSchedule) {
if (selectedCourseSchedule.entityAspect.entityState.isAdded()) {
selectedCourseSchedule.entityAspect.rejectChanges();
course().courseSchedules.remove(selectedCourseSchedule);
}
else
{
selectedCourseSchedule.entityAspect.setDeleted();
}
}
};

Categories