We Keep Coding

Getting the value of a specific input that is dynamically added from an ajax call

I want to get the value of a specific input on an onclick event
This function retrieves all the data from my back-end
Javascript
function getProjects() {
$.ajax({
method: 'GET',
dataType: 'json',
data: {
functionToCall: 'project',
},
url: 'http://localhost/WBS/php/api/requests/get.php',
success: (response) => {
$.each(response, function () {
$.each(this, function (index, value) {
$('#project-body').append(
`
<tr>
<td>
<input class="form-control projectid" type="hidden" name="projectid[]" value="${value.projectid}">
</td>
<td>
<input class="form-control projectName" type="text" name="projectName[]" value="${value.title}">
</td>
<td>
<input class="form-control description" type="text" name="description[]" value="${value.description}">
</td>
<td>
<input class="form-control estimatedTime" type="text" name="estimatedTime[]" value="${value.Estimated_time}">
</td>
<td>
<input class="form-control actualTime" type="text" name="actualTime[]" value="${value.Actual_time}">
</td>
<td>
<a class="btn btn-info addTask" href="Overview.html?id=${value.projectid}" role="button">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
</a>
</td>
<td>
<button value="${value.projectid}" type="button" name="deleteProject" class="btn btn-danger deleteProject">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
</button>
</td>
</tr>
`
);
});
});
},
error: () => {
console.error('Something went wrong with the getProjects function');
},
});
}
I would like to get the value of this specific input
<td>
<input class="form-control projectid" type="hidden" name="projectid[]" value="${value.projectid}">
</td>
I tried using this
$(document).on('click', '.btn.btn-danger.deleteProject', () => {
let id = $(this).find('tr').closest('.form-control.projectid');
deleteProject(id); // this is an ajax call that deletes a project with said ID
});
But console.logging this returns undefined on all button clicks, i tried hardcoding it
$(document).on('click', '.btn.btn-danger.deleteProject', () => {
let id = $('.btn.btn-danger.deleteProject').val();
deleteProject(id);
});
And this returns a ID, the problem being it only ever returns the first ID all the time.
My question being, how do I get said input value from a onclick event?

closest tests the element itself and its ancestors for matching the selector.
What you need to do is: find closest tr to the button clicked and then inside of that tr find the input, so something like this:
$(document).on('click', '.btn.btn-danger.deleteProject', function() {
const id = $(this).closest('tr').find('.form-control.projectid').val();
deleteProject(id);
});

parameters passed to function is not working

I generated a random number called listingid in function createpost and pass it as an input to function showproductmodal as shown below
function creatpost(){
var index;
splitinput.forEach((num, index) => {
var listingid = (Date.now().toString(36) + Math.random().toString(36).substr(2, 5)).toUpperCase()
console.log(index)
return CatalogueDB.ref( splitinput[index]).once('value').then(function(snapshot) {
var resultcard = `
<form id="myform${index}">
<tr class="tr-shadow">
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(${key},${index},${listingid});">Submit</button>
</td>
</tr>
</form>
`
container.innerHTML += resultcard;
})
.catch(function(error) {
container.innerHTML += "";
var errorcard = `
<form id="myform${index}">
<tr class="tr-shadow">
<td style="width: 90px;">
<div id="ItemID${index}">${splitinput[index]}
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#productModal" onclick="showproductmodal(${splitinput[index]},${index},${listingid})">
Add Photos
</button>
</div>
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(${splitinput[index]},${index},${listingid})">Submit</button>
</td>
</tr>
</form>
`
container.innerHTML += errorcard;
})
});
})
function showproductmodal(id, index, listingid) {
console.log(id,index)
}
the problem now is whenever the button is clicked which triggers showproductmodal it says lisitingid is undefined
this is the console error output
index.html:1 Uncaught ReferenceError: JJLQ23008PJX0 is not defined
at HTMLButtonElement.onclick (index.html:1)
this is the sample parameters passed to the showproductmodal retrieved from the console
showproductmodal(42,0,JJLQ23008PJX0)
why is the listingid causing error even when it has been passed to the function? How do I correct this so that I can retrieve listingid in showproductmodal?

If the listingid is not a variable with the name JJLQ23008PJX0 it will throw an error.
Generally one need to make such id/value be treated as a string, and enclose it in quotes, likes this, where I added single quote's '
onclick="postitem(${splitinput[index]},${index},'${listingid}')"
Some value types works though, as numbers, the boolean keywords true/false, etc.,

You need to quote the random string:
<button type="button" class="btn btn-primary btn-md" onclick="postitem(${key},${index},'${listingid}');">Submit</button>

How to submit edited data to object in angularJS?

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;
}

assign value to selected input box in a row using Angular js

