We Keep Coding

Is there a way to align dynamic cards horizontally using ajax?

I am trying to make my cards horizontally, but the problem is I have an ajax that fetch my data and it is dynamic
I just need two cards every row in my page
Here is my ajax script code
for(i=0; i<data.length; i++){
html +='<div class="col-md-6">'+
'<div class="card" style="width: 15rem; text-align:center;display:inline-block;">'+
'<div class="card-body">'+
'<h5 class="card-title">'+data[i].group_name+'</h5>'+
'<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>'+
'<span class="iconify" data-icon="feather:edit" data-inline="false"></span> '+
'<span class="iconify" data-icon="dashicons:remove" data-inline="false"></span>'+
'</div>'+
'</div>'+
'</div><hr>';
}
$('#showdata').html(html);
and in the html
<div class="container">
<div class="row">
<div id="showdata"></div>
</div>
</div>

I think what you have is mostly fine. Instead of updating html of a separate <div id='showdata'> combine it with your row.
<div class="container">
<div id='showdata' class="row"></div>
</div>

You ultimately need to have the container > row > col arrangement of divs (Grid Layout):
<div class="container">
<div class="row">
<div class="col-md-6">
One of two columns
</div>
<div class="col-md-6">
One of two columns
</div>
</div>
You could write the html to the parent i.e div with .row class as div#showdata does not have .row class:
$('#showdata').parent().html(html);
const data = [{
group_name: 'group 1',
id: 1
}, {
group_name: 'group 2',
id: 2
}];
let html = '';
for (i = 0; i < data.length; i++) {
html += '<div class="col-md-6">' +
'<div class="card" style="width: 15rem; text-align:center;display:inline-block;">' +
'<div class="card-body">' +
'<h5 class="card-title">' + data[i].group_name + '</h5>' +
'<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>' +
'<span class="iconify" data-icon="feather:edit" data-inline="false"></span> ' +
'<span class="iconify" data-icon="dashicons:remove" data-inline="false"></span>' +
'</div>' +
'</div>' +
'</div><hr>';
}
$('#showdata').parent().html(html);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div id="showdata"></div>
</div>
</div>
Or you could give the id to the .row div:
$('#showdata').html(html);
<div class="container">
<div id="showdata" class="row">
</div>
</div>
const data = [{
group_name: 'group 1',
id: 1
}, {
group_name: 'group 2',
id: 2
}];
let html = '';
for (i = 0; i < data.length; i++) {
html += '<div class="col-md-6">' +
'<div class="card" style="width: 15rem; text-align:center;display:inline-block;">' +
'<div class="card-body">' +
'<h5 class="card-title">' + data[i].group_name + '</h5>' +
'<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>' +
'<span class="iconify" data-icon="feather:edit" data-inline="false"></span> ' +
'<span class="iconify" data-icon="dashicons:remove" data-inline="false"></span>' +
'</div>' +
'</div>' +
'</div><hr>';
}
$('#showdata').html(html);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="showdata" class="row">
</div>
</div>
Bonus: you could open and close .row divs based on the index of the data:
const data = [{
group_name: 'group 1',
id: 1
}, {
group_name: 'group 2',
id: 2
}, {
group_name: 'group 3',
id: 3
}, {
group_name: 'group 4',
id: 4
}, {
group_name: 'group 5',
id: 5
}];
let html = '';
for (i = 0; i < data.length; i++) {
if (i % 2 == 0) {
html += '<div class="row">';
}
html += '<div class="col-md-6">' +
'<div class="card" style="width: 15rem; text-align:center;display:inline-block;">' +
'<div class="card-body">' +
'<h5 class="card-title">' + data[i].group_name + '</h5>' +
'<h6 class="card-subtitle mb-2 text-muted">Modify your Group</h6>' +
'<span class="iconify" data-icon="feather:edit" data-inline="false"></span> ' +
'<span class="iconify" data-icon="dashicons:remove" data-inline="false"></span>' +
'</div>' +
'</div>' +
'</div>';
if (i % 2 == 1) {
html += '</div>';
}
}
$('#showdata').html(html);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showdata" class="container">
</div>

How to open a chat tab by clicking on contact?

