Made all the fields editable on click with angularJS - javascript

Here is the HTML, in which there is ng-repeat with which the list is fetched, and ng-readonly which has been freezed initially, and in JS on click funtion its released
<tr ng-repeat= "employeeDetail in employeeDetails">
<div ng-readonly="isReadonly">
<td><a><span>{{employeeDetail.empName}}</a></td>
<td>
<div ng-if="employeeDetail.departmentName">
{{employeeDetail.departmentName}}
</div>
<div ng-if="!employeeDetail.departmentName">
Not Specified
</div>
</td>
<td>
{{employeeDetail.empEmail}}
</td>
<td>{{employeeDetail.empContact}}</td>
<td>
<i class="fa fa-edit" ng-click="updateEmp()">
</td>
</div>
</tr>
And here is the JS file, attached to it, what I want is to make all the fields editable on click,
$scope.isReadonly = false;
$scope.addEmployeeType = function(){
var employeeDetail = new employeeDetailApi();
$scope.employeeDetails = employeeDetail.list;
}
$scope.updateEmp = function (){
$scope.isReadonly = true;
console.log("update Employee");
}

try it...
<tr ng-repeat= "employeeDetail in employeeDetails">
<div ng-click="isReadonly==true">
<td><input type="text" ng-value="employeeDetail.empName" ng-readonly="isReadonly"></td>
<td><input type="text" ng-value="employeeDetail.departmentName" ng-readonly="isReadonly"></td>
<td><input type="text" ng-value="employeeDetail.empEmail" ng-readonly="isReadonly"></td>
<td><input type="text" ng-value="employeeDetail.empContact" ng-readonly="isReadonly"></td>
<td>
<i class="fa fa-edit" ng-click="updateEmp()">
</td>
</div>
</tr>

Just update your HTML as -
<div ng-readonly="isReadonly" ng-click="!isReadonly">
That's it!

Related

Change text in table cell when link in another cell on the same row is clicked

I have table that is populated with items from a database. There is a column to "tick" each item, which calls to the database to change the status of that item to "Valid" - that part works. To save me having to refresh the page though, I would like to then update the text on the page after the ajax call so that it reads "Valid" instead of submitted. What is the correct code to achieve this? Where am I going wrong? Without success, I have also attempted to get the tick to go green once clicked.
<div class="form-group">
<div class="row">
<div class="table-responsive col-md-6">
<h4><i class="glyphicon glyphicon-check"></i> Summary</h4>
<hr />
<table id="stationCount" class="table table-bordered table-hover">
<tr>
<th>ID</th>
<th>Place</th>
<th>Submission Date</th>
<th>Status</th>
<th>Confirm</th>
</tr>
<tr>
<td>
<p id="lblId" class="form-control-static" contenteditable="false">
159
</p>
</td>
<td>
<p id="lblPlaceName" class="form-control-static" contenteditable="false">
Somewhere
</p>
</td>
<td>
<input type="hidden" data-val="true" data-val-required="The SurveyId field is required." id="Items_0__SurveyId" name="Items[0].SurveyId" value="159" />
<p id="lblSubmittedOn" class="form-control-static" contenteditable="false" title="27/03/2018 11:04:47">
27/03/2018
</p>
</td>
<td class="status" id="159">
<p asp-for="Submitted">
Submitted
</p>
</td>
<td>
<a href='#' class='btn btn-default ConfirmLink' style="color: #808080 " data-url='/Controller/ValidateSurvey' data-id="159">
<i class="fa fa-check"></i>
</a>
</td>
</tr>
<tr>
<td>
<p id="lblId" class="form-control-static" contenteditable="false">
3
</p>
</td>
<td>
<p id="lblPlaceName" class="form-control-static" contenteditable="false">
Somewhere else
</p>
</td>
<td>
<input type="hidden" data-val="true" data-val-required="The SurveyId field is required." id="Items_5__SurveyId" name="Items[5].SurveyId" value="3" />
<p id="lblSubmittedOn" class="form-control-static" contenteditable="false" title="21/01/2018 00:00:00">
21/01/2018
</p>
</td>
<td class="status" id="3">
<p asp-for="Submitted">
Expired
</p>
</td>
<td>
<a href='#' class='btn btn-default ConfirmLink' style="color: #808080" data-url='/Controller/ValidateSurvey' data-id="3">
<i class="fa fa-check"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
$(function() {
//Document.ready//
//link up event handler
$(".ConfirmLink").click(function() {
// Get the id from the link
var recordToConfirm = $(this).attr("data-id");
var postToUrl = $(this).attr("data-url");
$.ajax(postToUrl, {
type: "post",
data: {
"id": recordToConfirm
},
dataType: "json"
}).done(function(data) {
// Successful requests get here
});
if ($(this).css('color') === '#808080') {
$(this).css('color', '#008000');
} else {
$(this).css('color', '#808080');
}
$("#" + recordToConfirm + " td.status").html('Valid');
});
});
I have set up a jsfiddle:
https://jsfiddle.net/a4zhpt7L/4/
To do everything you want, change some things:
Change if ($(this).css('color') === '#808080') to if ($(this).css('color') == 'rgb(128, 128, 128)'), because jQuery returns a rgb code instead of a hex code.
Change $("#" + recordToConfirm + " td.status").html('Valid'); to $("td.status#" + recordToConfirm).html('Valid');, because the td.status was placed incorrectly.
I hope this also fixes your ajax problem.

