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>
Related
I am trying to pass multiple parameters in a 'onclick' but it is not working and JS gave me headaches.
When clicking the 'div' and going to agregarADetalleMenu gives me this error:
SyntaxError: missing ) after argument list
function LlenarTableMenu(data) {
$('#cards-productos').empty();
$.each(data, function(i, val) {
var block2 = '<div class="col-4 col-md-6" onclick="agregarADetalleMenu(' + val.id + ', ' + val.name + ', ' + val.price + ')">' +
'<figure class="card card-product"> ' +
'<div class="img-wrap">' +
' <img src="' + val.imagen + '">' +
#* '<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>' + *# '</div>' +
'<figcaption class="info-wrap">' +
'' + val.name + '' +
'<div class="action-wrap"> ' +
'<div class="price-wrap h5">' +
#* '<span class="price-new">' + val.price.toFixed(2) + '</span>' + *# '<span style="display: none;" class="catid">' + val.id + '</span>' +
'</div>' +
'</div>' +
'</figcaption> ' +
'</figure> ' +
'</div>';
$("#cards-productos").append(block2);
});
}
Do you mean this?
Note I wrapped the function values in quotes - you nested your quotes
function LlenarTableMenu(data) {
$('#cards-productos').html(
data.map(val => `<div class="col-4 col-md-6" onclick="agregarADetalleMenu('${val.id}','${val.name}',${val.price})">
<figure class="card card-product">
<div class="img-wrap">
<img src="${val.imagen}">
<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>
</div>
<figcaption class="info-wrap">
${val.name}
<div class="action-wrap">
<div class="price-wrap h5">
<span class="price-new">${val.price.toFixed(2)}</span>
<span style="display: none;" class="catid">${val.id}</span>
</div>
</div>
</figcaption>
</figure>
</div>`).join("")
);
}
This is better
function LlenarTableMenu(data) {
$('#cards-productos').html(
data.map(val => `<div class="agregar col-4 col-md-6" data-id="${val.id}" data-name="${val.name}" data-price="${val.price}">
<figure class="card card-product">
<div class="img-wrap">
<img src="${val.imagen}">
<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>
</div>
<figcaption class="info-wrap">
${val.name}
<div class="action-wrap">
<div class="price-wrap h5">
<span class="price-new">${val.price.toFixed(2)}</span>
<span style="display: none;" class="catid">${val.id}</span>
</div>
</div>
</figcaption>
</figure>
</div>`).join("")
);
}
and then have
$('#cards-productos').on("click",".agregar",function() {
agregarADetalleMenu(this.dataset.id,this.dataset.val,this.dataset.price)
})
You're missing quotes around the values being passed in to the function. Because you already used single and double quotes in your string, you can use escaped single (or double) quotes as follows:
onclick="agregarADetalleMenu(\'' + val.id + '\', \'' + val.name + '\', \'' + val.price + '\')"
How to display one of two classes based on if there is data in the js array.
e.g. if there is responseData.title show class grey else class white
I am trying this now:
let resultHTML = '<article class="item">\
<div class="post-main">\
<header class="clear">\
<a href="' + responseData.url + '"</a>\
<span class="post-date">just now</span>\
</header>\
'if (responseData.title) {
'<section class="grey">'
} else {
'<section class="white">'
}'\
' + articleImage + '\
<h3>' + responseData.title + '</h3>\
<div class="post-about">' + responseData.about + '</div>\
</section>\
</div>\
</article>';
You can use the ternary operator.
In your case, it would be like this:
let resultHTML = '<article class="item">\
<div class="post-main">\
<header class="clear">\
<a href="' + responseData.url + '"</a>\
<span class="post-date">just now</span>\
</header>\
' + responseData.title ?
'<section class="grey">'
:
'<section class="white">'
+ '\
' + articleImage + '\
<h3>' + responseData.title + '</h3>\
<div class="post-about">' + responseData.about + '</div>\
</section>\
</div>\
</article>';
I will prefer using Template literals (Template strings) with Conditional (ternary) operator which is more cleaner.
Demo:
let responseData = {title:'abc'}
let articleImage = 'test';
let resultHTML = `<article class="item">
<div class="post-main">
<header class="clear">
<a href=responseData.url </a>
<span class="post-date">just now</span>
</header>
${
responseData.title ?
'<section class="grey">'
: '<section class="white">'
}
${articleImage}
<h3> ${responseData.title} </h3>
<div class="post-about"> ${responseData.about} </div>
</section>
</div>
</article>`;
console.log(resultHTML);
i am doing a project for my school, why is it my logo doesn't included in my print layout?. I am populating my <div class="cliniclogo" style="background-image: url()"> through ajax. and now i want to include it in my printing layout. How can i include this?
i tried my code below, but this doesn't include my printing logo.
Here is my code:
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader"></p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, <label id="zipcode"></label> </p>
</div><!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p class="printingdate">Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div><!-- col-md-4 -->
</div><!-- row -->
<div class="row">
<div class="col-md-12 justifypar">
<p class="startindent">THIS IS TO CERTIFY that <label id="cert_name"></label> of <label id="cert_address"></label>
was examined and treated at the <label id="cert_clinic_name"></label> on <label id="cert_check_up_date"></label>
with the following diagnosis: <label id="cert_diagnosis"></label> and would need medical attention for
<label id="cert_physician"></label> days barring complication.</p>
</div>
</div><!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div><!-- signatory -->
</div><!-- border -->
Now as you can see in my javascript printing, i put a css there which is to display my logo like this:
'.cliniclogo { ' +
'display: block;' +
'}' +
now, here is my css in printing using javascript (full code):
function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style >' +
'#page {' +
'size: landscape;' +
'}' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'border-style: double;' +
'}' +
'.header-cert{' +
'text-align: center;' +
'margin-top: 28px; ' +
'padding: 0px; ' +
'}' +
'.certheader { ' +
'font-size:20px;' +
'margin:0px;' +
'padding:0px;' +
'}' +
'.medcert { ' +
'font-size:38px;' +
'font-weight: bold;' +
'text-align: center;' +
'margin: 58px 58px;' +
'word-spacing: 12px;' +
'}' +
'.printingdate { ' +
'font-size:19px;' +
'text-align: left;' +
'margin-left: 22px;' +
'margin-bottom: 53px;' +
'}' +
'.certmarg { ' +
'font-size:19px;' +
'text-align: left;' +
'margin-left: 22px;' +
'}' +
'.startindent { ' +
'font-size:19px;' +
'text-align: left;' +
'margin-left: 22px;' +
'margin-right: 14px;' +
'}' +
'#cert_physician_signatory { ' +
'font-size:21px;' +
'font-weight: bold;' +
'text-align: left;' +
'margin-left: 22px;' +
'margin-top: 95px;' +
'}' +
'.justifypar { ' +
'text-align: justify;' +
'text-justify: inter-word;' +
'}' +
'.cliniclogo { ' +
'display: block;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
I created multiple bootstrap panels using for loop with the help of Jquery.
The problem is that the tabpanel is not working, I am unable to expand nor collapse the panel body.
JSFiddle
<div class="container-fluid text-center" name="drawing">
<h2><b> TTT </b></h2>
<hr>
<div class="row">
<div class="container-fluid text-center col-sm-2" name="filters">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
</div>
</div>
<div class="container-fluid text-center col-sm-10" name="chart">
<span id="chart1"></span>
</div>
</div>
<hr>
</div>
JS Code:
var headingList = ["heading01", "heading02", "heading03", "heading04", "heading05", "heading06", "heading07", "heading08", "heading09", "heading10"];
var collapseList = ["collapse01", "collapse02", "collapse03", "collapse04", "collapse05", "collapse06", "collapse07", "collapse08", "collapse09", "collapse10"];
var labelList = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"];
var filterList = ["f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "f10"];
var i = 0,
len = headingList.length;
for (i; i < len; i += 1) {
console.log(headingList[i]);
console.log(collapseList[i]);
console.log(labelList[i]);
console.log(filterList[i]);
$("#accordion").append(
'<div class="panel panel-default">' +
'<div class="panel-heading" role="tab" id=' + headingList[i] + '>' +
'<h4 class="panel-title">' +
'<a role="button" data-toggle="collapse" data-parent="#accordion" href=' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>' +
labelList[i] +
'</a>' +
'</h4>' +
'</div>' +
'<div id=' + collapseList[i] + ' class="panel-collapse collapse" role="tabpanel" aria-labelledby=' + headingList[i] + '>' +
'<div class="panel-body">' +
'<select multiple id=' + filterList[i] + ' size="10"></select><br>' +
'</div>' +
'</div>' +
'</div>'
)
};
Thanks.
You just missed adding # to <a> tag href attribute
So replace
<a role="button" data-toggle="collapse" data-parent="#accordion" href=' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>
with
<a role="button" data-toggle="collapse" data-parent="#accordion" href=#' + collapseList[i] + ' aria-expanded="true" aria-controls=' + collapseList[i] + '>
in your js code
Working jsfiddle
I am generating a list dynamically. Here is the html for the static version of the app
<div class="list-group">
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="http://qph.is.quoracdn.net/main-thumb-4972069-200-pfgvuffbxtqsqdduzxzvszms.jpeg" alt="icon">
</div>
<div class="row-content">
<h4 class="list-group-item-heading">bla</h4>
<p class="list-group-item-text">bla</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="http://lorempixel.com/56/56/people/6" alt="icon">
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Tile with another avatar</h4>
<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="http://lorempixel.com/56/56/people/6" alt="icon">
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Tile with another avatar</h4>
<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
</div>
The above one works absolutely fine. But the problem is arising when I try to generate the list dynamically
Here is my code for index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/material.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div class="list-group-item">
<div class="app">
</div>
</div>
</body>
</html>
Here is my app.js
var names = ["one", "two", "thre", "four"];
var phones = ["90000 00000", "911111 000000", "90000 11111", "80000 80808"];
for(var i=0;i<5;i++){
add(names[i], phones[i]);
}
function add(name, phone){
var listItem = '<div class="row-picture">' +
'<img class="circle" src="http://"bla">' +
'</div>' +
'<div class="row-content">' +
'<h4 class="list-group-item-heading">' + name + '</h4>' +
'<p class="list-group-item-text">' + phone + '</p>' +
'</div>' +
'</div>' +
'<div class="list-group-separator"></div>'; // Use ; here instead of +
$('.app').prepend(listItem);
}
Sad part is there is no console error. And jquery is loading $('.app').append("hi") is appending fine. And when watched the debugger the for loop executes properly, with the values getting changed. Debugger has shown that append is also getting executed. Where am I going wrong?
Check this! Its working
var names = ["one", "two", "thre", "four"];
var phones = ["90000 00000", "911111 000000", "90000 11111", "80000 80808"];
for(var i=0;i<phones.length;i++){
add(names[i], phones[i]);
}
function add(name, phone){
var listItem = '<div class="row-picture">' +
'<img class="circle" src="http://"bla">' +
'</div>' +
'<div class="row-content">' +
'<h4 class="list-group-item-heading">' + name + '</h4>' +
'<p class="list-group-item-text">' + phone + '</p>' +
'</div>' +
'</div>' +
'<div class="list-group-separator"></div>'; // Use ; here instead of +
$('.app').prepend(listItem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item">
<div class="app">
</div>
</div>