I've table with inline create (when user click on new button it create new empty row first in the table, which he can put data inside),when user click on save I go to the controller and check if this values are valid,if yes store them on the DB.if not I raise exception to the UI and not store the data.The problem is that the new row is not stored but I see it in the UI. just when I refresh the page in the browser the line was omitted..
My question is if there is a way by code search for the first line of the table and remove it explicitly from the UI?
I try like the following but its not refresh the table,any idea?
$("table:first").find("tr:first").remove();
The following should work with a general table.
HTML
<table>
<tbody>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
</tbody>
</table>
<br />
<br />
<input type="submit" id="btnAdd" value="add"></input>
<input type="submit" id="btnRemove" value="remove"></input>
jquery
$(function () {
$("#btnAdd").click(function () {
$("table:first > tbody").prepend('<tr><td>new row</td></tr>');
});
$("#btnRemove").click(function () {
$("table:first tr:first-child").remove();
});
});
Working example: http://jsfiddle.net/5NxL4/
Related
I'm attempting to change an Input label in my cshtml file by using my JS script, when any drop down selection is made. I've followed the documentation - but I'm not getting the intended result. There are no compile or runtime errors - and I have cut out anything that I didn't think was necessary for you all to see. Please let me know if I've left something out.
HTML:
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>
JS:
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').text('Changed')
}
I've removed the many table row tags, and the data source loads correctly as well. What I expect to happen is that when the drop down (#searchByInput) is changed, the text on the label (#entryFieldInputLabel) is changed to "Changed"
Use html selector instead of text (td has no text proprety ):
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').html('Changed');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr><td id="entryFieldInputLabel" class="inputLabel" align="right">1234</td>
</tr>
</table>
It would be better if you use span inside your table td
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel span').html('Changed')
}
/*
or simply
$('#searchByInput').change(function(){
$('#entryFieldInputLabel').html('Changed');
})
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr><td id="entryFieldInputLabel" class="inputLabel" align="right"><span>123</span></td>
</tr>
</table>
You just need to add <table> Markup so jQuery can select your <td> tag ID
<table>
<tr>
<td id=""></td>
</tr>
</table>
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange);
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').text('Changed!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr>
<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>
</tr>
</table>
This issue is resolved, and can be closed. The solutions offered both reaffirmed that the issue was not in the code I provided. After experimentation, the solution was found in the order in which the "change" call was made in the JS ready function.
This particular call needed to be made after the page specific HTML was loaded, but before the kendo data was bound by ID.
I am totally new to Knockout JS.I am having a table in which one column is input type checkbox.
at the end of html table I have one button as "Add".
Now what I want to do is on click of "Add" button I should be able to get all the rows in which checkboxes are checked.
HTML
<table>
<thead>
<tr>
<th>Add Data</th>
</tr>
</thead>
<tbody data-bind="foreach: SearchResult">
<tr>
<td data-bind="text: Name"></td>
<td><input type="checkbox" class="" data-bind="checked: selectedArray"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button type="button" id="addButton" data-bind="click: AddSelection">Add</button></td>
</tr>
</tfoot>
</table>
Now can anybody tell me how can I get all the rows in which checkbox column is checked.
I have gone through this but this didn't work for me.
send information from multiple checkbox to array Knockout js
fiddle for reference
http://jsfiddle.net/smsharma/u9ts4uvf/
Here's the updated fiddle: http://jsfiddle.net/u9ts4uvf/1/
You can create an addItem function, that creates a new item, and adds it to the array availableItems:
self.addItem = function() {
var item = new BookItem(1, 'Lorem Ipsum', '$0.99');
item.Selected(true);
self.availableItems.push(item);
};
But you also need to add a checked binding to the checkboxes to ensure that they are checked when Selected is set to true for BookItem:
<input type="checkbox" data-bind="value: id(), click: $root.toggleAssociation, checked: Selected" />
So I am new to AngularJS and I am looking to create good code because my application is going to scale.
Now, I have a list of competences that I'll get from my API, and then I need to make a list of them with a checkbox, so the user will select/deselect from the list, and then submit that form.
So how can I achieve that? What should be in the ng-model of every checkbox? Should I create a form with all the values in set in false?
Here's my controller code now:
function Controller(Competence) {
var vm = this;
vm.competences = [];
function initController() {
Competence.getAll()
.then(function(data) {
vm.competences = data;
});
}
initController();
}
And here's my view code:
<table>
<thead>
<tr>
<th width="90%">Competence</th>
<th width="10%">Select</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="competence in vm.competences">
<td>{{ competence.name }}</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
So far your code looks good. To set checkbox values, just add ng-model="competence.selected" to each checkbox input element like this:
<input type="checkbox" ng-model="competence.selected">
Now when you select the checkbox it will set competence.selected to true, and when you deselect it the value will be false.
Form Submission
Wrap your table in a <form> with an ng-submit attribute, and create a function to submit the form:
<form ng-controller="MyCtrl as vm" ng-submit="vm.submitForm()">
<!-- your table here ... -->
<input type="submit" value="Submit">
</form>
In your controller:
vm.submitForm = function(){
vm.competences.forEach(function(competence){
if(competence.selected) console.log(competence);
// or POST the competences using the $http service ...
})
}
See JSFiddle also: Checkbox Demo
I have a table that has 10 rows and 3 columns and each row has a checkbox associated with it. The user can select any number of rows and when he presses the Submit button an alert message needs to be displayed containing the values in all the selected rows preferably as a JSON string. How do I extract all the selected rows alone and convert it to a JSON string using either Javascript or Jquery?
I hope I've understood your requirements well. Please consider this solution.
$('#btn-table-rows').click(function (event) {
var values = [];
$('table #row-selector:checked').each(function () {
var rowValue = $(this).closest('tr').find('td.row-value').text();
values.push(rowValue)
});
var json = JSON.stringify(values);
alert(json);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #1: Hello</td>
</tr>
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #2: World</td>
</tr>
</table>
<button id="btn-table-rows">Process</button>
I have a main textbox(Months), on the change of which, a dropdown menu is created for another textbox(Days). Once I have these populated, I save it. Now when I go back to edit it, I directly want to change the option in the Days textbox, but since the dropdown of Days is triggered on change of the textbox "Months" I do not get the dropdown of days.
The following is my code:
function editValues() {
//initializations
$('.Months').on("change", function(){
monthsValueSet = this.value;
//pass monthsValueSet to database to retrieve values
$('.Days').html("");
for(i=0;i<data.length;i++){
$('.Days').append('<option>' + data[i].days + '</option');
}
});
}
//code for Save button
//code for edit
$("#daysMonthsTable").on("click", ".edit-months", function(event){
editValues();
});
My HTML code is:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<tr>
<td>
<div class="Months">
<table>
<tbody>
<tr>
<td><label>Months</label></td>
<td ><input type="text" class="Months"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div class = "Days">
<table>
<tbody>
<tr>
<td><label>Days</label></td>
<td><input type="text" class="Days"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</body>
</html>
Do following
$("#daysMonthsTable").on("click", ".edit-months", function(event){
editValues();
$('.Months').trigger("change");
});