I'm having some trouble in binding dynamically created dom elements
Code:
var i=0;
$.each(data.info, function(index, element) {
$("#div1").append("<tr><td>" + element.Name + "</td><td>"+ element.Major +"</td><td>" + element.Sex +"</td><td>" + "<input data-bind='value: eng"+i+"' ></td><td>" + "<input data-bind='value: jap"+i+"' ></td><td>" + "<input data-bind='value: cal"+i+"' ></td><td>" + "<input data-bind='value: geo"+i+"' ></td><td>" + "<strong data-bind='text: total'></td>" )
i++;
});
This creates row with input data-bind values eng0, eng1, jap0, jap1, etc.
I want to bind these as observables
Code
function AppViewModel() {
this.eng = ko.observable(element.English);
this.jap = ko.observable(element.Japanese);
this.cal = ko.observable(element.Calculus);
this.geo = ko.observable(element.Geometry);
this.total = ko.computed(function() {
var tot=parseFloat(this.eng()) + parseFloat(this.jap()) + parseFloat(this.cal()) + parseFloat(this.geo());
return (tot);
}, this);
}
ko.applyBindings(new AppViewModel());
This code is also inside $.each(data.info, function(index, element){}
I want some thing like
Var i=0;
$.each(data.info, function(index, element) {
function AppViewModel() {
this.eng+i = ko.observable(element.English);
this.jap+i = ko.observable(element.Japanese);
this.cal+i = ko.observable(element.Calculus);
this.geo+i = ko.observable(element.Geometry);
this.total+i = ko.computed(function() {
var tot=parseFloat(this.eng()) + parseFloat(this.jap()) + parseFloat(this.cal()) + parseFloat(this.geo());
return (tot);
}, this);
}
i++;
}
That get me result this.eng0 = ko.observable()
Note: the data is obtained from a JSON object. I have only included the iteration path
May I suggest that using a foreach binding may be better than using jQuery's each and generating the HTML yourself? I'd suggest changing your view model to something like this:
function AppViewModel() {
this.items = ko.observableArray();
}
function ItemViewModel(element) {
this.eng = ko.observable(element.English);
this.jap = ko.observable(element.Japanese);
this.cal = ko.observable(element.Calculus);
this.geo = ko.observable(element.Geometry);
this.name = ko.observable(element.name);
this.major = ko.observable(element.major);
this.sex = ko.observable(element.sex);
this.total = ko.computed(function () {
var tot = parseFloat(this.eng()) + parseFloat(this.jap()) + parseFloat(this.cal()) + parseFloat(this.geo());
return (tot);
}, this);
};
Here, the AppViewModel is a container for the list of elements, and each element is its own ItemViewModel, with the properties you seem to have.
The html to bind this would be something like this:
<table>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: major"></td>
<td data-bind="text: sex"></td>
<td><input data-bind='value: eng' /></td>
<td><input data-bind='value: jap' /></td>
<td><input data-bind='value: cal' /></td>
<td><input data-bind='value: geo' /></td>
<td><strong data-bind='text: total' /></td>
</tr>
</tbody>
</table>
When you get the JSON from your server you can use Knockout's built-in JSON stuff, the mapping plugin, or parse them yourself. I created an example using the latter option in this jsfiddle.
Related
In my program there is a table where a user can add customers and gets shown information about them. For this example the table consists of 3 rows with an input field. Adding those table rows, works.
In the first step, he should fill in the name of the customer and gets suggestions from jQuery UI Autocomplete. Works fine too.
Now the problem: When the name is filled in, an Ajax-Call gets data about the customer from a controller, the delievered data is correct. Now this data should be displayed in the input fields for that customer and that is where problem starts. I could only make it work for the next table row that directly follows, so in this case the ID is put in the right input field, but I have no Idea how to do that for the adress input field or later even more input fields and table rows.
Here is an example how it should work: First customer is John (ID: 1, Adress: Street 1) the table should look like this and work the following way:
Customer: John (via Autocomplete)
ID: 1 (Data from Ajax-Call and put in in this input field)
Adress: Street 1 (Data from Ajax-Call and put in in this input field)
Here is my HTML-Markup from the View:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "")
<table id="customers">
<tr>
<td>Name of Customer:</td>
<td><input type="text" class="customername" id="customername-0" name="customername[0]" placeholder=""></td>
</tr>
<tr>
<td>ID of Customer:</td>
<td><input type="text" class="customerid" id="customerid-0" name="customerid[0]" placeholder=""></td>
</tr>
<tr>
<td>Adresss of Customer:</td>
<td><input type="text" class="customeradress" id="customeradress-0" name="customeradress[0]" placeholder=""></td>
</tr>
</table>
<button class="" type="button" id="add-customer" name="add-customer" onclick="add_customer()">Add another Customer</button>
</div>
}
JavaScript for adding table rows (not the most elegant way, I know):
<script>
// An array to store the ids of the customers
var customerIDArray = new Array();
customerIDArray.push("");
// An array to store the names of the customers
var customerNameArray = new Array();
customerNameArray.push("");
// An array to store the adresses of the customers
var customerAdressArray = new Array();
customerAdressArray.push("");
AutoCompleteCustomerName();
AutoCompleteCustomerID();
function add_customer() {
refresh_customerNameArray();
refresh_customerIDArray();
customerNameArray.push("");
customerIDArray.push("");
refresh_table();
}
function refresh_customerNameArray() {
for (i = 0; i < customerNameArray.length; ++i) {
customerNameArray[i] = $("#customername-" + i).val();
}
}
function refresh_customerIDArray() {
for (i = 0; i < customerIDArray.length; ++i) {
customerIDArray[i] = $("#customerid-" + i).val();
}
}
function refresh_customerAdressArray() {
for (i = 0; i < customerAdressArray.length; ++i) {
customerIDArray[i] = $("#customeradress-" + i).val();
}
}
function refresh_table() {
var htmlMarkup = '<table id="customers">'
if (customerNameArray.length == 1) {
htmlMarkup +=
'<tr>'+
'<td>Name of Customer:</td>'+
'<td><input type="text" class="customername" id="customername-0" name="customername[0]" placeholder="" value="' + customerNameArray[0] + '"></td>' +
'</tr>'+
'<tr>'+
'<td>ID of Customer:</td>'+
'<td><input type="text" class="customerid" id="customerid-0" name="customerid[0]" placeholder="" value="'+ customerIDArray[0] +'"></td>'+
'</tr>'+
'<tr>' +
'<td>Adresss of Customer:</td>' +
'<td><input type="text" class="customeradress" id="customeradress-0" name="customeradress[0]" placeholder=""></td>' +
'</tr>'
}
else {
for (var i = 0; i < customerNameArray.length; i++) {
htmlMarkup +=
'<tr>' +
'<td>Name of Customer:</td>' +
'<td><input type="text" class="customername" id="customername-' + i + '" name="customername['+ i +']" placeholder="" value="' + customerNameArray[i] + '"></td>' +
'</tr>'+
'<tr>' +
'<td>ID of Customer:</td>' +
'<td><input type="text" class="customerid" id="customerid-' + i +'" name="customerid['+ i +']" placeholder="" value="' + customerIDArray[i] + '"></td>' +
'</tr>'+
'<tr>'+
'<td>Adresss of Customer:</td>'+
'<td><input type="text" class="customeradress" id="customeradress-' + i + '" name="customeradress['+ i +']" placeholder=""></td>'+
'</tr>'
}
}
htmlMarkup +=
'</table>'
$("#customers").html(htmlMarkup);
AutoCompleteCustomerName();
AutoCompleteCustomerID();
}
</script>
My autocomplete-function:
<script>
function AutoCompleteCustomerName() {
$(".customername").autocomplete({
source: "/Home/AutoCompleteCustomerName",
select: function(event, ui) {
}
});
}
</script>
The Ajax-Call and the current solution for the next table row:
<script>
function AutoCompleteCustomerID()
{
$('.customername').on('focusout', function () {
var $id = $(this).closest("tr").next().find(".customerid");
var self = $(this);
$.ajax({
type: "GET",
url: "/Home/AutoCompleteCustomerID",
data: { name: $(self).closest("tr").find(".customername").val()},
contentType: "application/json",
dataType: "json",
success: function (result) {
$id.val(result.id);
}
})
});
}
</script>
So I would be thankful if you could give me an advice or a hint how this could be solved, Im pretty new to JavaScript and jQuery and still have to learn a lot.
I'm not sure it is what you need, you can try with this
var $street = $($id).closest("tr").next().find(".customeradress");
And so on with other fields which go in next lines.
NB I suppose that the related table rows are already in the page when you call the autocomplete, it seems like that.
So your autocomplete may become
<script>
function AutoCompleteCustomerID()
{
$('.customername').on('focusout', function () {
var $id = $(this).closest("tr").next().find(".customerid");
var $street = $($id).closest("tr").next().find(".customeradress");
var self = $(this);
$.ajax({
type: "GET",
url: "/Home/AutoCompleteCustomerID",
data: { name: $(self).closest("tr").find(".customername").val()},
contentType: "application/json",
dataType: "json",
success: function (result) {
$id.val(result.id);
$street.val(result.street);
}
})
});
}
</script>
Another approach would be working with data attributes and id depending on those but this may change a lot your scripts.
I want to build a HTML page that allows the user to construct an object that can then be posted as JSON to an internally hosted service (similar to the Chrome Advanced Rest Client). The user must be able to add and remove properties.
My model is not correct because each property is treated like an object with the properties 'name' and 'value'. I end up with an array of objects instead of an object with properties.
Here is a snippet of the HTML:
<table>
<thead>
<tr>
<th>Property Name</th>
<th>Property Value</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: myFieldList">
<tr>
<td><input data-bind="value: name" /></td>
<td><input data-bind="value: value" /></td>
<td><span class="removeVar" data-bind="click: removeProperty">Remove property</span></td>
</tr>
</tbody>
</table>
<p>
<span id="addVar" data-bind="click: addProperty">Add Property</span>
</p>
<textarea name="tasks" data-bind="value: ko.toJSON(myFieldList)"></textarea>
Here is the JS:
<script type="text/javascript">
function dynamicProperty(name, value) {
var self = this;
this.name = name;
this.value = value;
}
function fieldModel() {
var self = this;
//start with 2 empty properties
self.myFieldList = ko.observableArray([
new dynamicProperty("", ""),
new dynamicProperty("","")
]);
var noTracker = self.myFieldList.length;
self.removeProperty = function (dynamicProperty) {
self.myFieldList.remove(dynamicProperty);
}
self.addProperty = function () {
noTracker++;
self.myFieldList.push(new dynamicProperty(this.name,this.value));
}
}
ko.applyBindings(fieldModel);
</script>
What I get in the textarea is output like this:
[{"name":"test name 1","value":"test value 1"},{"name":"test name 2","value":"test value 2"}]
What I want is output like this:
{"test name 1":"test value 1","test name 2":"test value 2"}
I fear this is rather trivial but in my defense I am very new to JS and Knockout, so any help you can offer would be hugely appreciated. Thanks.
You may want to do something like this to get it done .
Example : https://jsfiddle.net/9aLvd3uw/79/
HTML
<table>
<thead>
<tr>
<th>Property Name</th>
<th>Property Value</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: myFieldList">
<tr>
<td><input data-bind="textInput: name" /></td>
<td><input data-bind="textInput: value" /></td>
<td><span class="removeVar" data-bind="click: removeProperty">Remove property</span></td>
</tr>
</tbody>
</table>
<p>
<span id="addVar" data-bind="click: addProperty">Add Property</span>
</p>
<textarea name="tasks" data-bind="value: myFieldList2"></textarea>
JS
function dynamicProperty(name, value) {
var self = this;
self.name = ko.observable(name || '');
self.value = ko.observable(value || '');
}
function fieldModel() {
var self = this;
self.name = ko.observable();
self.value = ko.observable();
self.myFieldList = ko.observableArray([
new dynamicProperty("test_name_1", "test value 1"),
new dynamicProperty("test_name_2","test value 2")
]);
var noTracker = self.myFieldList.length;
self.myFieldList2 = ko.computed(function () {
var string = '{';
ko.utils.arrayForEach(self.myFieldList(), function (item) {
string += item.name() + ': ' + item.value() + ',';
});
string = string.replace(/,\s*$/, "");
string+='}';
return string;
});
self.removeProperty = function (dynamicProperty) {
self.myFieldList.remove(dynamicProperty);
}
self.addProperty = function () {
noTracker++;
self.myFieldList.push(new dynamicProperty('',''));
}
}
ko.applyBindings(fieldModel);
What you need is a "reducer".
A simple (naive too) implementation would be this:
function reduce(input, step, init) {
for(var i = 0; i < input.length; i++) {
init = step(init, input[i]);
}
return init;
}
Then you call it like this:
var in = [{"name":"test name 1","value":"test value 1"},{"name":"test name 2","value":"test value 2"}];
var out = reduce(in, function(result, item) {
result[item.name] = item.value;
return result;
}, {});
console.log(out);
What it does is that it iterates through your array and "accumulates" the result of each step in a single item. Could be the sum of numbers in an array where the "accumulator" would be a number instead of an object.
I advise you don't write your own but instead use lodash, it comes with a _.reduce function that's optimized.
I have a table with multiple rows of the same pattern:
<tr role="row" class="even">
<td><input type="checkbox" id="valj4"></td>
<td>Generell grupp</td>
<td>IKT Ipad11- Mirko</td>
<td>Grundinställningar</td>
</tr>
Each row has a checkbox with unique ID, what would be the most efficient way to get a list of UUIDs for the rows with a checked checkbox. I would like to use jQuery.
$(function() {
var texts = [];
$('tr td:has(input:checkbox:checked) ~ td > a').each(function(i, e) {
texts.push($(e).attr('href'));
});
$('#result').html(texts.join('<br/>'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr role="row" class="even">
<td>
<input type="checkbox" id="valj4" checked>
</td>
<td>Generell grupp</td>
<td>IKT Ipad11- Mirko (...5)
</td>
<td>Grundinställningar</td>
</tr>
<tr role="row" class="even">
<td>
<input type="checkbox" id="valj4">
</td>
<td>Generell grupp</td>
<td>IKT Ipad11- Mirko (...6)
</td>
<td>Grundinställningar</td>
</tr>
<tr role="row" class="even">
<td>
<input type="checkbox" id="valj4" checked>
</td>
<td>Generell grupp</td>
<td>IKT Ipad11- Mirko (...7)
</td>
<td>Grundinställningar</td>
</tr>
</table>
<div id="result"/>
Getting the UUID is then an easy exercise in string chopping.
I assume your table has an id and it's "#table-id":
$("#table-id").find(":checked")
would get you all the checked checkboxes and radio boxes.
$("#table-id").find("input[type='checkbox']:checked")
would get you all the checked checkboxes.
var ids = "";
$("#table-id").find("input[type='checkbox']:checked").each(function(){
ids += $(this).attr("id") + ",";
});
would give you a comma seperated list containing the ids of checked checkboxes in the table.
and the UUIDS list:
var UUIDs = "";
$("#table-id").find("input[type='checkbox']:checked").each(function(){
var href = $(this).closest("tr").find("td > a").first().attr("href");
var UUID = href.split('?')[1];
UUIDS += UUID + ",";
});
I would try the following
var ids = [];
$("#table input:checkbox:checked").each(function () {
var uuid = getParameter($(this).closest('tr').find('a').eq(0).attr('href'))
ids.push(uuid);
});
function getParameter(url) {
var regex = new RegExp("[\\?&]uuid=([^&#]*)"),
results = regex.exec(url);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
where #table is the id of your table
Example
jQuery('#formId').find('tr[class=even]').each(function () {
var rowId = "";
this.find('input[type=checkbox]').each(function() {
if(this.checked) {
rowId = "row" + $(this).val();
}
});
$(this).attr('id', rowId);
});
Create a new list of UUIDs.
var listOfUUIDs = [];
Get the checked input, go up to grandparent (the tr), then find the a inside it.
Go through the list of a's, adding UUIDs to the list.
$("tr input[checked=checked]").parent().parent().find("td a").each(function(){
listOfUUIDs.push(
$(this).prop('href').substr(indexOf("uuid=") + 5)
)
});
This should give you what you need.
$('tr').each(function(index) {
var $this = $(this),
input = $this.find('input'),
result = '';
if ( input.is(':checked') ) {
var uuid = $this.find('a').attr('href').replace(/^\/Home\/DeviceDetails\?uuid=/g, ""),
result = result + index + '. ' + input.attr('id') + ' has the uuid: ' + uuid + '<br />';
}
$('#result').html(result);
});
try this
$( "input[type=checkbox]" ).change(function() {
if($(this).is(":checked")) {
alert($(this).attr("id"));
}
});
I have a table within a form that I want to append new rows as the user enters input in the last row of the table.
$('table.form-table').on('input', function() {
var tableID = '#' + $(this).closest('table').attr('id');
if(jQuery(this).closest('tr').is(':last-child')) {
var currTR = $(this).closest('tr');
var currTRhtml = '<tr>' + currTR.html() + '</tr>';
var nextRow = jQuery(currTRhtml);
var checkBox = jQuery('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
jQuery(tableID).append(nextRow);
checkBox.appendTo(currTR);
}
});
And the html code if needed (simplified/trimmed):
<table class="form-table" id="XXX" border="1" cellspacing="0" cellpadding="3">
<thead>
<tr class="main"><th nowrap colspan="3" align="left"
class="border-left border-top border-right">
<h3>XXX</h3></th>
</tr>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<input type="hidden" name="isnew" value="">
<td >
<input type="text"
name="new_text"
value="">
</td>
</tr>
</tbody>
</table>
The problem is that this works only once and does not continue appending new rows. It's as if the last-child filtering does not get reset...
Any thoughts?
The problem is that you need to use the event's target, rather than "this". Right now "this" refers to the current table, but you need to refer to the current input box and then use closest() to find its parent tr (and :first-child to make sure it's the last one). So your code needs to look more like this:
$('table.form-table').on('input', function(e) {
var tableID = '#' + $(this).closest('table').attr('id');
if ($(e.target).closest('tr').is(':last-child')) {
var currTR = $(e.target).closest('tr');
var currTRhtml = '<tr>' + currTR.html() + '</tr>';
var nextRow = $(currTRhtml);
var checkBox = $('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
$(tableID).append(nextRow);
checkBox.appendTo(currTR);
}
});
Notice I'm passing the event as "e" and then referencing the current input box with $(e.target).
Here's a working JS fiddle.
I suspect the problem is that you need to delegate the input event as the appended rows do not exist on $(document).ready(). Try doing something like this to delegate the handler:
$(document).ready(function () {
$('table.form-table tbody').on('input', 'tr', function () {
var self = $(this),
tableID = '#' + self.closest('table').attr('id'),
currTR = self.closest('tr'),
currTRhtml = '<tr>' + currTR.html() + '</tr>',
nextRow = $(currTRhtml),
checkBox = $('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
if (currTR.is(':last-child')) {
$(tableID).append(nextRow);
checkBox.appendTo(currTR);
}
});
});
Fiddle: http://jsfiddle.net/KW7ET/
I have two fields Course name and Course code, the values of this name and course are "Master of Arts" and "MA", am trying to update these fields, for this am calling the jQuery function,
function updateData(obj) {
var id = obj.id.split("_"); //here the value of id is "id[1,1,CODE]"
var objId = id[0]; //objId=1
var type = id[1]; //type=1
var objUpdate = new Object();
objUpdate.Id = objId;
objUpdate.Name = $("#" + objId + "_" + type + "_NAME").val();
objUpdate.Code = $("#" + objId + "_" + type + "_CODE").val();
}
after the execution of objUpdate.Name the value is coming as "Master of Arts" and objUpdate.Code as "MA".
how its getting the name and code, can anyone explain this.
the HTML am using here is
<table class='acListTable' id='#ID#TYPE'>
<tr>
<td>
<input type='text' class='acEditBox' id='#ID_#TYPE_NAME' value='#NAME'/>
</td>
</tr>
<tr>
<td>
<input type='text' class='acEditBox' id='#ID_#TYPE_CODE' value='#CODE'/>
</td>
</tr>
</table>