Create a bootstrap grid column dynamically using jquery - javascript

I want to generate a bootstrap grid with columns: calss = "col-lg-6" and "col-lg-3".
here is the html:
<div class="container">
<div class="row">
<div class="col-lg-3">
<img src="../dist/images/test-info.png" alt="TEST-PLAN"/>
</div>
<div class="col-lg-6">
<img src="../dist/images/test-details.png" alt="TEST-DETAILS"/>
</div>
<div class="col-lg-3">
<img src="../dist/images/test-stats.png" alt="TEST-STATS"/>
</div></div></div>
However I would like to generate the above grid dynamically, in such a way that when class ="col-lg-6", it should display the 'TEST-STATS' image with its correct position mentioned in the json below:
var data = [
{
"widgetId": "widget_0",
"title": "Test Info",
"description": "",
"type": "info",
"dataType": "TEST_INFO",
"position": {
"col": 1,
"row": 1,
"size_x": 1,
"size_y": 4
}
},
{
"widgetId": "widget_1",
"title": "Test Details",
"description": "",
"type": "info",
"dataType": "TEST_DETAILS",
"position": {
"col": 2,
"row": 1,
"size_x": 2,
"size_y": 4
}
},
{
"widgetId": "widget_2",
"title": "Test Stats",
"description": "",
"type": "info",
"dataType": "TEST_STATS",
"position": {
"col": 4,
"row": 1,
"size_x": 1,
"size_y": 4
}
}]
Every image has its own position to render, so a conditional statement like:
if(class=="col-lg-6")
{//display image as 'TEST-DETAILS'}
how to create a dynamic template and write a javascript function to loop for the classes and display the image according to the position?
Thanks!!

There are a lots of example on internet.
One of the best that I used is : http://www.cssgrid.co/
Very light and powerful to work with.
EDIT: since 2017, I'm using the CSS flex attributes. In my opinion, the CSS Grid frameworks are not really helpful those days.

You can use the jQuery class selector in order to select the element with class col-lg-6 and then set the attribute alt to TEST-DETAILS
ex. $(".col-lg-6").attr("alt", "TEST-DETAILS")

Related

Query in looping through JSON data set in getting front-end output

I am using this JSON data and I am suppoose to get the output as the first line will contain "EPL-2015". The second as "Match Day 1". The third line as "Date" and the fourth line as "Team1 VS Team2". But I am getting only correct output in line 1 and I am not getting rest of the outputs. Please help me in getting the rest.I think I am doing wrong in looping through the data of JSON.
var myApp = angular.module('futsalApp', []);
myApp.controller('futsalController', function($scope) {
$scope.fixtures =
{
"name": "EPL-2015",
"rounds":
[
{
"name": "Match Day 1",
"matches":
[
{
"date": "2015-08-08",
"team1":
{
"key": "manutd",
"name": "Manchester United",
"code": "MUN"
},
"team2":
{
"key": "tottenham",
"name": "Tottenham Hotspur",
"code": "TOT"
},
"score1": 1,
"score2": 0
},
{
"date": "2015-08-08",
"team1":
{
"key": "bournemouth",
"name": "Bournemouth",
"code": "BOU"
},
"team2":
{
"key": "astonvilla",
"name": "Aston Villa",
"code": "AVL"
},
"score1": 0,
"score2": 1
}
]
}
]
}
})
.
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="fixtures-first" ng-repeat="fix in fixtures">
<a>
<h2 class="match-title"> {{fixtures.name}} </h2>
<p class="match-day"> {{fixtures.rounds.name}} </p>
<p class="match-day"> {{fixtures.rounds.matches.date}} </p>
</a>
</div>
</div>
</div>
Here are the problems. In this line:
<div class="fixtures-first" ng-repeat="fix in fixtures">
...you're not setting your loop correctly. fixtures is a Javascript object, not an array, so you're not looping the way you want. You also never use fix for anything, so I think you've misunderstood how to use ng-repeat.
What you probably mean to do is repeat over your matches array, which is an actual array. Below, note that fixtures.rounds[0] is the first element of your rounds array.
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="fixtures-first" ng-repeat="match in fixtures.rounds[0].matches">
<a>
<h2 class="match-title"> {{fixtures.name}} </h2>
<p class="round-name"> {{fixtures.round[0].name}} </p>
<p class="match-day"> {{match.date}} </p>
</a>
</div>
</div>
</div>

Angular radio selection not checked correctly

In my Angular1.x app, my models maps to my radio selection correctly, however the radio button itself is not selected except for the very last one. Not really sure what the problem is. I created a very small example below to illustrate this behaviour. Any help is greatly appreciated.
http://plnkr.co/edit/dgGCvtOEb9WKTNtQHjqd?p=preview
angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.questions = [{
"category": "Movies",
"questions": [{
"title": "M1",
"score": "4",
},
{
"title": "M2",
"score": "2",
}
]
},
{
"category": "Foods",
"questions": [{
"title": "F1",
"score": "3",
},
{
"title": "F2",
"score": "4",
}
]
},
{
"category": "Sports",
"questions": [{
"title": "S1",
"score": "5",
}]
}
];
});
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<div ng-repeat="(ccKey, cc) in todoList.questions">
<hr/>
<div>
<b style="color: red;">Category</b> : {{cc.category}}
</div>
<div ng-repeat="(qqKey, qq) in cc.questions">
<br/>
{{qq.title}} : Selected Score: {{qq.score}}
<br/>
<div ng-repeat="n in [].constructor(5) track by $index">
<input type="radio" ng-model="qq.score" name="q-{{ccKey}}-{{qqKey}}" value="{{$index+1}}"><br/>Score: {{$index+1}} : Group: q-{{ccKey}}-{{qqKey}}
</div>
</div>
</div>
</div>
</body>
</html>
Try removing the name attribute from your <input type="radio"> tag. This seems to be causing a conflict with what Angular is doing to manage your radio tags. I am able to see all categories selected, and the selections are still grouped within a given question.
In the Angular input[radio] docs, they do not show using a name attribute: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
If what you want is the initial selection of the values when the page first loads,then use
ng-value="($index+1).toString()"
Since your scores are given as strings, you need to convert the number to string to match the score when you use "ng-value". Or better, you can just set your scores as integers and leave the rest of the code unchanged:
todoList.questions = [{
"category": "Movies",
"questions": [{
"title": "M1",
"score": 4,
},
{
"title": "M2",
"score": 2,
}
]
}, ....
Here is a modified plunker

JsViews Checkbox binding from an inner loop

I am trying to get a two way binding for a checkbox in an inner loop using JsViews
Not sure if this is possible.
<div id="targetSelection"></div>
<script id="targetItem" type="text/x-jsrender">
<b>{^{:text}}</b>
<div id="answers_{^{:fieldName}}" class='collapse'>
{^{for answers ~fieldName=fieldName}}
<label>
<input type="checkbox" data-fieldName="{{>~fieldName}}" data-index="{{:index}}" data-link="{:selected}" checked="{^{:selected}}" /> {{:text}} : {^{:selected}}
</label>
<br /> {{/for}}
</div>
<br />
</script>
and the JS code:
var target = [{
"fieldName": "GENDER",
"text": "Gender",
"answers": [{
"index": 1,
"text": "Male"
}, {
"index": 2,
"text": "Female"
}, ]
}, {
"fieldName": "AGE",
"text": "Age",
"answers": [{
"index": 1,
"text": "15-19"
}, {
"index": 2,
"text": "20-24"
}, {
"index": 3,
"text": "25-29"
}, {
"index": 4,
"text": "30-34"
}, {
"index": 5,
"text": "35-39"
}, {
"index": 6,
"text": "40-44"
}, {
"index": 7,
"text": "45+"
}, ]
}];
$.each(target, function(questionIndex, question) {
$.each(question.answers, function(answerIndex, answer) {
answer.selected = true;
});
});
$("#targetSelection").html($.templates("#targetItem").render(target));
http://jsfiddle.net/22q7z9n9/
I am also trying to fire an event when the checkbox is changed
Thanks in advance
Did you check the JsViews docs? You are calling the render() method, not the link() method, and are using jsrender.js not jsviews.js!
So you need to load jsviews.js as in Example page, and then write: $.templates("#targetItem").link("#targetSelection", target);
See http://www.jsviews.com/#jsv-quickstart
Once you have read the basics, you can continue along the lines of:
{^{for answers}}
<label>
<input type="checkbox" data-link="selected" />
{{:text}} : {^{:selected}}
</label>
<br />
{{/for}}
For the event, there are a few options including to bind directly to the input change event, or listen to observable changes in your data etc. (http://www.jsviews.com/#observe). See the examples...
Here is a working version http://jsfiddle.net/28Lezc9m/4/.
I also changed: <div id="answers_{^{:fieldName}}" class='collapse'> to <div data-link="id{:'answers_ + fieldName" class='collapse'> - as explained in this tutorial sequence.

Displaying JSON with ng repeat

I have a JSON data in the format
[
{
"_1": {
"id": 4,
"cost": 45.0,
"measure": 4,
"NoOfUnits": 677,
"hours": null
},
"_2": {
"id": 1,
"name": "Truck",
"description": "Test"
}
},
{
"_1": {
"id": 1,
"cost": 1120.0,
"measure": 1,
"NoOfUnits": 500,
"hours": null
},
"_2": {
"id": 7,
"name": "PC300",
"description": null
}
},
]
I'm not able to display the data that I have store in a $scope variable say
$scope.result
This is my ng repeat functionality
<div ng-repeat="data in result">{{data.name}}{{data.description}}</div>
your $scope.result is contains 2 objects, with in one object u have set of object properties like _1,_2 , and then these properties are again objects like
"_1": {
"id": 4,
"cost": 45.0,
"measure": 4,
"NoOfUnits": 677,
"hours": null
}
, then u have the properties u need to print.
<ul>
<li ng-repeat="x in result"> // repeats objects
<ul ng-repeat="obj in x"> // repeat object properties '_1',"_2" , these are again objects
{{obj.name}}{{obj.description}}
<ul>
</li>
</ul>
With your data structure... You cannot access name and description directly from first ng-repeat.
Even if you have nested ng-repeat you are not guaranteed with name and description. You need to flatten the object after first ng-repeat and then you can access all the properties. Assuming that _1, _2 object properties are related.
Two loops are required---
<div ng-repeat="data in result">
<div ng-repeat="obj in data">
{{obj.cost}}{{obj.name}}
</div>
</div>
Demo: http://jsfiddle.net/HB7LU/8254/

Custom formatting for JSON from a Rails controller

I have two rails models:
A Milestone has many Tasks
A Task belongs to a Milestone
In my controller I call the following:
#milestones = Milestone.all
render :json => #milestones.to_json(:include => :tasks)
Which gives me:
[ {
"id": 5,
"name": "This is milestone #1",
"tasks": [{
"complete": false,
"id": 60,
"name": "aaaaa",
"milestone_id": 5,
}, {
"complete": false,
"id": 62,
"name": "ccccc",
"milestone_id": 5,
}
]
}, {
"id": 6,
"name": "This is milestone #2",
"tasks": [{
"complete": false,
"id": 65,
"name": "ffffff",
"milestone_id": 5,
}, {
"complete": false,
"id": 66,
"name": "gggggg",
"milestone_id": 5,
}
]
}
]
But I need to be able to easily navigate through the JSON, so I'd like to be able to format it like this (notice each "sub array" is labeled with "milestone_ID" or "task_ID"):
[
"milestone_5": {
"id": 5,
"name": "This is milestone #1",
"tasks": [
"task_60":{
"complete": false,
"id": 60,
"name": "aaaaa",
"milestone_id": 5,
},
"task_62":{
"complete": false,
"id": 62,
"name": "ccccc",
"milestone_id": 5,
}
]
},
"milestone_6":{
"id": 6,
"name": "This is milestone #2",
"tasks": [
"task_65":{
"complete": false,
"id": 65,
"name": "ffffff",
"milestone_id": 5,
},
"task_66":{
"complete": false,
"id": 66,
"name": "gggggg",
"milestone_id": 5,
}
]
}
]
Does anybody have any idea how to get Rails to custom format JSON. Even if I have to lose the "milestone_" part and just spit out the ID, that would be very helpful.
Thanks!
Take a look at the json_builder gem.
What you're asking is certainly doable, but personally when you start doing anything remotely useful with json output from controllers, the default to_json method becomes unwieldy. It's best to explicitly output exactly what you want the json to look like.
Specifically in your json_builder file...
milestone.json.json_builder
#milestones.each do |milestone|
key "milestone_#{milestone.id}" do
id milestone.id
name milestone.name
end
end
etc etc. I believe that would do the trick.
Edit: I tend to only include the exact fields from the model that I need for whatever resource is consuming my json. This will improve performance and can make things easier to debug when something goes wrong. It's also very obvious which fields are going to show up where.

Categories