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 + '\')"
Related
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'm inserting Collapsible into HTML as soon as it receives JSON and adds the information to it.
But Collapsible does not open,
It only opens if I insert the same in HTML itself, but I can not leave it as I have to generate the results from JSON and thus create the Collapsibles for each object.
JAVASCRIPT:
function GeneratePeoples__(objJSON){
for(cat in objJSON.categories){
document.getElementById('peoples-information').innerHTML +=
'<ul class="collapsible" data-collapsible="accordion">' +
'<li>' +
'<div class="collapsible-header"><i class="fa fa-id-card-o" aria-hidden="true"></i><strong>People ('+ cat +')</strong></div>' +
'<div class="collapsible-body white">' +
'<ul class="collection">' +
'<li class="collection-item avatar">' +
'<i class="fa fa-male circle blue" aria-hidden="true"></i>' +
'<span class="title title-collection-content-information">Type of Categories</span>' +
'<p><strong>'+ objJSON.categories[cat].name +'</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new black badge" data-badge-caption=" "><strong>+ objJSON.categories[cat].score + '%' +</strong></span>' +
'<span class="new black badge" data-badge-caption=" "><strong>Score</strong></span>' +
'</a>' +
'</li>' +
'</ul>' +
'</div>' +
'</li>' +
'</ul>';
}
};
HTML
<div id="peoples-information"></div>
WORKING:
function GenerateCelebrities__(objJSON){
for(cat in objJSON.categories){
for(cel in objJSON.categories[cat].detail.celebrities){
document.getElementById('celebrities-information').innerHTML +=
'<ul class="collapsible" data-collapsible="accordion">' +
'<li>' +
'<div class="collapsible-header"><i class="fa fa-id-card-o" aria-hidden="true"></i><strong>Celebrity ('+ cap++ +')</strong></div>' +
'<div class="collapsible-body white">' +
'<ul class="collection">' +
'<li class="collection-item avatar">' +
'<i class="fa fa-star circle yellow-text myDiv" aria-hidden="true"></i>' +
'<span class="title title-collection-content-information">Celebrity Name</span>' +
'<p><strong>'+ objJSON.categories[cat].detail.celebrities[cel].name +'</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new black badge" data-badge-caption=" "><strong>'+ objJSON.categories[cat].detail.celebrities[cel].confidence +" %" +'</strong></span>' +
'<span class="new black badge" data-badge-caption=" "><strong>Confidence</strong></span>' +
'</a>' +
'</li>' +
'</ul>' +
'</div>' +
'</li>' +
'</ul>';
}
}
$(document).ready(function(){
$('.collapsible').collapsible();
});
};
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
My page makes an AJAX call with and adds some data to a div. Then appends to a DIV with jquery append. It seems that the appended content doesn't follow the css properly. I checked the output with the help of alert and pasted the output manually to the page , it looks fine. What could be the problem?
Here is the code
var myDiv = '<div class="list-group-item" onclick="myhref(' + "docinfo.html" + ');">' +
'<div class="row" id="row">' +
'<div class="col-xs-3 col-sm-5"/>' +
'<img src="' + docDetails[25] + '" class="img-thumbnail" width="100" height="100">' +
'<p><b>₹ </b>' + docDetails[24] + '</p>' +
'<p><span class="glyphicon glyphicon-eye-open"></span>' + docDetails[2] + '<br></p>' +
'<p><span class="glyphicon glyphicon-thumbs-up"></span> ' + docDetails[13] + ' </p>' +
'</div>' +
'<div class="col-xs-8 col-sm-9">' +
'<ul class="list-group">' +
'<p><b>' + docDetails[22] + '</b></p>' +
'<p>' + docDetails[10] + ' <span class="glyphicon glyphicon-briefcase"></span>' + docDetails[17] + 'yrs </p>' +
'<p><strong>Location:</strong>' + docDetails[14] + '</p>' +
'<p>' + day + '<br>' +
'<span>' + time + '</span><br>' +
'<a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span>' +
'</ul>' +
'</div>' +
'</div>';
$("#searchfield").append(myDiv);
Output of myDiv when checked through alert function:
<div class="list-group-item" onclick="myhref(docinfo.html);"><div class="row" id="row"><div class="col-xs-3 col-sm-5"/><img src="500" class="img-thumbnail" width="100" height="100"><p><b>₹ </b>0</p><p><span class="glyphicon glyphicon-eye-open"></span>null<br></p><p><span class="glyphicon glyphicon-thumbs-up"></span> Shalimar Bagh </p></div><div class="col-xs-8 col-sm-9"><ul class="list-group"><p><b>null</b></p><p>4 <span class="glyphicon glyphicon-briefcase"></span>nullyrs </p><p><strong>Location:</strong>Kamlesh clinic</p><p>undefined<br><span>null</span><br><a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span></ul></div></div>
and CSS is of bootstrap
and here is the snippet of searchfiled
<div class="container-fluid" id ="searchfield">
</div>
this the result , when appended with jquery: http://imgur.com/LYE9alR
and this is when I manually pasted the output of myDiv in #searchfield :http://imgur.com/jrWtuyN
Why are you concatenating string with no variables and values. Just create the string like this
var myDiv='<div class="list-group-item" onclick="myhref('+"docinfo.html"+');"><div class="row" id="row"><div class="col-xs-3 col-sm-5"/><img src="'+docDetails[25]+'" class="img-thumbnail" width="100" height="100"><p><b>₹ </b>'+docDetails[24]+'</p><p><span class="glyphicon glyphicon-eye-open"></span>'+docDetails[2]+'<br></p><p><span class="glyphicon glyphicon-thumbs-up"></span> '+docDetails[13]+' </p></div><div class="col-xs-8 col-sm-9"><ul class="list-group"><p><b>'+docDetails[22]+'</b></p><p>'+docDetails[10]+' <span class="glyphicon glyphicon-briefcase"></span>'+docDetails[17]+'yrs </p><p><strong>Location:</strong>'+docDetails[14]+'</p><p>'+day+'<br><span>'+time+'</span><br><a onclick="stopprop(event);" href="book.html" class="btn btn-success btn-md" role="button" style="max-width: 100px; float: right;"><span> <span>Book</a><span><span></span></span></ul></div></div>';
$("#searchfield").append(myDiv);
Verify div appended correct location and css file loaded. Verify using browser Inspect element.
While working on my first mobile app, I noticed that when I access the site and hover my mouse on each list, the link shadow does not cover the width of the displayed lists. Please see image link which shows a gap at the bottom on mouse hover:
I noticed when I use the following scripts:
<link href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
Combined with:
Everything looks fine without any gap but the issue with this is when nI click on each link, my home botton icon displays a + sign rather than a "home" sign eventhough my 'data-icon="home"'.
When I change the scripts to anything higher than 'jquery.mobile-1.0a2.min.css' and 'jquery.mobile-1.0a2.min.js', the home botton displays correctly but the gap issue occurs.
Anyone with a possible workaround on this?
var postlimit = 10;
document.write(
'<div data-role="page" id="list">' +
' <div data-role="header" data-position="fixed" data-theme="c">' +
' <h1><span class="hd">My First App</span></h1>' +
' </div>' +
' <div data-role="content">' +
' <div data-role="listview" data-filter="true" id="articleList" >'
);
for(var i=1; i<=postlimit; i++){
document.write(
'<li id="list' + i + '"><a class="atcss" '+' href="#article' + i + '" id="link' + i + '"></a></a>' +
' <p class="adcss">Date: <span id="articleDate' + i + '"></span>' +
' <p class="apcss">By: <class="author">Sysadmin</p>' +
'</li>'
)
};
document.write(
' </div>' +
' </div>' +
'</div>'
);
for(i=1; i<=postlimit; i++){
document.write(
'<div data-role="page" id="article' + i + '">' +
' <div data-role="header" data-position="inline" data-theme="c">' +
' Home' +
' <h1 id="articleHeader' + i + '"> </h1>' +
// ' <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' +
// ' class="ui-btn-right" rel="external">Open</a>' +
' </div>' +
' <div data-role="content">' +
' <div id="articleContent' + i + '" class="articleContent"></div>' +
' <div data-role="controlgroup" data-type="horizontal">' +
' <a href="#article' + String(i-1) + '" data-role="button" data-icon="arrow-l"' +
' data-inline="true" class="prevButton">Prev</a>' +
' <a href="#article' + String(i+1) + '" data-role="button" data-icon="arrow-r"' +
' data-inline="true" class="nextButton" data-iconpos="right">Next</a>' +
' </div>' +
' </div>' +
'</div>'
)
};