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');
Related
I want to SEARCH table data. My table td consists of textboxes.
The code for searching works when I directly add data in td's but does not when my data is a value in textbox. I've have done some coding for searching but it doesn't seem to work.
I just want to be able to search below table on input in a search box.
Screenshot of my table and code is given below :
products.html
<script type="text/javascript">
$(document).ready(
function() {
$("#search").keyup(
function ()
{
var value = this.value.toLowerCase().trim();
$("table tr").each(
function (index)
{
if (!index) return;
$(this).find("td").children().attr("value").each(
function ()
{
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});
});
</script>
<!-- Fetch table data -->
<sql:setDataSource var="myDataSource" driver="oracle.jdbc.OracleDriver" url="jdbc:oracle:thin:#10.1.56.49:1521:something" user="something" password="something"/>
<sql:query var="result" sql="select * from garageproducts" dataSource="${myDataSource}"/>
<table id="mytable" class="table table-hover">
<thead>
<tr>
<th>Mark</th>
<th>Barcode</th>
<th>Name</th>
<th>Brand</th>
<th>Stock</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<%! int cnt=0; %>
<c:forEach var="row" items="${result.rows}">
<tr>
<td hidden="true">${row.pid}</td>
<td>
<input type="checkbox" value="">
</td>
<td><input type="text" id='<%= "barcode"+cnt %>' value="${row.barcode}" name="barcodename" class="form-control input-sm"></td>
<td><input type="text" id='<%= "name"+cnt %>' value="${row.name}" name="namename" class="form-control input-sm"></td>
<td><input type="text" id='<%= "brand"+cnt %>' value="${row.brand}" name="brandname" class="form-control input-sm"></td>
<td><input type="text" id='<%= "stock"+cnt %>' value="${row.stock}" name="stockname" class="form-control input-sm"></td>
<td><input type="text" id='<%= "cost"+cnt %>' value="${row.cost}" name="costname" class="form-control input-sm"></td>
</tr>
<% ++cnt; %>
</c:forEach>
</tbody>
</table>
I partially found a solution. The search is working but it does not work as expected. It hides the cells which do not match the search string.
Following is the fiddle link for the same:
https://jsfiddle.net/freecoder/hfhtga0g/6/
<script type="text/javascript">
$(document).ready(function() {
$("#search").keyup(function() {
_this = this;
// Show only matching TR, hide rest of them
$.each($('#mytable tbody tr td>input[type="text"]'), function() {
if ($(this).val().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
});
</script>
<html>
<label for="search">Search products :</label>
<input type="text" id="search" placeholder="Enter text to search">
<!-- Fetch table data -->
<sql:setDataSource var="myDataSource" driver="oracle.jdbc.OracleDriver" url="jdbc:oracle:thin:#10.1.56.49:1521:something" user="something" password="something"/>
<sql:query var="result" sql="select * from garageproducts" dataSource="${myDataSource}"/>
<table id="mytable">
<thead>
<tr>
<th>Mark</th>
<th>Barcode</th>
<th>Name</th>
<th>Brand</th>
<th>Stock</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<c:forEach var="row" items="${result.rows}">
<tr>
<td> <input type="checkbox"> </td>
<td> <input type="text" value="${row.barcode}"> </td>
<td> <input type="text" value="${row.name}"> </td>
<td> <input type="text" value="${row.brand}"> </td>
<td> <input type="text" value="${row.stock}"> </td>
<td> <input type="text" value="${row.cost}"> </td>
</tr>
</c:forEach>
</tbody>
</table>
</html>
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>
I'm trying to have "set all" radio buttons at the bottom of my popup control so when the user has a long list of conflicts to resolve, they can just select one of the radio buttons and the option will be quickly select. However, my javascript fires, and seems to find the radio button, but fails to actually set the radio button.
I have a gridview gvErrors that is being looped though and in the second cell of each gridview row is a table with the options (tblOptions). I have tried using .attr("checked", true), .setAttribute("checked", true), and .prop("checked", true). I am receiving no errors, in the console, but the radio buttons all remain unchecked. Any help with this would be appreciated. Below is the Javascript.
<script type="text/javascript" language="javascript">
function selectAll(option) {
var grid = document.getElementById("<%=gvErrors.ClientID%>");
for (var i = 0; i < grid.rows.length; i++)
{
var row = grid.rows[i];
var table = $(row).find("tblOptions");
var radio = $(table).find("input[name*=" + option + "]:radio");
//$('td input:radiobutton', '#tblOptions').prop('checked', true);
$(radio).prop("checked", "checked");
var test = "";
}
};
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbCancelAll.ClientID%>").click(function() {
selectAll("rdbCancel");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbReplaceAll.ClientID%>").click(function() {
selectAll("rdbReplace");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbRenameAll.ClientID%>").click(function() {
selectAll("rdbRename");
});
});
</script>
Small example of the gridview:
<table class="tableinfo nocollapse c6" cellspacing="1" cellpadding="2" border="0" id="ctl00_Main_gvErrors">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th scope="col"><span class="c1">Current Name</span></th>
<th scope="col"><span class="c1">Options</span></th>
<th scope="col">Differences</th>
</tr>
<tr class="tableinfobody">
<td class="l"><span id="ctl00_Main_gvErrors_ctl02_lblName">Test1</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl02_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl02$txtNewName" type="text" value=
"Test1_1" id="ctl00_Main_gvErrors_ctl02_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl02$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl02_hfParamInternalUnmatched" value=
"EBC1-Test1" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl02$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl02_hfParamInternalMatched" value="Test1" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">Unit</td>
<td class="c4"></td>
<td class="c4">flag</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoGray">
<td class="l"><span id="ctl00_Main_gvErrors_ctl03_lblName">Test2</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl03_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl03$txtNewName" type="text" value=
"Test2_1" id="ctl00_Main_gvErrors_ctl03_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl03$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl03_hfParamInternalUnmatched" value=
"HCMData3-Testw" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl03$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl03_hfParamInternalMatched" value=
"PrimaryData3-Testw" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">SA</td>
<td class="c4">3, 239</td>
<td class="c4">239</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoBlue">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
Any help clearing this up would be greatly appreciated.
Use the value as a selector like so
function selectAll(option) {
var radio = $("input[value=" + option + "]");
$(radio).prop("checked", "checked");
}
$('input[type="button"]').on('click', function(){
var value = $(this).data('attr');
selectAll(value);
});
http://jsfiddle.net/3u3z4bLn/3/
I am having a function in Javascript which is updating the textbox in the div to get updated html of div but it gives me blank value instead of updated one, Is anybody having idea why? Initialy the div is blank as below, and then I
<div id="editSeriesData">
<table cellpadding="5" cellspacing="0" width="400px">
<tr>
<td class="tableCell">
<table cellpadding="5" cellspacing="0">
<tr>
<td>Series</td>
<td><input type="text" value="" name="seriesid" id="seriesid" readonly /></td>
</tr>
<tr>
<td>Name</td>
<td width="30%"><input type="text" name="seriesname" id="seriesname" value="" /></td>
</tr>
<tr valign="top">
<td>Description</td>
<td><textarea rows="5" cols="50" name="description" id="description"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="submit" id="submit" value="Submit" onclick="javascript:validateFrm();" class="text ui-widget-content ui-corner-all" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
And my Javascript method is:
function addEditSeries(seriesId){
document.getElementById('seriesid').value=seriesId;
document.getElementById('seriesname').value="dummy";
document.getElementById('description').value="dummy";
setTimeout(function(){
alert($('#editSeriesData').html());
showwindow('','','280','500','Product-Pack Series',true, true,$('#editSeriesData').html());
}, 1000);
}
The alert() shows me whole div but without the updated value which I updated in addEditSeries() method. The value of the input fields remain as default.
I am trying to read the length of a textbox from my register form. I have tried using document.getElementById() and textbox.value.length. Is there something very simple I'm am missing. I alert the result to the screen to show the textbox length. Thanks in advance.
Here is my last attempt:
function Register(){
Alert(RegisterForm.txt_Password.value.length);
}
TextBox structure:
<form id="RegisterForm" name="RegisterForm" method="POST" action="RegisterInsert.php" onsubmit="return Register(RegisterForm)">
<table border="0" align="center" width="100%">
<tr>
<td width="15%">Email Address:</td>
<td width="85%"><input type="text" name="txt_Email" id="txt_Email"/> </td>
</tr>
<tr>
<td width="15%">Username:</td>
<td width="85%"><input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
<span class="check" ></span></td>
</tr>
<tr>
<td width="15%">Password:</td>
<td width="85%"><input type="password" name="txt_Password" id="txt_Password" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="btn_Register" id="btn_Register" value="Register"></td>
</tr>
<tr>
</table>
<p> </p>
</form>
I use the submit button to call the Register function.
You need to get a reference to the element first:
function Register() {
var RegisterForm = document.getElementById('RegisterForm');
alert(RegisterForm.elements['txt_Password'].value.length);
}
check out this code:
var textBox = document.getElementById("myTextBox");
var textLength = textBox.value.length;
alert(document.getElementById('txt_Password').value.length);