row add using angular code. Input box model name is "code". when click this input box a model open and when any row select using angularjs then there is a problem when I assign value using $scope.code it will assign to all input box in but I want to assign that value by which ng-click performed.
<table class="table table-bordered table-hover table-condensed">
<tr style="font-weight: bold">
<td style="width:35%">Code</td>
</tr>
<tr ng-repeat="user in users">
<td>
<!-- editable username (text with validation) -->
<span ng-show="editDel">
#{{ user.name || 'empty' }}
</span>
#{{code}}
<input type="text" name="" ng-model="code" ng-show="saveCancel" ng-click="getCode()">
</td>
<td style="white-space: nowrap">
<!-- form -->
<form ng-show="saveCancel" class="form-buttons form-inline">
<button type="submit" class="btn btn-primary">
save
</button>
<button type="button" ng-click="isCancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="editDel">
<button class="btn btn-primary" ng-click="editUser($index)">edit</button>
<button class="btn btn-danger" ng-click="removeUser($index)">del</button>
</div>
</td>
</tr>
</table>
$scope.users = [];
$scope.saveCancel = false;
$scope.editDel = true;
$scope.saveUser = function(data, id) {
//$scope.user not updated yet
angular.extend(data, {id: id});
return $http.post('/saveUser', data);
};
// remove user
$scope.removeUser = function(index) {
$scope.users.splice(index, 1);
};
// add user add row
$scope.addUser = function() {
$scope.inserted = {
id: $scope.users.length+1,
name: '',
status: null,
group: null
};
// $scope.taxNamePopup();
$scope.users.push($scope.inserted);
};
$scope.getCode = function(){
// alert(input_id);
this.code = 'nameValue';//**this assin value to selected box**
// jQuery("#tax_modal").modal("hide");
var request = $http({
method: "get",
url: base_url+"/load-tax",
data: {
},
}).then(function successCallback(response) {
jQuery("#tax_list").modal("show");
$scope.tax_data1 = response;
}, function errorCallback(response) {
});
}
$scope.getSelected = function(id,code,desc,rate){
alert(code);
this.code = code;//**but i want to assign value to selected input box from here**
jQuery("#tax_list").modal("hide");
}
$scope.safeApply(function() {
$scope.editUser = function($id){
this.saveCancel = true;
this.editDel = false;
}
});
$scope.isCancel = function(){
this.saveCancel = false;
this.editDel = true;
}

it is because ng-model is codefor every input.
Change it with following code example
<input type="text" name="" ng-model="code_$index" ng-show="saveCancel" ng-click="getCode($index)">
Now above code will change the ng-model unique for each input field and retrieve the value in getCode on the basis of index.

the model should be different for each ng-repeat item
EDIT change from getCode(user.code) to getCode(user)
<input type="text" name="" ng-model="user.code" ng-show="saveCancel" ng-click="getCode(user)">
use the param how ever you want ;)
$scope.getCode = function(user){
angular.forEach($scope.users, function (value, key) {
if (value.id == user.id) {
$scope.users[key]=user;
}
});
}

angularJS inline editor for multiple 'fields'

The following code-snippet enables me to edit the elements on a page, however, clicking on the P tags all the others change into inline-editor mode as well. How can I rework this script, such that it only enables the editor for the P tag clicked?
JS code:
function Profile($scope) {
$scope.person = {
name : "Test Name",
company : "Test",
role : "Test Role"
};
}
function Editor($scope) {
$scope.editorEnabled = false;
$scope.enableEditor = function() {
$scope.editorEnabled = true;
$scope.name = $scope.person.name;
$scope.company = $scope.person.company;
$scope.role = $scope.person.role;
},
$scope.disableEditor = function() {
$scope.editorEnabled = false;
},
$scope.save = function() {
$scope.person.name = $scope.name; //var = input.value
$scope.person.company = $scope.company;
$scope.person.role = $scope.role;
$scope.disableEditor();
}
}
HTML:
<div ng-controller="Profile">
<div ng-controller="Editor">
<h1 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.name}}</h1>
<span ng:show="editorEnabled">
<form class="form-inline">
<input type="text" size="30" name="name" ng:required ng-model="name">
<button class="btn btn-success" ng:click="save()">Ok</button>
<button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
</form>
</span>
<h5 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.role}} # {{person.company}}</h5>
<span ng:show="editorEnabled">
<form class="form-inline">
<input type="text" size="30" name="role" ng:required ng-model="role"> # <input type="text" size="30" name="company" ng:required ng-model="company">
<button class="btn btn-success" ng:click="save()">Ok</button>
<button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
</form>
</span>
</div>
</div>

The way I would most likely approach it would be to introduce new field into $scope that identifies which field is editable. Then your ngShow directive would contain an expression, something along these lines:
<span ng:show="editable == 'company'">
Your ngClick directive would look something like this:
<h1 ng:click="editor = 'company'">
Your cancel button would set this to null and your enable/disable editor functions would be gone. Bear in mind all this is top of my head, hopefully it points you in the right direction. I'll improve this answer if I get a chance.