How can i accomplish the following using knockout js? - javascript

I am trying to learn knockout.js and in an attempt to make my own code, this is what i came up with. It is a hotel package proposal where a user clicks on add hotel, and text boxes relating to hotels appear. I also want the initialized data to show in the text boxes.
I'm using this as reference.
http://knockoutjs.com/examples/contactsEditor.html
Right now, the text boxes are not showing the initial data, and the code breaks when i click on add hotels
my knockout code
function Proposal(details,fee, hotelproposal) {
var self = this;
self.details = details;
self.fee = fee;
self.hotelproposal= ko.observableArray(hotelproposal);
}
function hotel(hotelname,checkin,checkout,roomtype, viewtype){
self.hotelname=hotelname;
self.checkin=checkin;
self.checkout=checkout;
self.roomtype=roomtype;
self.viewtype=viewtype;
}
// Overall viewmodel for this screen, along with initial state
function ProposalViewModel() {
var self = this;
self.info=ko.observable( new Proposal("these are the details", 1200,[new hotel("Hilton","202020","202020","double", "city") , new hotel("Hilton2","2020201","2020201","triple", "sea")]));
self.addhotel = function(hotel) {
self.info.Proposal.hotelproposal.push({
hotelname:"",
checkin:"",
checkout:"",
roomtype:"",
viewtype:""
});
};
}
ko.applyBindings(new ProposalViewViewModel());
my html code:
<h2>Proposal</h2>
<div >
<table>
<tr>
<th>Details</th>
<th>fee</th>
<th>Hotels</th>
</tr>
<tbody data-bind="foreach: info">
<tr>
<td>
<input data-bind='value: Proposal.details' />
</td>
<td><input data-bind='value: fee' /></td>
<td>
<table>
<tbody data-bind="foreach: info.hotelproposal">
<tr>
<td><input data-bind='value: hotelname' /></td>
<td><input data-bind='value: checkin' /></td>
<td><input data-bind='value: checkout' /></td>
<td><input data-bind='value: roomtype' /></td>
<td><input data-bind='value: viewtype' /></td>
</tr>
</tbody>
</table>
<a href='#' data-bind='click: $root.addhotel'>Add hotel</a>
</td>
</tr>
</tbody>
</table>
</div>
This code is not working. Can someone point out whats wrong?

Related

I'm trying to create an html form to generate an url address based on input to a field

I am trying to create a small HTML document for my team to use to create fake devices for testing purposes in our program. We currently have a link to do this with but we have to manually change parts of it in the URL field before hitting enter to process it. I came up with the idea of creating this form so we can make sure that we are filling in all the elements of the URL correctly and then copy and paste the created URL into the browser. There are static parts of the address that we don't change and then there are values we update after the '=' sign. There are 4 different environments that we can use this in.
I admit it has been a while since I last worked in HTML so I've been trying to search forums and sites like W3School to find the segments of code that I think will serve the purpose I'm aiming for. The following code is where I have gotten so far but can't get it to work the way I've intended it to. If anyone can provide suggestions or feedback on what I missed or did wrong I'd appreciate it. Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Item birth generator</title>
<script>
function mySubmit() {
var addStart;
var addPart1 = "part1=";
var addPart2 = "&part2=";
var addPart3 = "&part3=";
var addPart4 = "&part4=";
var addPart5 = "&part5=";
var addPart6 = "&part6=";
var addPart7 = "&part7=";
var addPart8 = "&part8=";
var myChoice = "choice";
if (myChoice.value == "choice1")
{addStart="https://address1?";}
else if (myChoice.value == "choice2")
{addStart="https://address2?";}
else if (myChoice.value == "choice3")
{addStart="https://address3?";}
else (myChoice.value == "choice4")
{addStart="https://address4?";}
var address = addStart.concat(addPart1, "mInput1", addPart2, "mInput2", addPart3, "mInput3", addPart4, "mInput4", addPart5, "mInput5", addPart6, "mInput6", addPart7, "mInput7", addPart8, "mInput8");
document.getElementById("demo").innerHTML = address;
}
</script>
</head>
<body>
<font> <H3>Please fill in the appropriate fields and then click Generate to create a url for an item in the chosen environment.</H3></font>
<form target="_self" id="demo" name="item" method="post" onSubmit="return checkValue();">
<input type="radio" name="choice" id="ch1" value="choice1" checked> Choice 1 <input type="radio" name ="choice" id="ch2" value="choice2"> Choice 2 <input type="radio" name="choice" id="ch3" value="choice3"> Choice 3 <input type="radio" name ="choice" id="ch4" value="choice4"> Choice 4
<br><br>
<table>
<tbody>
<tr>
<td>Item Part 1</td>
<td><input type="text" name="mInput1" maxlength="13"></td>
</tr>
<tr>
<td>Item Part 2</td>
<td><input type="text" name="mInput2"></td>
</tr>
<tr>
<td>Item Part 3</td>
<td><input type="text" name="mInput3"></td>
</tr>
<tr>
<td>Item Part 4</td>
<td><input type="text" name="mInput4"></td>
<tr>
<td>Item Part 5</td>
<td><input type="text" name="mInput5"></td>
</tr>
<tr>
<td>Item Part 6</td>
<td><input type="text" name="mInput6"></td>
</tr>
<tr>
<td>Item Part 7</td>
<td><input type="text" name="mInput7"></td>
</tr>
<tr>
<td>Item Part 8</td>
<td><input type="text" name="mInput8"></td>
</tr>
<tr>
</tr>
<tr>
<td><input type="submit" value="Generate" onclick="mySubmit()"></td>
</tr>
</tbody>
</table>
<br>
<input type="text" size="250" name="address" value=''>
</form>
</body>
</html>
There is an error with this line:
var s.address = s.addStart.concat(addPart1, mInput1, addPart2, mInput2, addPart3, mInput3, addPart4, mInput4, addPart5, mInput5, addPart6, mInput6, addPart7, mInput7, addPart8, mInput8);
Verify what you are using is valid by testing the variables (output with a console.log or an alert) and check the command syntax. :)