Change quantity of product using jquery ajax

I have a shopping cart and a page that shows all products in a table. I am able to remove products, but I want to be able to change their quantity as well.
My table consists of an input field that you can change the quantity in, when clicking on an 'update' cart button below, I am sending the productname and the quantity to my PHP script. The problem is, it always posts the first product.
Probably because all have the same classname, how can I fix that?
This is what my table looks like:
<div class="col-md-8">
<div class="kl-title-block clearfix text-left tbk-symbol--line tbk-icon-pos--after-title">
<h2 class="tbk__title montserrat fs-34 fw-semibold black winkelmandtitle">Uw Winkelmand</h2>
<span class="tbk__symbol ">
<span></span>
</span>
<h4 class="tbk__subtitle fs-22 fw-thin">Bent u niets vergeten?</h4>
</div>
<div class="table-responsive">
<table class="table carttable">
<thead>
<tr>
<th>Verwijder</th>
<th>Afbeelding</th>
<th>Product</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
</tr>
</thead>
<tbody>
<tr>
<td>×</td>
<td>
<a href="baden/bad-13" class="product-title">
<img class="attachment-shop_thumbnail" src="images/defaultimage.jpg" alt="Bad 13" title="Bad 13">
</a>
</td>
<td>
<a href="baden/bad-13" class="product-title">
Bad 13
</a>
</td>
<td>€ 1500</td>
<td>
<div class="quantity">
<input type="number" step="1" min="0" name="quantity" id="Bad 13" value="1" title="Qty" class="input-text qty quantityclass text" size="4">
</div>
</td>
<td>€ 1500</td>
</tr>
</tbody>
<tbody>
<tr>
<td>×</td>
<td>
<a href="baden/bad-14" class="product-title">
<img class="attachment-shop_thumbnail" src="images/defaultimage.jpg" alt="Bad 14" title="Bad 14">
</a>
</td>
<td>
<a href="baden/bad-14" class="product-title">
Bad 14
</a>
</td>
<td>€ 800</td>
<td>
<div class="quantity">
<input type="number" step="1" min="0" name="quantity" id="Bad 14" value="1" title="Qty" class="input-text qty quantityclass text" size="4">
</div>
</td>
<td>€ 800</td>
</tr>
</tbody>
<tbody>
<tr>
<td>×</td>
<td>
<a href="baden/bad1" class="product-title">
<img class="attachment-shop_thumbnail" src="cms/images/bad.jpg" alt="Bad 1" title="Bad 1">
</a>
</td>
<td>
<a href="baden/bad1" class="product-title">
Bad 1
</a>
</td>
<td>€ 1000</td>
<td>
<div class="quantity">
<input type="number" step="1" min="0" name="quantity" id="Bad 1" value="1" title="Qty" class="input-text qty quantityclass text" size="4">
</div>
</td>
<td>€ 1000</td>
</tr>
</tbody>
</table>
<input type="submit" class="button updatebutton" name="update_cart" value="Wijzig winkelmand">
</div>
</div>
And this is my jquery script that fires an ajax post.
//Wijzig winkelmand met het aantal producten
tpj('.cartsection').on('click', '.updatebutton', function(event) {
var $edit = tpj('.quantityclass').attr('id'),
$aantal = tpj('.quantity').find( "input[name='quantity']" ).val(),
url = 'includes/cartoverzicht.php';
var posting = tpj.post( url, { edit: $edit, aantal: $aantal} );
posting.done(function( data ) {
var content = tpj( data );
tpj( "#cartresult" ).empty().append( content );
});
});
The problem is, when I look in network this is always posted no matter what product I clicked:
edit:Bad 13
aantal:1
How can I fix that?
Can I maybe post all quantities to my php script? What would be the best solution?
You are hitting problems because you are only ever grabbing the first selector. You have also designed your API to only send one update when it looks like you want to send the whole updated set.
Below is the way to go if you want to update the quantities for the whole cart.
$('.updatebutton').on('click', function(event) {
var elements = $('.quantity input[name="quantity"]'),
url = 'includes/cartoverzicht.php',
postBody = [];
for (var i=0; i<elements.length; i++) {
var element = $(elements[i]);
postBody.push({
edit: element.attr('id'),
aantal: element.val()
})
}
var posting = $.post( url, JSON.stringify(postBody) );
posting.done(function( data ) {
var content = $( data );
$( "#cartresult" ).empty().append( content );
});
});
The issue is here:
var $edit = tpj('.quantityclass').attr('id'),
you are using a class selector to get the value, it always return the first element value. Instead use this
See this example:
$(document).ready(function(){
$('.list').click(function(){
console.log( $('.list').html() );
});
$('.listing').click(function(){
console.log( $(this).html() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
First list (It always return the first element value)
</p>
<li class="list">One</li>
<li class="list">Two</li>
<li class="list">Three</li>
<p>
Another List (It always return the clicked element value)
</p>
<li class="listing">One</li>
<li class="listing">Two</li>
<li class="listing">Three</li>

get id from a table, with a outside button

well i have a html table, and a button next to it, i try to get the id from the table when the user click that button.
This is the HTML
<table id="table_domExtra2_pro" class="col m12 bordered striped centered ">
<thead>
<tr>
<th>No.</th>
<th>PROPIETARIO DEL INMUEBLE</th>
<th>REGIMEN DE PROPIEDAD</th>
<th>COMO SE ACREDITA LA <br>POSESION DE LA PROPIEDAD</th>
<th>SUPERFICIE DE <br>LA UNIDAD</th>
</tr>
</thead>
<tbody>
<tr>
<td class="count">
</td>
<td>
<input name="propietario" id="propietario" type="text" class="validate" required>
</td>
<td>
<input name="reg_propiedad" id="reg_propiedad" type="text" class="validate" required>
</td>
<td>
<input name="pose_propiedad" id="pose_propiedad" type="text" class="validate" required>
</td>
<td>
<input name="sup_unidad" id="sup_unidad" type="text" class="validate" required>
</td>
</tr>
</tbody>
</table>
<div class="add_icon col s1 m6 ">
<a id="btn_agregar_pro" class="btn waves-effect red">Agregar</a>
</div>
<div class="add_icon col s1 m6 ">
<a id="btn_eliminar_pro" class="btn waves-effect red">Eliminar</a>
</div>
This is the js
$('#btn_eliminar_pro').on("click", function(){
var idTable3 = $(this).parent().closest("table").attr("id");
var trs4 = $("#"+idTable3+" tr").length;
if(trs4 > 2){
$("#table_domData_pro tr:last").remove();
$("#table_domExtra_pro tr:last").remove();
$("#table_domExtra2_pro tr:last").remove();
}
});
I try with .prev() to, but Im really lost, i have other tables in the document and the js just select other table, not the one previus to the button, thanks a lot for your help :D
Use siblings() of the div to find the closest table. The below gets the id of the table. I have just added siblings() to your existing code.
var idTable3 = $(this).parent().siblings().closest("table").attr("id");

Trouble Accessing scope variable in ng-template under script

I am trying to design inline editing template using angular.I have followed this tutorial
http://blog.shubhamsaxena.com/creating-simple-inline-editing-with-angularjs/
My Code is
<table class="table">
<tbody>
<tr class="table-row" ng-repeat="admin in admins" ng-include="getTemplate(admin)">
<script type="text/ng-template" id="display">
<td class="table-img">
<img src="images/in.jpg" alt="" />
</td>
<td class="table-text">
<h6>{{admin.firstname}} {{admin.lastname}}</h6>
<p>{{admin.email}}</p>
<p>{{admin.phone}}</p>
</td>
<td>
<span class="fam">{{admin.dept_name}}</span>
</td>
<td class="march">
<button class="btn-transparent btn" ng-click="editAdmin(admin)"><i class="fa fa-edit fa-2x"></i></button>
</td>
<td>
<button class="btn-transparent btn"><i class="fa fa-remove fa-2x"></i></button>
</td>
</script>
<script type="text/ng-template" id="edit">
</script>
</tr>
</tbody>
</table>
angular js code
$scope.getTemplate = function (admin) {
if (admin.id === $scope.selected.id){
$scope.template = 'edit';
}
else{
$scope.template = 'display';
}
return $scope.template;
};
$scope.editAdmin = function (admin) {
$scope.selected = angular.copy(admin);
};
But when I run this it gives me 404 error in console
www.ip-address/dashboard/principal/display
"display" is my script id you can verify in the 1st snippet.
My question is why it is searching "display" id in the url.
scope variable admins has data but it do not accessed when I write under script.
Please help.
404 means not found
$scope.getTemplate = function (employee) {
if (employee.empID === $scope.selected.empID){
return 'edit';
}
else return 'display';
};
getTemplate if the the Id already exist then it will open in Edit script or else will show in display script
HTMl
<tbody>
<tr ng-repeat="employee in employees" ng-include="getTemplate(employee)">
<script type="text/ng-template" id="display">
<td>{{employee.empName}}</td>
<td>{{employee.empEmail}}</td>
<td>{{employee.empSalary | currency:"₹"}}</td>
<td>{{employee.active | active}}</td>
<td>
<button type="button" class="btn btn-primary" ng-click="editEmployee(employee)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="deleteEmployee(employee)">Delete</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model=employee.empName class="form-control input-sm"/></td>
<td><input type="text" ng-model=employee.empEmail class="form-control input-sm"/></td>
<td><input type="text" ng-model=employee.empSalary class="form-control input-sm"/></td>
<td>
<select class="form-control input-sm" ng-model=employee.active>
<option value='1'>Yes</option>
<option value='0'>No</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary" ng-click="updateEmployee(employee)">Save</button>
<button type="button" class="btn btn-danger" ng-click="reset()">Cancel</button>
</td>
</script>
</tr>
</tbody>

Form is presenting same data in php while loop

I am trying to get an edit form to work with the loop in the php. I have a delete button and it works just fine. The edit form keeps presenting only the first row in the table. In firebug, it shows that all the other forms are there with the correct unique id for each but only the first form shows when edit is clicked on different rows. Can someone help me as to why?
<table id="table_id" class="table table-hover table-striped">
<thead>
<tr>
<th>ID #</th>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($search_sql)) {
?>
<tr>
<td id = "clicked"><?=$row['ID']?></td>
<td id = "clicked"><?=$row['Product']?></td>
<td id = "clicked"><?=$row['Quantity']?></td>
<td id = "clicked">$ <?=$row['Price']?></td>
<td>
<button class="btn btn-warning btn-sm" onclick="div_show2(this, '<?=$row['ID']?>'); return false;"><span class="glyphicon glyphicon-edit"></span>Edit</button>
<!-- Modal for the Edit Data Form -->
<div id ="hidden-form2">
<div id = "popupContact">
<form action= "updateData.php" id = "editForm<?=$row['ID']?>" method="POST" name="editForm">
<input type="hidden" name="ID" value="<?=$row['ID']?>">
<div class="form-group">
<label for="product">Product</label>
<input type="text" class="form-control" id="product<?=$row['ID']?>" name="product" value="<?=$row['Product']?>">
</div>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="text" class="form-control" id="quantity<?=$row['ID']?>" name="quantity" value="<?=$row['Quantity']?>">
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" class="form-control" id="price<?=$row['ID']?>" name="price" value="<?=$row['Price']?>">
</div>
<button type="button" class="btn btn-default" onclick="formHide2()">Close</button>
<button type="submit" id="save" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<!--End of Edit Form-->
</td>
<td>
<!--Delete Button Form-->
<form method="post" action="deleteData.php">
<button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-trash"></span>Delete</button>
<input type="hidden" id="ID" name="ID" value="<?=$row['ID']?>">
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
//script for calling the edit forms as a modal popup
//Function To Display Popup for Edit form
function div_show2() {
document.getElementById("editForm").reset();
document.getElementById('hidden-form2').style.display = "block";
}
//Function to Hide Popup
function formHide2(){
document.getElementById('hidden-form2').style.display = "none";
}
Your show_div2 function is only showing one element.
document.getElementById('hidden-form2').style.display = "block";
That shows you why you are only seeing the first row.
Update your HTML and Javascript as follows
HTML
<div id="hidden-form2<?=$row['ID']?>">
Javascript
function div_show2(id) {
document.getElementById("editForm"+id).reset();
document.getElementById('hidden-form2'+id).style.display = "block";
}
To avoid having any problems like this in the future, always make sure that your id's are unique.
The first 4 td I see all use the same id name clicked. Try to fix that first and see what happens.
<td class="clicked" id="clickedID<?=$row['ID']?>"><?=$row['ID']?></td>
<td class="clicked" id="clickedProduct<?=$row['ID']?>"><?=$row['Product']?></td>
<td class="clicked" id="clickedQuantity<?=$row['ID']?>"><?=$row['Quantity']?></td>
<td class="clicked" id="clickedPrice<?=$row['ID']?>">$ <?=$row['Price']?></td>

Categories