I'd love if you could help me out w/ this issue I'm having. I'm trying to create a list of contacts, like the following, and then be able to open a chat tab for that contact. Somehow,it seems like the JS isn´t working, I'd appreciate if you could give me a hand.
1st piece (HTML contact)
<div id="contact-list">
<div class="contact-line">
<div class="status"><div class="online"></div></div>
<div class="user-photo"></div>
<div class="unread-wrap"><div class="unread">2</div></div>
<div class="contact-name">111111111</div>
<button onclick="createConversation(0)">Open Chat Tab</button>
</div>
...
</div>
<ul id="ConversationsHeaderList">
</ul>
<script type="text/javascript" src="---.js"></script>
2nd Piece (JS)
var friendsList = document.getElementById("contact-list").getElementsByClass("contact-line").innerHTML;
var conversations = [];
function createConversation(contactindex) {
var auxvar = '<button><div class="ConversationHeader">' + friendsList[contactindex].getElementsByClass("contact-name").innerHTML + '</div></button>' + '<div class="status">' + friendsList[contactindex].getElementsByClass("status").innerHTML +'</div>' + '<div class="unread-wrap">' + friendsList[contactindex].getElementsByClass("unread-wrap").innerHTML + '</div>';
conversations.push('<li>' + auxvar + '<div class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></div>' + '</li>');
document.getElementById("ConversationsHeaderList").innerHTML = conversations;
}
Somehow, I can´t make it create something like this:
<ul id="ConversationsHeaderList">
<li class="ConversationsHeader">
<button><div class="ConversationHeader">111111111</div></button>
<div class="status"><div class="online"></div></div>
<div class="unread-wrap"><div class="unread">2</div></div>
<div class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></div>
</li>
</ul>

jquery append() is creating two div elements

I am adding div elements dynamically to the DOM using jquery append(). I have made a controller that takes json data using $http.get() and calls a function create_mission to add the divs to DOM. I have to create a div for every object of the json, so i have done it using a loop and iterating it for json.length times. But here two div elements gets created at every iteration.
Here is my controller
mission_vision_mod.controller('mission_visionCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one', 'bk-clr-two', 'bk-clr-three', 'bk-clr-four'];
$scope.progressbar = ['progress-bar-warning', 'progress-bar-danger', 'progress-bar-success', 'progress-bar-primary'];
$scope.missioncount = ['col-md-0', 'col-md-12', 'col-md-6', 'col-md-4', 'col-md-3', 'col-md-2.5', 'col-md-2'];
$http.get('m_id.json').success(function (data) {
$scope.missions = data;
$scope.len = data.length;
create_mission();
});
var create_mission = function () {
var i;
for (i = 0; i < $scope.missions.length; i++) {
$("#missionstart").append("<div id='" + $scope.missions[i].id + "' class='" + $scope.missioncount[$scope.missions.length] + "'></div>");
$("#missionstart").find("#" + $scope.missions[i].id + "").append("<div class='dashboard-div-wrapper " + $scope.bkclr[i] + "'></div>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<div class='progress progress-striped active'></div>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").find("div").append("<div class='progress-bar " + $scope.progressbar[i] + "' role='progressbar' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='width: 80%'></div>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<ul class='unorderedlist'></ul>");
}
}
}]);
The HTML file
<div class="content-wrapper" ng-controller="mission_visionCtrl">
<div class="container-fluid">
<div id="header-wrapper" class="container">
<div id="header" class="container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
</div>
</div>
The json file
[{"id":1,"missionInfo":"mission"},{"id":2,"missionInfo":"mission1"},{"id":3,"missionInfo":"mission2"},{"id":4,"missionInfo":"mission3"}]

Since you have used angularjs, use a angularjs solution
<div class="content-wrapper" ng-controller="mission_visionCtrl">
<div class="container-fluid">
<div id="header-wrapper" class="container">
<div id="header" class="container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
<div id="{{mission.id}}" ng-class="missioncount[missions.length]" ng-repeat="mission in missions">
<div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
<h1>{{mission.missionInfo}}</h1>
<div class="progress progress-striped active">
<div class="progress-bar" ng-class="progressbar[$index]" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"></div>
</div>
<ul class="unorderedlist"></ul>
</div>
</div>
</div>
</div>
</div>
then
mission_vision_mod.controller('mission_visionCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one', 'bk-clr-two', 'bk-clr-three', 'bk-clr-four'];
$scope.progressbar = ['progress-bar-warning', 'progress-bar-danger', 'progress-bar-success', 'progress-bar-primary'];
$scope.missioncount = ['col-md-0', 'col-md-12', 'col-md-6', 'col-md-4', 'col-md-3', 'col-md-2.5', 'col-md-2'];
$http.get('m_id.json').success(function (data) {
$scope.missions = data;
$scope.len = data.length;
});
$scope.missions = data;
$scope.len = data.length;
}]);

