When I'm adding new product to a product list its not working. So the products get loaded well but the ng-click function does not getting called. (The alert I put in the addProduct function is not executed).
HTML
<div ng-controller="ProductController as ProductCtrl">
Zoeken <input type="text" ng-model="search" placeholder="Search" />
<div>
Filter Type
<button ng-repeat="cat in categories" ng-click="filterProductsByCategory(cat)">{{cat}}</button>
</div>
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<th>ID</th>
<th>Product</th>
<th>Type</th>
<th>Price</th>
<th>Toevoegen</th>
</tr>
<tr ng-repeat="product in ProductCtrl.products">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.type}}</td>
<td>{{product.price}}</td>
<td></td>
</tr>
<tr><td></td>
<td><input type="text" name="newProduct.name" ng-model="productCtrl.newProduct.name"></td>
<td><input type="text" name="newProduct.price" ng-model="productCtrl.newProduct.price"></td>
<td><input type="text" name="newProduct.type" ng-model="productCtrl.newProduct.type"></td>
<td><a href ng-click="productCtrl.addProduct()">Product {{productCtrl.newProduct.name}} toevoegen</a></td></tr>
</table>
Any help would appreciated.
The controller:
app.controller('ProductController', function(productService) {
var that = this;
productService.getProducts().success(function(data) {
that.products = data;
});
this.newProduct = "";
this.addProduct = function() {
that.products.push(this.newProduct);
window.alert(that.products);
this.newProduct = "";
};
});
Its a typo, your controller alias name is ProductCtrl not productCtrl, Additionally you need to change your ng-model's to correct the same thing
Replace productCtrl to ProductCtrl will fix your issue.
<tr>
<td>
<input type="text" name="newProduct.name" ng-model="ProductCtrl.newProduct.name"/>
</td>
<td>
<input type="text" name="newProduct.price" ng-model="ProductCtrl.newProduct.price"/>
</td>
<td>
<input type="text" name="newProduct.type" ng-model="ProductCtrl.newProduct.type"/>
</td>
<td>
<a href ng-click="ProductCtrl.addProduct()">
Product {{productCtrl.newProduct.name}} toevoegen
</a>
</td>
</tr>
Related
I have a form. It contains Name , quantity & price . I want to get input from form and store in Angularjs Objects. Then i have to output to View the whole array of angular objects. I tried with Angular Array it worked but to show in table ng-repeat not work . So i have to use Objects and output in table
CODE
Form
<div class="leftDev">
<h1>Enter New Product</h1>
<Table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" name="naam" ng-model="naam"> </td>
</tr>
<tr>
<td><label for="quantity">Quantity:</label></td>
<td><input type="number" name="quantity" ng-model="quantity"> </td>
</tr>
<tr>
<td><label for="price">Price:</label></td>
<td><input type="text" name="price" ng-model="price"> </td>
</tr>
<tr>
<td></td>
<td><button ng-click='push()'>ADD</button></td>
</tr>
</Table>
OUTPUT Table
<div class="rightDev">
<table border="2">
<tr>
<th>
Name
</th>
<th>
Quantity
</th>
</tr>
<tr ng-repeat="" >
<td >
</td>
<td >
</td>
</tr>
</table>
</div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller('myCtrl',function($scope){
$scope.items={
name:"jay",quantity:"100",price:"200"
};
$scope.push = function(){
$scope.items.name.push($scope.naam);
$scope.items.quantity.push($scope.quantity);
$scope.items.price.push($scope.price);
}
})
</script>
So , please show me right way to do it.
myApp.controller('myCtrl',function($scope){
$scope.list = [];
$scope.item = {
name:"jay",quantity:"100",price:"200"
};
$scope.push = function(){
$scope.list.push($scope.item);
$scope.item = {};
}
})
<h1>Enter New Product</h1>
<Table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" name="name" ng-model="item.name"> </td>
</tr>
<tr>
<td><label for="quantity">Quantity:</label></td>
<td><input type="number" name="quantity" ng-model="item.quantity"> </td>
</tr>
<tr>
<td><label for="price">Price:</label></td>
<td><input type="text" name="price" ng-model="item.price"> </td>
</tr>
<tr>
<td></td>
<td><button ng-click='push()'>ADD</button></td>
</tr>
</Table>
<div class="rightDev">
<table border="2">
<tr>
<th>
Name
</th>
<th>
Quantity
</th>
</tr>
<tr ng-repeat="obj in list" >
<td >
{{obj.name}}
</td>
<td >
{{obj.quantity}}
</td>
</tr>
</table>
</div>
i want when user click delete icon i need value of hidden input inside "delete" class but i am getting undefined can someone guide me where i am doing wrong
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete"></i></td>
</tr>
</table>
my jquery code is as follow
$(document).on('click', '.shopping-cart .delete', function(){
var $target = $(this).parent().find('.row_id').val();
alert($target);
});
every time i run to alert i get error " undefined.tried many different ways but didnt work
You don't have a class on the input, just a name, change your markup like this:
<input type="hidden" name="row_id" class="row_id" value="123">
or your selector like this:
var $target = $(this).parent().find('input[name="row_id"]').val();
$(document).on('click', '.delete', function(){
var $target = $(this).find('input').val();
alert($target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
<th>action</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete">Delete</i></td>
</tr>
</table>
Please check the Working Code.
I have firstly added a new <TH> Tag to display the delete button.
And then in jquery i user .find to get the internal element of <TD> and as per your code it alters the value of hidden box
Thanks wish it might help you
I can't get the value property from input[type='text'] #page-name and #page-url, it shows up undefined :
eventsDispatcher: function() {
var self = this;
$(".b-row a").click(function() {
var tileId = ("this").id;
$("#tile-edit").css("display", "block");
$("#tile-edit-save").click(function() {
self.pageList[tileId].name = $("#page-name").val(); // -> here
self.pageList[tileId].url = $("#page-url").val(); // -> here
console.log(self.pageList[tileId].name);
});
});
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tile-edit">
<form>
<table>
<tr>
<td>
<label for="page-url">Adress</label>
</td>
<td>
<input type="text" name="page-url" id="page-url" class="">
</td>
</tr>
<tr>
<td>
<label for="page-name">Name</label>
</td>
<td>
<input type="text" name="page-name" id="page-name" class="">
</td>
</tr>
<tr>
<td>
<input type="button" id="tile-edit-save" value="save">
</td>
</tr>
</table>
</form>
</div>
The rest of the script is working fine, like the both .click functions, just can't figure out why it doesn't get the #page-name and #page-url values ??
I'm just guessing, but ("this").id should be undefined. You might want to change it for:
var tileId = $(this).attr('id');
I believe you have special characters in your HTML. I copied and pasted it to/from a plain text editor and it works fine. Try copying and pasting the form HTML here.
$('#tile-edit-save').on('click',function() {
console.log($("#page-name").val())
console.log($("#page-url").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><label for="page-url">Adress</label></td>
<td><input type="text" name="page-url" id="page-url" class=""></td>
</tr>
<tr>
<td><label for="page-name">Name</label></td>
<td><input type="text" name="page-name" id="page-name" class=""></td>
</tr>
<tr>
<td><input type="button" id="tile-edit-save" value="save"></td>
</tr>
</table>
</form>
I am implementing auto generated textbox with google auto completeplace. But it is happening in only on first tetbox only rest of textbox is not caching auto completeplace. textbox is auto generated when add button is click.
Image of autogenerated textbox
Here is the code of main page containing table
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th width="20px">#</th>
<th>Nearest Location</th>
</tr>
</thead>
<tbody id="product">
<?php require_once("input.php") ?>
</tbody>
</table>
<table class="table">
<tbody>
<tr id="product">
<td></td>
<td align="right"><input type="button" name="add_item" value="Add More" onClick="addMore();" /></td>
<td align="left"><input type="button" name="del_item" value="Delete" onClick="deleteRow();" /></td>
<td align="right" width="120px"></td>
<td width="160px" align="right"></td>
</tr>
</tbody>
</table>
</div>
Here is the code of input.php
<tr class="product-item float-clear" style="clear:both;">
<td><input type="checkbox" name="item_index[]" /></td>
<td><input class="form-control" type="text" name="item_naddress[]" id="location" />
<input type="text" class="form-control" id="clat[]" name="clat[]">
<input type="text" class="form-control" id="clong[]" name="clong[]"></td</tr>
Here is the code of add button
function addMore() {
$("<tbody>").load("input.php", function() {
$("#product").append($(this).html());
}); }
And here is the code of google auto completepalce
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('location')),
{types: []});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
document.getElementById('clat[]').value = place.geometry.location.lat();
document.getElementById('clong[]').value = place.geometry.location.lng();}
I know i am getting it some where wrong can anyone tell me please how to fix it. Thanks in advance. Kindly help me out
Your html code
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th width="20px">#</th>
<th>Nearest Location</th>
</tr>
</thead>
<tbody id="product_table">
<?php require_once("input.php") ?>
</tbody>
</table>
<table class="table">
<tbody>
<tr id="product">
<td></td>
<td align="right"><input type="button" name="add_item" value="Add More" onClick="addMore();" /></td>
<td align="left"><input type="button" name="del_item" value="Delete" onClick="deleteRow();" /></td>
<td align="right" width="120px"></td>
<td width="160px" align="right"></td>
</tr>
</tbody>
</table>
</div>
The code of input.php
<tr class="product-item float-clear" style="clear:both;">
<td><input type="checkbox" name="item_index[]" /></td>
<td><input class="form-control location" type="text" name="item_naddress[]" id="location" />
<input type="text" class="form-control product-lat" id="clat[]" name="clat[]">
<input type="text" class="form-control product-long" id="clong[]" name="clong[]"></td>
</tr>
The code of add button
function addMore() {
$("<tbody>").load("input.php", function() {
$("#product_table").append($(this).html());
var locationid = Math.random().toString(36).substring(7);
$('#product_table tr:last').find('.location').attr('id',locationid);
initAutocomplete(locationid);
});
}
The code of google auto completepalce
function initAutocomplete(locationid) {
autocomplete = new google.maps.places.Autocomplete((document.getElementById(locationid)));
autocomplete.inputId = locationid;
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$('#'+this.inputId).closest('tr').find('input.product-lat').val(place.geometry.location.lat());
$('#'+this.inputId).closest('tr').find('input.product-long').val(place.geometry.location.lng());
});
}
initAutocomplete('location');
Please help if you are seeing this.I want to pre-populate the form-field with row data after clicking on the same row.
SIMILAR TO THIS DEMO:http://jsbin.com/qavugo/2/edit?html,js,output
Problem is faced now. fillForm() function is OK(AS SHOWN IN THE DEMO inside the scripts) in order to populate the form field with row data.HOW DO I GET ROW DATA? But as I am populating the table using jsp like this
<table class="data-table" id="test" border="1">
<tr>
<td>Student ID</td>
<td>First Name</td>
<td>Last Name</td>
<td>Year Level</td>
</tr>
<c:foreach items="${allStudents}" var="stud">
<tr>
<td>${stud.studentId}</td>
<td>${stud.firstname}</td>
<td>${stud.lastname}</td>
<td>${stud.yearLevel}</td>
</tr>
</c:foreach>
</table>
Which makes it more difficult for me for getting the rowData than what is showed in the DEMO.
MY FORM
<form name="frm" class="data-form" action="./StudentServlet" method="POST" onsubmit="return validateForm()">
<tr>
<td>
<label>Student ID --></label><input type="text" name="studentId" value="${student.studentId}" />
</td>
<td>
<label>First Name --></label><input type="text" name="firstname" value="${student.firstname}" />
</td>
<td>
<label>Last Name --></label>
<input type="text" name="lastname" value="${student.lastname}" />
</td>
<td>
<label>Year Level --></label><input type="text" name="yearLevel" value="${student.yearLevel}" />
</td>
</tr>
</form>
THE SCRIPTS
$(function() {
// I am not using dummy data here.
var rowData = [
// how and what should go here.Please help
];
row.on("click", function() {
fillForm(rowData);
});
return row;
});
$(".data-table").append(rows);
function fillForm(rowData) {
var form = $(".data-form");
form.find("input.value1").val(rowData.value1);
form.find("input.value2").val(rowData.value2);
form.find("input.value3").val(rowData.value3);
form.find("input.value4").val(rowData.value4);
}
I am updating the records like this
<table>
<tr>
<td colspan="5">
<input type="submit" name="action" value="Add" />
<input type="submit" name="action" value="Edit" />
<input type="submit" name="action" value="Delete" />
<input type="submit" name="action" value=Refresh />
</td>
</tr>
</table>
I am getting an error after clicking the/add/edit/delete button
Warning: StandardWrapperValve[StudentServlet]: Servlet.service() for servlet StudentServlet threw exception
java.lang.NumberFormatException: For input string: " "
at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
at java.lang.Integer.parseInt(Integer.java:569)
at java.lang.Integer.parseInt(Integer.java:615)
at com.joseph.controller.StudentServlet.processRequest(StudentServlet.java:35)
at com.joseph.controller.StudentServlet.doPost(StudentServlet.java:99)
That demo looks way too complicated for the task at hand. There's really no need to work with class references. You could simplify your approach by doing the following:
HTML:
<h1>Student Info:</h1>
<form class="data-form">
<label>Student ID
<input type="text" />
</label>
<label>First Name
<input type="text" />
</label>
<label>Last Name
<input type="text" />
</label>
<label>Year Level
<input type="text" />
</label>
</form>
<table class="data-table" id="test">
<thead>
<tr>
<th>Student ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Year Level</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Frank</td>
<td>Sinatra</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>Miles</td>
<td>Davis</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>Tom</td>
<td>Waits</td>
<td>6</td>
</tr>
</table>
JS:
$(document).ready(function () {
$("td", this).on("click", function () {
var tds = $(this).parents("tr").find("td");
$.each(tds, function (i, v) {
$($(".data-form input")[i]).val($(v).text());
});
});
});
The only condition for this to work is that the input order in the form needs to match the column order in the table. Here's a working JSFiddle for reference.
YOUR Form (data-form)tag includes your edit/delete/ update inputs.Keep that out of your form tag.Then the java.lang.NumberFormatException: For input string: " will not take place.See if it works.
I tried adding the code further as mentioned above.It did not worked well.I am facing same dilemma.Anyone plz tell where is it going wrong?
<script>
$(function()
row.on("click", function() {
$('INPUT', this).each(function(i){
rowData['value' + (i+1)] = this.value;
});
fillForm(rowData);
});
function fillForm(rowData) {
var form = $(".data-form");
form.find("input.value1").val(rowData.value1);
form.find("input.value2").val(rowData.value2);
form.find("input.value3").val(rowData.value3);
form.find("input.value4").val(rowData.value4);
}
}
</script>
Try adding this to the on.cick function
row.on("click", function() {
$('INPUT', this).each(function(i){
rowData['value' + (i+1)] = this.value;
});
fillForm(rowData);
});