Develop Reference

How to use jQuery to get Input Field Value of dynamic table

I'm currently using Meteor/Blaze framework to build a table. The row in the table will change according to the selected supplier. I have added class={{_id}} to the field and q.{{_id}} , lot.{{_id}} , and exp.{{_id}} to the quantity, lot , and expire date INPUT.
I'm trying to write a Submit Events to get these value and pass it to the Mongo Database. Please suggest a good way to loop through these rows to get the value.
Website Image
Part of the code
receiveForm template
<template name="receiveForm">
...
<select data-placeholder="Select an option" class="sel2js form-control select select-primary" id="supplier_sel" name="supplier">
{{#each suppliers}}
{{> sel_supplier}}
{{/each}}
</select>
</div>
<!-- Receive Lot Table -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product Name</th>
<th>Current Quantity</th>
<th>Unit of Measurement</th>
<th>Receive Quantity</th>
<th>Lot No</th>
<th>Exp Date (DD/MM/YYYY)</th>
</tr>
</thead>
<tbody>
{{#each items}}
{{> receiveRow2}}
{{/each}}
</tbody>
</table>
<div class="text-center">
<button type="submit" class="btn btn-embossed btn-primary btn-wide" id="submitNewReceive" value="Submit">Submit</button>
<button type="reset" class="btn btn-embossed btn-warning btn-wide" value="Reset">Reset</button>
</div>
</form>
receiveRow2 template
<template name="receiveRow2">
<tr id="{{_id}}">
<td class="pn">{{name}}</td>
<td class="pq">{{totalQuantity}}</td>
<td>{{uomid.name}} ({{uomid.unit}} {{uomid.unitname}}/{{uomid.name}})</td>
<td><input type="text" class="form-control" name="q.{{_id}}" placeholder="Quantity" /></td>
<td><input type="text" class="form-control" name="lot.{{_id}}" placeholder="Lot No XX/YYYY" /></td>
<td>
<div class="input-group datetimepicker text-primary">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input class="set-due-date form-control" name="exp.{{_id}}" type="text" placeholder="วัน/เดือน/ปี"/>
<hr />
</div>
</td>
</tr>
</template>
JS
Template.receiveForm.events({
'submit form': function(event, template){
var supplierSelected = Template.instance().supplierSelected;
items = Products.find({suppliers: supplierSelected.get()});
event.preventDefault();
docdate = event.target.docdate.value;
supplier = event.target.supplier_sel.value;
console.log("---event---");
console.log(docdate)
console.log(supplier)
items.forEach(function(item){
????
})
}
})

In line 4 its missing a var before items, and also in line 6, 7.
After that I think you can loop on them.(But they will come from the DB).
BUT if you want to get the input values, why would you ask for a data in MongoDB?
Also I would prefer to get DB values as a promise.
var items = Promise.resolve(Products.find({suppliers: supplierSelected.get()});
and get back the items in this way:
items.then(function(item){console.log(item)})

Meteor - get object from Footable with a button in hidden column

I work on meteor with footable. I fill the table with a {{each}}.
I need to set a button in this footable, on a hidden column, like here. In my helper, I want to get corresponding object by writing:
'click #updateFilter': function(evt) {
console.dir(this);
}
It works as long as the button is not in a <td> tag or if the button is not on a hidden column. The following html code doesn't work, console.dir(this);give me something wrong.
<table class="table footable table-stripped toggle-arrow-tiny">
<thead>
<tr>
<th>ID</th>
<th data-hide="all">update</th>
</tr>
</thead>
<tbody>
{{#each filters}}
<tr>
<td>{{_id}}</td>
<!-- **********Problem is here*********** -->
<td>
<button id="updateFilter" class="btn btn-w-m btn-primary m-t btn-block">Update</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
How can I access to my object data in this case?

AspNet Two Tables on a View

I im build a ASP.Net MVC 4 Application and i need to use two tables.
Example:
The first table i have the products that is in my database, when i click on the green button, the item need to be inside the table down, i can choose any item that i want and when i finish, i click on Save to register that "Sell", but i cant do that.
My question:
How can i get the item values from the first table using a button and pass to the controller?
Can i just put on the other table using JavaScript and when i finish i send to the controller?
I Just want pass data from table 1 to table 2!
My code:
Table 1
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var product in Model)
{
<tr>
<td>#Html.DisplayFor(model => product.idProduct)</td>
<td>#Html.DisplayFor(model => product.nameProduct)</td>
<td><p>R$#Html.DisplayFor(model => product.pricesaleProduct)</p></td>
<td><input type="text" class="form-control bfh-number" value="1"></td>
<!--Here i want get values to put on other table Or send to a controller-->
<td>
<a class="btn btn-success"><span class="glyphicon glyphicon-plus"> Adicionar</span></a>
</td>
</tr>
}
}
</tbody>
</table>
Table 2:
<!--Table to display selected products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>

You want to create your bottom table as a Partial View and then AJAX to load it when the button is clicked... There are many examples, exactly like this:
http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx

Bootstrap datatable search function

I want to searching multicolumn value on the bootstrap table. There is any code for this
For example ;
https://datatables.net/examples/plug-ins/range_filtering.html
I want to searching like this but I could not find anything. I can post the data input on the server and write SQL query about LİKE . But it does not specific . Do have any example about it ?
Have a good day :)
My page screenshot
My table source code
<div class="table-responsive " style="height: 400px; overflow-y: auto;">
<table id="tablo_icin2" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>
<span class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></span>
</th>
<th>User Name</th>
<th>Password</th>
</tr>
</thead>
<tr>
<td></th>
<td>Mark</th>
<td>123</th>
</tr>
</table>
</div>

You can make use of bootgrid as plugin for bootstrap.
http://www.jquery-bootgrid.com/Examples

How to get drop down list value per selected row?

I have a table that looks something like so
<table id="grid" class="table table-bordered table-hover table-inline">
<thead>
<tr>
<th>Id</th>
<th>Dropdown List</th>
<th><input id="selectAll" type="checkbox" /></th>
</tr>
</thead>
<tbody data-bind="foreach: stuff
<tr>
<td data-bind="text: someId"></td>
<td>
<select class="input-medium" data-bind="options: someStuff, optionsText:'DisplayName', optionsValue:'StandardCode'"></select>
</td>
<td>
<input type="checkbox" data-bind="value: someId"/>
</td>
</tr>
</tbody>
</table>
and then im my javascript I am iterating through the selected rows like this
$('grid input[type="checkbox"]:checked').each(function () {
var someSelectedId= $(this).val();
var dropDownlistValue= ??
});
I am using knockout to bind my data to the table and the drop down.
When i am iterating through the rows how do i get the selected value in the drop down list for each row as i am iterating through them? For the life of me i cant seem to figure it out. Thanks!

Use:
var dropDownlistValue = $(this).parent().prev().find('select.input-medium').val();

Or...
$(this).closest("tr").find("select.input-medium").val();
A.V's method is probably faster, but going to the TR allows more flexibility, as it'll find the select no matter where in the row it is.