CRUD operations in angularjs with REST API

The CRUD operations with AngularJS are working fine. On click of submit button values get submitted in db, but its not getting reflected on view with at the same time.
Either I required separate button for showing values from database or I need to click twice.
My view:
<div style="float:left; margin-left:50px;">
<div><label for="id">Update Records</label></div><br>
<table>
<tr >
<td><label for="id">Id:</label> </td>
<td><input type="text" name="id" ng-model="user.id"/></td>
</tr>
<tr >
<td><br><label for="uname">Name:</label> </td>
<td><input type="text" name="uname" ng-model="user.uname"/></td>
</tr>
<tr>
<td><br><label for="ucity">City:</label> </td>
<td><input type="text" name="ucity" ng-model="user.ucity"/></td>
</tr>
<tr>
<td>
<a ng-click="updatecust(user.id,user.uname,user.ucity)" class="btn btn-primary">Update</a>
</td>
</tr>
<!--<tr>
<td><br>
<a ng-click="viewtable()" class="btn btn-primary">View All</a>
</td>
</tr> -->
</table>
</div>
My controller:
var phonecatControllers = angular.module('phonecatControllers', ['templateservicemod', 'navigationservice','restservice']);
$scope.updatecust=function(id,name,city){
console.log("update is clicked");
$scope.user={id:id,uname:name,ucity:city};
RestService.update(id,name,city).success( RestService.vieww().success(viewdata));
};
REST API:
var restservice = angular.module('restservice', [])
.factory('RestService', function ($http) {
return{
update: function(id,name,city){
console.log(id+name+city);
return $http.get("http://localhost/code/index.php/demo/updatedemo?id="+id+"& uname="+name+"&ucity="+city,{});
}
}
});
RestService.update(id,name,city).success( RestService.vieww().success(viewdata));
this should be changed to
RestService.update(id,name,city).success(function(){
RestService.vieww().success(function(data){
$scope.viewdata = data.data;
}));
});
by considering that, you have RestService function vieww to get the data array.
and in your HTML, you need to do ngRepeat for viewdata to display the table.

jquery / javascript to sum field only if checkbox on same row is checked

