first of all, thanks for the help. I am sure I'm doing something stupid somewhere but i cannot figure it out and it's driving me crazy. I tried to dollow many articles and suggestion on SO that was working for the other users but not for me.
I am building an app in jQuery, using handlebars as for templating, and getting the data from a backend api built in codeigniter.
I am using an IF statement within an #each to display the check in a checkbox if it was already checked.
The issue is that the IF statement doesn't seem to work within #each, since it display all the checkboxes as checked if they clearly aren't.
the jquery function is the following:
var load_checklist = function() {
var $checklistTable = $('#checklist-table');
var $row = $('#checklist-row').html();
$.get(BASE_URL + '/uapi/get_checklist', function(o) {
var template = Handlebars.compile($row);
$checklistTable.append(template(o));
}, 'json');
};
this is the html piece:
<tbody id="checklist-table">
<script id="checklist-row" type="text/x-handlebars-template">
{{#each checklist}}
<tr data-id="{{title}}">
<td>
<label class="fancy-checkbox">
<input type="checkbox" {{#if completed}}checked="checked"{{/if}}>
<span></span>
</label>
</td>
<td colspan="2">{{title}} completed {{completed}}</td>
<td style="text-align: right;">
<button class="btn-view-fund btn btn-default btn-xs" type="button">
<span class="glyphicon glyphicon-list" aria-hidden="true"></span>
</button>
<button class="btn-view-fund btn btn-default btn-xs" type="button">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
{{/each}}
</script>
</tbody>
and the output from the api is the following:
{
"checklist": [{
"checklist_id": "1",
"user_id": "2",
"title": "test1",
"decription": "test",
"action": "test",
"action_target": "test",
"completed": "0",
"date_added": "2017-01-23 19:31:49",
"date_modified": "2017-01-23 19:31:49"
}, {
"checklist_id": "6",
"user_id": "2",
"title": "test2\r\n",
"decription": "test",
"action": "test",
"action_target": "test",
"completed": "1",
"date_added": "2017-01-23 19:31:49",
"date_modified": "2017-01-23 19:32:17"
}, {
"checklist_id": "11",
"user_id": "2",
"title": "test1",
"decription": "test",
"action": "test",
"action_target": "test",
"completed": "0",
"date_added": "2017-01-23 19:31:49",
"date_modified": "2017-01-23 19:31:49"
}]
}
I have alsot tried to do it through a helper adding but it doesn't work.
Handlebars.registerHelper('ifIsOne', function(value, options) {
if(value === 1) {
return options.fn(this);
}
return options.inverse(this);
});
this is the version I'm using
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
and jquery-2.1.1.min.js.
Thank you
Related
I need to generate following Json Object daynamically from inputs
{
"name":"USA",
"parents": [
{
"state":"California",
"id":"12",
"child":[
{
"city":"Los Angeles",
"id":"1"
},
{
"city":"San Francisco",
"id":"2"
}
]
},
{
"state":"Texas",
"id":"33",
"child":[
{
"city":"Dallas",
"id":"3"
},
{
"city":"Houston",
"id":"4"
}
]
}
]
}
from this Table of inputs
<table id="tTypeTable" class="table table-bordered" hidden="hidden" >
<tr>
<th><a class="btn btn-primary" onclick="add_tTypeParentField();"></th>
</tr>
<!-- ko foreach: {data: tTypeParentFields, as: 'tParentField'} -->
<tr>
<td>
<table class="table table-hover" >
<tr>
<th> State </th>
<th> </th>
</tr>
<tr title="tParentRow" >
<td>
<input id="state" data-bind="value: tParentField[0]"
onblur="createJSON()"/>
</td>
<td>
<input id="value" data-bind="value: tParentField[0]"
onblur="createJSON()"/>
</td>
</tr>
</table>
<table id="tChild" class="table table-hover" >
<tr>
<th> City </th>
<th> </th>
<th> <a id="childAdd" onclick="addChild(this);"></th>
</tr>
<tbody>
<tr title="tChildRow" id="tChildRow">
<td>
<input id="cityName" onblur="createJSON()"/>
</td>
<td>
<input id="cityValue" " onblur="createJSON()"/>
</td>
<td>
<a id="removeChild" onclick="deleteChild(this)" ></a>
</td>
</tr>
</tbody>
</table>
<td> <a data-bind="click: removeTTypeParentField" ></a></td>
</td>
</tr>
<!-- /ko -->
</table>
<div class="col-md-11 ">
<textarea class="form-control" id="requestData" ></textarea>
</div>
there is no problem with adding new row of inputs. I have used Knockouts for addding Parent table and used jQuery for adding child table. it's working well.
The problem is that generating Json child Object (cities).
I have tried to get value of inputs and generate Json Object in textare like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script th:inline="javascript">
function createJSON() {
var jsonObj = [];
$(document).ready(function() {
var valueTypeTChild = [];
var valueTypeTParent = [];
$("tr[id=tParentRow]").each(function() {
$(this).find('tr[id=tChildRow]').each(function () {
child = {
city: $(this).find('#cityName').val(),
id: $(this).find('#cityValue').val()
};
valueTypeTChild.push(child);
});
parent = {
city:$(this).find('#state').val(),
id:$(this).find('#value').val(),
child: valueTypeTChild
};
valueTypeTParent.push(parent);
);
inputItem = {
"name":"Country",
parents: valueTypeTParent
};
jsonObj.push(inputItem);
});
$('#requestData').val(JSON.stringify(jsonObj));
console.log(JSON.stringify(jsonObj));
</script>
But I'm getting this
{
"name": "USA",
"parents": [
{
"state": "California",
"id": "12",
"child": [
{
"city": "Los Angeles",
"id": "1"
},
{
"city": "San Francisco",
"id": "2"
},
{
"city": "Dallas",
"id": "3"
},
{
"city": "Houston",
"id": "4"
}
]
},
{
"state": "Texas",
"id": "33",
"child": [
{
"city": "Los Angeles",
"id": "1"
},
{
"city": "San Francisco",
"id": "2"
},
{
"city": "Dallas",
"id": "3"
},
{
"city": "Houston",
"id": "4"
}
]
}
]
}
You are giving every state the same city array without clearing it.
Move var valueTypeTChild = []; inside the $("tr[id=tParentRow]").each(function() { loop.
I have a template that I run through some data coming from a local JSON File.
<tbody>
<% data.t_upcoming.forEach((record) => { %>
<tr>
<td><%=record.date%>
<span style="display: block;font-size:10pt;"><%=record.time%></span>
<p class="timer" style="font-size: 8pt; color: red;"></p>
</td>
<td>
<input type="image" class="web_camera" src="/img/camera.png">
</td>
<td><a style="color:black;" href='/course-description'><%=record.course%></a>
<span style="display:block;font-size:10pt;"><%=record.course_type%></span>
</td>
<td>
<% record.student.forEach((person) => { %>
<img rel="tooltip" data-placement="top" title="<%=person.name%>" src="<%=person.image%>">
<% }) %>
</td>
<td>Recieved
<span style="display:block; font-size: 16pt; color:#7c0000;"><%=record.status%></span>
</td>
<td>
<button data-toggle="modal" data-target="#MessageModal" rel="tooltip" data-placement="top" title="Send Message" class="record_icons"><img src="/img/message.png"></img></button>
<button rel="tooltip" data-placement="top" title="Add Course" class="record_icons"><img src="/img/plus-course-record.png"></img></button>
<img src="/img/nike.png"></img>
<button data-toggle="modal" data-target="#ChangeModal" rel="tooltip" data-placement="top" title="Change Course" class="record_icons"><img src="/img/change.png"></img></button>
<button data-toggle="modal" data-target="#CancelModal" rel="tooltip" data-placement="top" title="Cancel Course" class="record_icons"><img src="/img/x.png"></img></button>
</td>
</tr>
<% }) %>
</tbody>
Here is my Json File for reference
{
"t_upcoming": [{
"id": 1,
"date": "April 24, 2018 14:53:25",
"time": "2 to 4pm",
"status":"$45",
"course": "Oil Painting",
"course_type": "(Individual)",
"student":[
{
"name": "Ann Perkins",
"image": "/img/student-icon.png"
}
],
"completion": "Completed"
},{
"id": 2,
"date": "April 23, 2018 16:37:25",
"time": "2 to 4pm",
"status":"$45",
"course": "Art",
"course_type": "(Group)",
"student":[
{
"name": "Ann Perkins",
"image": "/img/student-icon.png"
},
{
"name": "Ann Perkins",
"image": "/img/student-icon.png"
},
{
"name": "Ann Perkins",
"image": "/img/student-icon.png"
}
],
"completion": "Completed"
},{
"id": 3,
"date": "April 22, 2018 15:37:25",
"time": "2 to 4pm",
"status":"$45",
"course": "Algebra",
"course_type": "(Group)",
"student":[
{
"name": "Ann Perkins",
"image": "/img/student-icon.png"
},
{
"name": "Ann Perkins",
"image": "/img/student-icon.png"
},
{
"name": "Ann Perkins",
"image": "/img/student-icon.png"
}
],
"completion": "Completed"
}]
}
Now I want to add extra functionality to this table I have. I want to be able to either sort by the date or sort by the course.
<select>
<option selected>Sort</option>
<option>Date</option>
<option>Course</option>
</select>
This is where I end up being a little stuck. How would I add the select dropdowns for dates and courses without having to render a new page? Currently I just cycle through each piece of data and print them in the order of how the table looks but I want to be able to sort not only by a date but also to the course.
When i use this code in my controller. I think ng-model can output value based on input right ?
ng-model = "$scope.title"
But when i implementation update data in my code. I'm confused because ng-model can output value but The value still output data.title even though I edited title input.
I edited this form in "tes1234" but the output still "tes"
Anybody to give me solution ? Thanks.
UPDATED
This my HTML code :
<div class="form-group">
<label class="control-label col-md-3">Title</label>
<div class="col-md-6">
<input type="text" name="title" class="form-control" ng-model="title">
</div>
</div>
$scope.result grab data from API and then I use ng-repeat
HttpService("POST", url, param, function(response){
$scope.parsing = angular.fromJson(response.data);
$scope.result = {};
angular.forEach($scope.parsing, function(item){
$scope.result[item._id] = item;
});
});
This is GetData() to grab data based on clicked and pass in my form
<tbody ng-repeat="data in result">
<tr>
<td>
{{$index + 1}}
</td>
<td>
{{ data._id }}
</td>
<td>
{{ data.title }}
</td>
<td>
{{ data.category.label }}
</td>
<td>
{{ data.user.name }}
</td>
<td width="20%">
<button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
<button type="button" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</td>
</tr>
</tbody>
This is GetData() to grab data based on clicked and pass in my form
$scope.getData = function(data) {
$scope.title = data.title;
}
And this is my save after data updated
$scope.Save = function() {
var data = $.param({
title : $scope.title,
});
console.log(data);
};
Data Object Based From API
{
"status": "200",
"data": [
{
"_id": "589c0484a6551f948e1d6914",
"parent_id": 0,
"parent_source": 0,
"category_id": "58942caba6551fd2c3347371",
"user_id": "58942d43a6551fd7123bdcb1",
"active": 1,
"status": 1,
"title": "coba tes",
"description": "coba tes",
"url": "coba-tes_6llapm",
"extra": "EXTRA",
"responded": "2017-02-09 12:56:20",
"level": 0,
"editor_pick": 0,
"up_vote": 0,
"down_vote": 0,
"revision": 0,
"answer_count": 2,
"updated_at": "2017-02-09 13:04:14",
"created_at": "2017-02-09 12:56:20",
"tags": [],
"user": {
"_id": "58942d43a6551fd7123bdcb1",
"status": 1,
"username": "asdasdad",
"email": "asdasdasd#gmail.com",
"image": "https://scontent.xx.fbcdn.net/v/t1.0-1/p50x50/16299070_1114043338706757_6701359761657365227_n.jpg?oh=7ed22de2d576dc9d3cfd6a89aa386153&oe=5942BC1F",
"about": "ini saya, saya suka makan dan belanja",
"ref_id": "https://www.facebook.com/app_scoped_user_id/1104332756344482/",
"name": "asdasd",
"login_ip": "192.168.100.4",
"notif_check": "2017-02-03 14:12:03",
"token": "$2y$10$EMGp1wWnnPUDRJ/dSybCIeei88jROcAqsAsgXri2l8j/H8FMSt5iS",
"updated_at": "2017-02-10 10:52:33",
"created_at": "2017-02-03 14:12:03"
},
"category": {
"_id": "58942caba6551fd2c3347371",
"label": "My Kids and I",
"active": 1,
"url": "my-kids-and-i",
"parent_id": 0,
"level": 0,
"dfp_interest": "[]",
"meta_title": "",
"meta_description": "",
"meta_keyword": "",
"updated_at": "2017-02-03 14:09:31",
"created_at": "2017-02-03 14:09:31"
}
}]
}
Just change var data = $.param... to $scope.data=$.param....
change the getDate Function like this
$scope.getData = function(data) {
$scope.title = data[0].title;
}
I have added demo.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.result = {
"status": "200",
"data": [{
"_id": "589c0484a6551f948e1d6914",
"parent_id": 0,
"title": "coba tes",
}]
}
$scope.getData = function(data) {
console.log(data);
$scope.title = data.title;
};
$scope.save = function() {
console.log($scope.title);
$scope.title;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div class="form-group">
<label class="control-label col-md-3">Title</label>
<div class="col-md-6">
<input type="text" name="title" class="form-control" ng-model="title">
</div>
</div>
<table>
<tr ng-repeat="data in result.data">
<td>
{{$index + 1}}
</td>
<td>
{{ data._id }}
</td>
<td>
{{ data.title}}
</td>
<td>
{{ data.category.label }}
</td>
<td>
{{ data.user.name }}
</td>
<td width="20%">
<button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
<button type="button" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
</td>
</tr>
</table>
<button type="button" class="btn btn-primary" ng-click="save()"><i class="fa fa-edit"></i> Save</button>
</div>
my HTML code,
I want each user role is selected next to the select box of each user name,
inside the each loop of role i cant able to access the role of parent user node,
is it possible to compare the role id of user node with roles node roleid and when its equal, the option will be selected
<table>
<tr>
<p>peter is employee</p>
<p>john is admin</p>
<p>michel is manager</p>
</tr>
{{#user}}
<tr>
<td>
<input type="text" value="{{name}}">
</td>
<td>
<select>
{{#each ../roles}}
<option value="{{roleid}}">{{value}}</option>
{{/each}}
</select>
</td>
</tr>
{{/user}}
This is may Json
var data = {
"user": [
{ "name": "peter", "role": 1 },
{ "name": "john", "role": 2 },
{ "name": "michel", "role": 3 }
],
"roles": [
{ "roleid": 1, "value":"manager"},
{ "roleid": 2, "value":"employee"},
{ "roleid": 3, "value":"admin"}
]
};
fiddle url https://jsfiddle.net/Manu_S/egbwbfav/2/
thanks
You can access the parent node values and compare in your select box.
Please follow the Jsfiddle working that
https://jsfiddle.net/gsubbarao/nz0bc0pq/
<script id="t" type="text/x-handlebars">
<table>
<tr>
<p>peter is employee</p>
<p>john is admin</p>
<p>michel is manager</p>
</tr>
<tr>
<td> </td><td></td><td></td>
</tr>
{{#user}}
<tr>
<td>
<input type="text" value="{{name}}">
</td>
<td>
<select>
{{#each ../roles}}
<option value="{{roleid}}"
{{#ifCond ../role roleid}}
selected
{{/ifCond}}
>
{{value}}
</option>
{{/each}}
</select>
</td>
</tr>
{{/user}}
</script>
var data = {
"user": [
{ "name": "peter", "role": 2 },
{ "name": "john", "role": 3 },
{ "name": "michel", "role": 1 }
],
"roles": [
{ "roleid": 1, "value":"manager"},
{ "roleid": 2, "value":"employee"},
{ "roleid": 3, "value":"admin"}
]
};
Handlebars.registerHelper('ifCond', function(v1, v2, options) {
if(v1 === v2) {
return options.fn(this);
}
return options.inverse(this);
});
var t = Handlebars.compile($('#t').html());
$('body').append(t(data));
I display a list by using the v-repeat directive.
http://jsfiddle.net/ftc9ev7p/1/
Please notice the dynamically created argument of the v-el directive, which is made of
v-el="inputField{{task.id}}"
or alternatively
v-el="{{'inputField' + task.id }}"
Still it doesn't get recognized, since I get:
Uncaught TypeError: Cannot read property 'focus' of undefined
I want to click the edit button and have the according input field focused on.
A similar syntax works, when I dynamically add a css class. Just uncomment the line with the .focus() and click "edit".
new Vue({
el: '#tasks',
data: {
"tasks": [{
"id": 25,
"body": "Slack Noooo Yes",
"completed": true,
"created_at": "2015-08-05 17:00:26",
"updated_at": "2015-08-05 17:00:26"
}, {
"id": 27,
"body": "And",
"completed": false,
"created_at": "2015-08-05 17:22:14",
"updated_at": "2015-08-05 17:22:14"
}, {
"id": 28,
"body": "Happiness",
"completed": false,
"created_at": "2015-08-05 17:22:16",
"updated_at": "2015-08-05 17:22:16"
}, {
"id": 29,
"body": "Love",
"completed": true,
"created_at": "2015-08-06 07:45:02",
"updated_at": "2015-08-06 07:45:02"
}],
newTask: ''
},
methods: {
editTask: function(task) {
var inputField = 'inputField' + task.id;
alert(inputField);
var self = this;
self.$$.inputField.focus();
document.querySelector(".task" + task.id).className += " edit";
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.min.js"></script>
<table class="table" id="tasks">
<thead>
<tr>
<th>Task</th>
<th>Edit</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-repeat="task: tasks">
<td class="todo">
<span class="task{{ task.id }}" v-on="dblclick: editTask(task)">
{{ task.body }}
</span>
</td>
<td>
<input type="text" class="editInputField" v-el="inputField{{ task.id }}" value="{{ task.body }}" v-on="keyup:editTask(task) | key 'enter'">
</td>
<td>
<button class="btn btn-xs btn-primary" v-on="click: editTask(task)">Edit</button>
</td>
</tr>
</tbody>
</table>
Here is the jsfiddle:
http://jsfiddle.net/ftc9ev7p/1/
You don't really have to number the elements by v-el since you can get a child ViewModel created by v-repeat. The official guide is on http://vuejs.org/guide/events.html#Invoke_Handler_with_Expression.
You can pass this to editTask in v-on and then you can get the child ViewModel by the first argument:
<div v-repeat="task: tasks">
<span class="task" v-el="label" v-on="dblclick: editTask(this)">
<input type="text" v-el="inputField" class="editInputField" value="{{ task.body }}">
</div>
editTask: function (task) {
task.$$.inputField.focus();
task.$$.label.className += " edit";
}
Also you can get the targetVM by using event.targetVM in the function without the need of passing this to your function.
<div v-repeat="task: tasks">
<span class="task" v-el="label" v-on="dblclick: editTask()">
<input type="text" v-el="inputField" class="editInputField" value="{{ task.body }}">
</div>
editTask: function () {
event.targetVM.$$.inputField.focus();
event.targetVM.$$.label.className += " edit";
}
JS Fiddle: http://jsfiddle.net/n1ef18uq/1/