Firstly, I found a possible typo in your javascript code.
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
I believe what you want is $scope.missions[i].missionInfo. Other than this, your code should be fine.
Secondly, in angular world, the normal way to iterate is to use ng-repeat (please see Arun's answer). Your view and controller shouldn't know each other, and they should communicate through your model.

Inside Loop try this code:
var div2=$("div></div>").addClass("dashboard-div-wrapper "+$scope.bkclr[i]);
div2.append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
div2.append($("<div></div>").addClass("progress progress-striped active").append("<div class='progress-bar " + $scope.progressbar[i] + "' role='progressbar' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='width: 80%'></div>"));
div2.find(".dashboard-div-wrapper").append("<ul class='unorderedlist'></ul>");
var div1=$("<div></div>").id($scope.missions[i].id).addClass($scope.missioncount[$scope.missions.length]).append(div2);
$("#missionstart").append(div1);
Code not tested. Test it and let me know.

How can I group divs and calculate values?

I have the next structure:
<div class="container">
<div class="block">
<div class="id">1</div>
<div class="date">02/21/2015</div>
<div class="value">111</div>
</div>
<div class="block">
<div class="id">1</div>
<div class="date">02/21/2015</div>
<div class="value">222</div>
</div>
<div class="block">
<div class="id">1</div>
<div class="date">02/30/2015</div>
<div class="value">333</div>
</div>
<div class="block">
<div class="id">1</div>
<div class="date">02/30/2015</div>
<div class="value">444</div>
</div>
<div class="block">
<div class="id">2</div>
<div class="date">05/17/2015</div>
<div class="value">555</div>
</div>
</div>
I need group it and calculate values, then I need print this in my page.
Steps:
Group by ID
Group by Date (in ID)
Calculate Values (in each Date)
So, the result:
<div class="container">
<div class="block">
<div class="id">1</div>
<div class="date">02/21/2015</div>
<div class="value">333</div> <!-- 111+222 -->
</div>
<div class="block">
<div class="id">1</div>
<div class="date">02/30/2015</div>
<div class="value">777</div> <!-- 333+444 -->
</div>
<div class="block">
<div class="id">2</div>
<div class="date">05/17/2015</div>
<div class="value">555</div>
</div>
</div>
P.S. Of course, I don't need in comments. :)
Can you help me with JS/jQ code?

This is one way (demo):
var $container = $('.container'),
$blocks = $container.find('.block'),
results = {},
output = '';
$blocks.each(function () {
var $this = $(this),
id = $this.find('.id').html(),
date = $this.find('.date').html(),
value = $this.find('.value').html();
results[id] = results[id] || {};
results[id][date] = results[id][date] || 0;
results[id][date] += parseInt(value);
});
$.each(results, function (id, dates) {
$.each(dates, function (date, value) {
output += '<div class="block">' +
'<div class="id">' + id + '</div>' +
'<div class="date">' + date + '</div>' +
'<div class="value">' + value + '</div>' +
'</div>';
});
});
$container.html(output);

Having same page footer when open RSS pages

When I click on RSS items in my mobile app, I would like to see same page footer as I have in my first page. I've created my app using Cordova 4.3.0, jQuery mobile and read RSS feeds using jQuery in my onDeviceReady() function in index.js file as follow:
onDeviceReady: function () {
$(function () {
$.get('http:myRssUrl.cshtml',function(data) {
var $XML = $(data);
var html = '';
$XML.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text(),
enclosure: $this.find("enclosure").attr('url'),
};
html +=
'<a class="result-link" title=" " style="text-decoration: none" href="' + item.link + '" style="font-size: 11px" >' +
'<div class="result-image">' +
' <figure>' +
'<img src="' + item.enclosure + '" style="display: block;"></img>' +
'</figure>' +
'</div>' +
'<div class="alltext" style="padding-right: 5px;">' +
'<h3 class="result-title">' + item.title +'</h3>' +
'<div class="result-description">' + item.description +'</div>' +
'</div></a>'
});
jQuery('#result').html(html);
});
});
app.receivedEvent('deviceready');
}
I also have my footer navigation bar in footer.html file which will be loaded in index.html file as follows:
<script>
$(document).on('pageinit', "#index", function (event, ui){
$("#" + event.target.id).find("[data-role=footer]").load("pages/footer.html", function(){
$("#" + event.target.id).find("[data-role=navbar]").navbar();
});
});
</script>
<body>
<div data-role="page" class="app" id="index">
<div data-role="header" data-position="fixed" data-id="main-header" id="header">
<div data-role="navbar" class="ui-btn-active ui-state-persist">
<ul>
<li>
</li>
<li></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content" data-theme="d" id="deviceready">
<div id="result" data-role="listview">
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="main-footer" id="footer">
</div><!-- /footer -->
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
My problem is that I can't load my page footer navbar in my RSS pages, I saw some relevant examples about it and applied different approaches, but still have the same problem.