We Keep Coding

How to conditionally change column to textbox in AngularJS grid?

I want to know how to add one particular column value as textbox in an AngularJS grid.
So, I am implementing an AngularJS grid as below:
<div>
<table>
<tr>
<th>
<td>Customer Account Number</td>
<td>Customer Name</td>
</th>
</tr>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.CustomerAccNumber}}</td>
<td>{{item.CustomerName}}</td>
</tr>
</tbody>
</table>
<input type=button value="Add Row" ng-click="Add()"/>
So, in scenario 2 things happen:
By default I am getting few records as "Customer Account Number" and "Customer Name".
But there is an "Add Row" button on the same page I need to implement which adds a new row to the grid.
The first column "Customer Account Number" is a text box and second row is noneditable.
So, how to place textbox as a column only when adding a new row from button?
Let's say after adding add row my first column is coming as text box, so after entering the account number in the textbox on textchange it should fetch the customer account number and display it in the same row.
Can someone help me figure out how to put the textbox into one particular column in grid?
Can it be done the way I have implemented the grid?
I don't want to use nggrid.

I would do something like this:
First, in your Controller, in your Add() function, when you push a new row, add a field such as isEditable to allow you to differentiate between a newly added row in the UI.
$scope.Add = function() {
$scope.data.push({
'CustomerAccNumber': 1,
'CustomerName': '',
'isEditable': true // field to identify new row
})
}
Then in your markup, having that flg available, you can leverage ngIf, like so:
<tr ng-repeat="item in data">
<td ng-if="!item.isEditable">{{item.CustomerAccNumber}}</td>
<td ng-if="item.isEditable">
<input type="text" ng-model="item.CustomerAccNumber">
</td>
<td>{{item.CustomerName}}</td>
</tr>
it should fetch CustomerAccount number
As far as your third item, you can use ngBlur to make a call when the user clicks out of the box:
1) Define a function in your controller to call when the user leaves the box.
$scope.doSomethingWithAccNumber() {
// $http call, etc
}
2) Update your textbox to use the ngBlur directive that will trigger when the user clicks out.
<td ng-if="item.isEditable">
<input type="text"
ng-model="item.CustomerAccNumber"
ng-blur="doSomethingWithAccNumber()">
</td>
If you want other keys to trigger this, you can use ngKeydown as well. Use of this is outlined well here. For example, you would want to add ng-keydown="$event.keyCode === 13 && doSomethingWithAccNumber()" to your input to trigger on Enter.

How to pass selected rows from a table as request parameters on form submit?

I,m developing a web app(jsp) that extracts some data from a .doc file. Headings from an uploaded document is extracted and listed in a table as below.
Generated output on upload-screenshot
I have added a check-box for each row. Next what I want to do is save the check-box checked rows into an xml. I know how to write xml but how to do it only with the checked rows on form submit? My question summery is, How can I pass those checked rows from table on form submit as request parameters. Thanks in advance.

Creating checkbox array by keeping same name for all checkboxes will give you what you want.
In java, after submitting your form you read it in your servlet as 'request.getParameterValues("checkboxname")'. you will get checked checkboxes from the array returned.

HTML
<table class="table">
<tr value="1" class="side-link">
<td>one</td>
<td>two</td>
</tr>
<tr value="2" class="side-link">
<td>one</td>
<td>two</td>
</tr>
</table>
JavaScript
$(".table").on('click','tr',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
});
Demo

Show/hide div(check box) dynamically using Javascript/jQuery

I created a popup box using jQuery. The popup box contains a button named submit.
1.In a table <td>, there are two buttons "Add the name" and "Add from list". When the user clicks "Add the name", a popup box will open and get the input from the user (namely text data).
2.After entering the text data in the popup box, they should press the submit button. On clicking submit, the input text entered by the user is displayed in a <div id="dynamic"></div> in a <td>. (See HTML below).
3.In the HTML below, the second <tr>: in a separate I put some text, i.first Aid notes with a check box ii.sent to sick bay with a check box iii.ambulance with a checkbox.
4.When the user clicks the submit button, the text data is displayed in the name <td> cell (See HTML below). But what I want is at the same time the above mentioned check box with label should bind in their respective <td>s in a table dynamically (See HTML below, I placed it in individual <td> (i.e when the user clicks the submit button the check box also should display, this should happen at every click on submit).
I don't know how to perform using Javascript or jQuery. Can any one please come up with code.
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Atil</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
</table>
sample fiddle
This is what i required as ouptup,but it is displayed as in a single <td>,i want it to be happen that eack check box and their respective label in individual <td>.
How to do with jquery/javascript. Thanks.

That would be in your 'addtreatment' function, what code do you currently have there?

Hide table row where radio button is selected after form submit

I have table that is contained in form. The table is built from a CF loop where I have assigned each row ID the NumberID in the sql table. I have a submit button that performs an jquery ajax submit. I need to hide the row that was submitted instead of doing a page reload.
<form id="unsortedTable" >
<input type="submit" id="makeParentButton" value="Make Parent">
</span>
<div class="row-fluid"><p></p>
<table class="table table-bordered table-striped table-hover">
<tbody>
<cfloop query="nonAffiliated">
<tr id="#NumberID#">
<td><input type="radio" name="NumberID" value="#NumberID#"></td>
</tr>
</cfloop>
</tbody>
</table>
</div>
</form>
Then I have the JavaScript that triggers when the submit is performed.
$(document).ready(function(e) {
$("#unsortedTable").submit(sendForm);
});
function sendForm() {
var row = $(this).closest('tr');
$.post('handlers/formHandler.cfm',
$("#unsortedTable").serialize(),function(data,status){
$("#unsortedTable")[0].reset();
row.hide(); //This is just a guess
});
return false
}
Everything works except I can't get that submitted row to hide().

Unless the form is within the table row you are trying to hide, $(this).closest('tr') will not find the row. You probably thought $(this) does refer to the button clicked, but you are using a subit handler on the form, not a click handler on the button.
You might want to find the row a different way, either by id or by finding the button first:
$('#rowId').hide();
or
$('#buttonId').closest('tr').hide();
EDIT:
After re-reading your question more carefully, I realized that you don't want the submit button to be hidden, but the radio button. For that you could do something like this:
$(this).find('input:radio:checked').closest('tr').hide();

Click on a cell from a large table and insert that cell's contents into a form field

I have a form with a number of user-fillable fields. The user needs to enter a number in those fields that is selected from a pop-up window containing a large table of data.
For example, one field might say "Tax rate." The user would (preferably) click on the (empty) "tax rate" input field, which would bring up the large table of data. The user would (preferably) click on one of the values in that table which would then close the table and populate the input field with the value.
What I'm hoping (reaaallllyy hoping) is that I don't have to create some sort of special id for each cell in the table in order to pass the number back to the form field, because the tables are huge, and I hope to create them in plain old <tr><td>1.234</td></tr> format.
I smell jQuery but I'm not familiar with exactly how to implement it. Any help would be greatly appreciated.

Here's a very rudimentary demo using jQueryUI dialog that might get you started:
HTML:
Rate:<input type="text" id="rate_input" />
<div id="dialog" title="Click a value to fill input and close dialog">
<table id="rates" border="1" width="100%">
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>
</div>
jQuery:
$(function(){
$('#dialog').dialog({
autoOpen: false,
width: 400
});
$('#rate_input').click(function () {
$('#dialog').dialog('open');
});
$('#rates td').click(function () {
$('#rate_input').val($(this).text());
$('#dialog').dialog('close');
});
});
DEMO: http://jsfiddle.net/5jMqJ/