I have a jquery / javascript function that totals the number of cubes in my order. this works 100% and is below.
function calculateTotalVolume() {
var grandTotalCubes = 0;
$("table.authors-list").find('input[name^="cubicvolume"]').each(function () {
grandTotalCubes += +$(this).val();
});
$("#grandtotalcubes").text(grandTotalCubes.toFixed(2));
}
as mentioned the above works great. I need a second function to total the same field but only if an checkbox named treated is checked. each row has the checkbox named treated but as the table is dynamically generated, a counter is appended to the name each time hence my use of name^="treated"
I am after something like below but this doesn't work:
function calculateTotalTreatedVolume() {
var grandTotaltreatedCubes = 0;
$("table.authors-list").find('input[name^="cubicvolume"]').each(function () {
if($("table.authors-list").find('checkbox[name^="treated"]').checked){
alert('10');
grandTotaltreatedCubes += +$(this).val();
}
});
$("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
}
help appreciated as always.
UPDATE
Rendered HTML output [1 dynamic row added]: (Still in development so very rough, please excuse it)
<table class="authors-list" border=1>
<thead>
<tr>
<td></td><td>Product</td><td>Price/Cube</td><td>Qty</td><td>line total cost</td><td>Discount</td><td>Cubes per bundle</td><td>pcs per bundle</td><td>cubic vol</td><td>Bundles</td><td><input type="checkbox" class="checkall"> Treated</td>
</tr>
</thead>
<tbody>
<tr>
<td><a class="deleteRow"> <img src="http://devryan.tekwani.co.za/application/assets/images/delete2.png" /></a></td>
<td><input type="text" id="product" name="product" />
<input type="hidden" id="price" name="price" readonly="readonly"/></td>
<td><input type="text" id="adjustedprice" name="adjustedprice" /></td>
<td><input type="text" id="qty" name="qty" /></td>
<td><input type="text" id="linetotal" name="linetotal" readonly="readonly"/></td>
<td><input type="text" id="discount" name="discount" /></td>
<td>
<input type="text" id="cubesperbundle" name="cubesperbundle" >
</td>
<td>
<input type="text" id="pcsperbundle" name="pcsperbundle" >
</td>
<td>
<input type="text" id="cubicvolume" name="cubicvolume" size='5' disabled>
</td>
<td><input type="text" id="totalbundles" name="totalbundles" size='5' disabled ></td>
<td valign="top" ><input type="checkbox" id="treated" name="treated" ></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="15"><input type="button" id="addrow" value="Add Product" /></td>
</tr>
<tr>
<td colspan="3">Grand Total: R<span id="grandtotal"></span></td>
<td colspan="2">Ave Discount: <span id="avediscount"></span>%</td>
<td colspan="1">Total Cubes: <span id="grandtotalcubes"></span></td>
<td colspan="15">Treated Cubes: <span id="grandtotaltreatedcubes"></span></td>
</tr>
<tr>
<td colspan="15"><textarea rows="1" cols="50" placeholder="Specific Comments"></textarea><textarea rows="1" cols="20" placeholder="Customer Reference"></textarea>
</td>
</tr>
</tfoot>
</table>
First go the parent tr and then using find to find the checkbox in current row and also use checked with DOM object not jQuery object, you can use indexer to convert jQuery object to DOM object.
Change
if($("table.authors-list").find('checkbox[name^="treated"]').checked){
To
if($(this).closest('tr').find('checkbox[name^="treated"]')[0].checked){
checked is a property of the actual DOM element, and what you have is a jQuery element. You need to change this:
$("table.authors-list").find('checkbox[name^="treated"]').checked
To this:
$("table.authors-list").find('checkbox[name^="treated"]')[0].checked
-^- // get DOM element
Or more jQuery-ish:
$("table.authors-list").find('checkbox[name^="treated"]').is(':checked')
You can iterate through the "checked" checkboxes using $("table.authors-list").find('checkbox[name^="treated"]:checked') and use the value of the input nearest to it (assumed to be in the same row).
Assuming your table has many rows each having a checkbox and an input, you can use:
function calculateTotalTreatedVolume() {
var grandTotaltreatedCubes = 0;
// iterate through the "checked" checkboxes
$("table.authors-list").find('input[type="checkbox"][name^="treated"]:checked').each(function () {
// use the value of the input in the same row
grandTotaltreatedCubes += +$(this).closest('tr').find('input[name^="cubicvolume"]').val();
});
$("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
}
Try this:
var grandTotaltreatedCubes = 0;
// Cache the table object here for faster processing of your code..
var $table = $("table.authors-list");
$table.find('input[name^="cubicvolume"]').each(function () {
// Check if checkbox is checked or not here using is(':checked')
if ($table.find('checkbox[name^="treated"]').is(':checked')) {
grandTotaltreatedCubes += $(this).val();
}
});
$("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
Change the following line
if($("table.authors-list").find('input[name^="treated"]').checked){
To this
if($("table.authors-list").find('input[name^="treated"]').is(':checked')){

Get value from a textarea and place it in a new textarea with some added texts

I have a textarea (txtar1) that will be filled up by a user with HTML codes.
I have a 'generate' button;
When the 'generate button is clicked, the value from txtar1 will be placed in a another textarea (txtar2). But with some added css code.
here's what I've done:
HTML:
<table>
<tr>
<td valign="top"><label>Enter HTML Code : </label></td>
<td><textarea id="htmlcode_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="submit_btn" value="Generate" /></td>
</tr>
<tr id="new_html">
<td><label>New HTML</label></td>
<td><textarea id="new_htmlcode_txtarea"></textarea></td>
</tr>
javascript/jquery:
jQuery('#submit_btn').click(function(){
var newVal = jQuery('#htmlcode_txtarea').attr('value');
var addVal = "#af-form-1031686823 .af-element{float:left;}" +
"#af-form-1031686823 .af-clear{display:none}:" +
"#af-form-1031686823 .af-body input.text{width: 150px!important;margin0right:15px!important}" +
"#af-form-1031686823 .buttonContainer{margin-top:-6px!important}";
jQuery('#new_html').show();
jQuery('#new_htmlcode_txtarea').attr('value',newVal);
});
What should i Do?
easy wato achieve is make use of .val() function
$("#textarea2").val($("#textarea1").val() + "text to append ")

Change the value of a text box to its current order in a sortable tab

Edit: I have solved this by myself. See my answer below
I have set up a nice sortable table with jQuery and it is quite nice. But now i want to extend it.
Each table row has a text box, and i want i am after is to, every time a row is dropped, the text boxes update to reflect the order of the text boxes. E.g. The text box up the top always has the value of '1', the second is always '2' and so on.
I am using jQuery and the Table Drag and Drop JQuery plugin
Code
Javascript:
<script type = "text/javascript" >
$(document).ready(function () {
$("#table-2").tableDnD({
onDrop: function (table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Order: ";
for (var i = 0; i < rows.length; i++) {
debugStr += rows[i].id + ", ";
}
console.log(debugStr)
document.forms['productform'].sort1.value = debugStr;
document.forms['productform'].sort2.value = debugStr;
document.forms['productform'].sort3.value = debugStr;
document.forms['productform'].sort4.value = debugStr;
},
});
});
</script>
HTML Table:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr>
<td>Product</td>
<td>Order</td>
</tr>
</thead>
<tbody>
<tr class="row1" id="Pol">
<td>Pol</td>
<td><input type="textbox" name="sort1"/></td>
</tr>
<tr class="row2" id="Evo">
<td>Evo</td>
<td><input type="textbox" name="sort2"/></td>
</tr>
<tr class="row3" id="Kal">
<td>Kal</td>
<td><input type="textbox" name="sort3"/></td>
</tr>
<tr class="row4" id="Lok">
<td>Lok</td>
<td><input type="textbox" name="sort4"/></td>
</tr>
</tbody>
</table>
</form>
Hardnrg in #jquery ended up solving it for me.
It involved adding an id="" to each input:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr><td>Product</td> <td>Order</td></tr>
</thead>
<tbody>
<tr class="row1" id="Pol"> <td>Pol</td> <td><input id="Pol_field" type="textbox" name="sort1"/></td> </tr>
<tr class="row2" id="Evo"> <td>Evo</td> <td><input id="Evo_field" type="textbox" name="sort2"/></td> </tr>
<tr class="row3" id="Kal"> <td>Kal</td> <td><input id="Kal_field" type="textbox" name="sort3"/></td> </tr>
<tr class="row4" id="Lok"> <td>Lok</td> <td><input id="Lok_field" type="textbox" name="sort4"/></td> </tr>
</tbody>
</table>
</form>
And add this js to the OnDrop event:
for (var i=0; i < rows.length; i++) {
$('#' + rows[i].id + "_field").val(i+1);
}
Easy peasy!
Hmmm..
I think you want to do something like this:
$("input:text", "#table-2").each( function(i){ this.value=i+1; });
The $().each() function's info is here: http://docs.jquery.com/Core/each

Categories