I am trying to use toolbar.js but in a loop. Here is an example from stackoverlow
Here is my code which I am trying to apply, in this code I have a main container, in which I am creating many div dynamically and in those div I trying to put tooblar. please let me know how to make it work or what I am doing wrong.P
Thanks in advance.
HTML:
<link href="https://paulkinzett.github.io/toolbar/css/documentation.css" rel="stylesheet"/> <link href="https://paulkinzett.github.io/toolbar/css/jquery.toolbar.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://paulkinzett.github.io/toolbar/js/jquery.toolbar.min.js"></script>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto">
<h1 id=aa>
</h1>
</div>
JS:
for (var id = 0; id <= 10; id++) {
var divTool = $('<div id=toolbar-options' + id + ' class="hidden"></i></i></i></div><div data-toolbar="toolbar-options" data-toolbar-animation="flip" class="btn-toolbar feature-toolbar btn-toolbar-primary text-center" data-toolbar-style="primary" id=button' + id + '><i class="fa fa-cog" style="position: relative"></i></div>');
var div = document.createElement('div'),
h = document.createElement('h3')
divId = "id" + id,
hId = "idh" + id,
container = document.getElementById("container");
div.setAttribute("id", divId);
h.setAttribute("id", hId);
container.appendChild(div);
h.innerHTML = id;
$(div).append(h);
$(div).append(divTool);
}
$('#' + 'button' + id).toolbar({
content: '#toolbar-options',
position: 'top',
style: 'primary',
event: 'click',
hideOnClick: true
})
$('#' + 'button' + id).on('toolbarItemClick',
function(event, buttonClicked) {
alert(buttonClicked.id);
}
)
Is that is what you looking for.
JS:
for (var id = 0; id <= 10; id++) {
var div=$('<div class="btn-toolbar" style="margin:5px;"></div>');
$('#container').append(div);
$(div).toolbar({
content: '#toolbar-options',
});
}
HTML:
<div id="container" style="width: 550px; margin: 0 auto">
</div>
<div id="toolbar-options" class="hidden">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
JsFiddle
Related
I Am on that script for 2 days and I think I lost in somewhere... First Click is ok , second click is ok but after second click the main idea is lost...
What I want is after click "EKLE" Button add new with The input Value..
But after second click "first element add new tags..
I want only "Yeni İstasyon Ekleyin" button adds new elements..
I hope I told what I meant... :/
$("#istasyonismispan").click(function() {
document.getElementById("istasyonismispan").innerHTML = "";
id = document.getElementById("istasyonismispan").id;
divareastn = document.getElementById(id);
divareastn.style.height = "100px";
divareastn.style.paddingTop = "10px";
divareastn.style.backgroundColor = "#D8C7B4";
input = '<input type="text" id="inputid' + id + '" style="width:260px;height: 35px;padding-left: 1rem" class="form-control form-control-sm" placeholder="İstasyon İsmi Giriniz...">';
newbutton = '<button type="text" id="buttonid' + id + '" style="width:260px;height: 35px;margin-top: -2rem" class="addstation btn btn-sm btn-primary bi bi-plus-square" onclick="eklebutton(this.id)"> EKLE...</button>';
divareastn.innerHTML = input + "<br>" + newbutton;
document.getElementById("inputid" + id).focus();
});
function eklebutton(id) {
mainid = id.substr(8);
id = id.replace(/\s/g, '');
inputid = "inputid" + mainid;
mainid = document.getElementById(inputid).value;
buttonid = "buttonid" + mainid;
stationid = document.getElementById(inputid).value;
stationidcheck = stationid.replace(/\s/g, '');
istasyonismispan = "istasyonismispan" + stationidcheck;
if (stationidcheck != "") {
document.getElementById("istasyonismispan").innerHTML = "";
headerofstation = '<h4><span class="float-md-start text-dark" > ' + stationid + '</span></h4>';
newinnerhtml = headerofstation + '<p id="" style="width:260px;height: 35px;margin-top: 1rem" class="float-md-start bi bi-plus-square" > YENİ GÖREV EKLE...</p>'
document.getElementById("istasyonismispan").innerHTML = newinnerhtml;
document.getElementById("istasyonismispan").id = istasyonismispan;
divarea = document.getElementById("kanbanrow");
newtag = document.createElement("A");
newtag.style.width = "310px";
newtag.innerHTML =
'<a style="width:300px;height: 40px;line-height: 40px;padding-left: 20px;" id="istasyonismispan" class="float-md-start hoverback " ><span class="bi bi-plus-square"></span> Yeni İstasyon Ekleyin</a>';
divarea.appendChild(newtag);
} else {
alert("LÜTFEN İSTASYON BAŞLIĞI GİRİNİZ");
}
};
div.scrollmenu {
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
}
.hoverback {
background: rgba(113, 199, 230, 1);
}
.hoverback:hover {
background: rgba(113, 199, 230, 0.7);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<body>
<div class="scrollmenu ">
<div class=" float-md-start " id="kanbanrow">
<a style="width:300px;height: 40px;line-height: 40px;padding-left: 20px;" id="istasyonismispan" class="hoverback text-white "><span class="bi bi-plus-square"></span> Yeni İstasyon Ekleyin</a>
</div>
</div>
</body>
http://prntscr.com/p9u6f9
I create random divs using:
let div1 = 'div_list';
let div2 = div1 + [Math.floor(Math.random()*24)];
node.setAttribute('id', div2);
And I want remove div using button, but how can I remove this, not having ID? Because the ID is random.
function remove() {
console.log(div);
let remove = document.getElementById(??????????);
remove.remove();
}
Add an eventListener upon the creation of the node and call remove with the generated id :
let div1 = "div_list";
let div2 = div1 + [Math.floor(Math.random() * 24)];
node.setAttribute("id", div2);
node.addEventListener("click", () => remove(div2)); // add the event listener for the button of deletion if you're creating it with the div
function remove(id) {
console.log(id);
let remove = document.getElementById(id);
remove.remove();
}
Just try this example, it's 100% working.
function randRemove() {
var divCount = 5;
var randNumber = Math.floor(Math.random() * divCount) + 1;
var randSelect = document.getElementById("div-" + randNumber);
randSelect.remove();
alert("Div Removed: " + "div-" + randNumber);
}
.just-style {
display: inline-block;
width: 300px;
height: 100px;
margin: 20px;
}
<button id="randRemove" onclick="randRemove()">Remove Random Div</button>
<div id="main-div">
<div id="div-1" class="just-style" style="background-color: red;"></div>
<div id="div-2" class="just-style" style="background-color: blue;"></div>
<div id="div-3" class="just-style" style="background-color: aqua;"></div>
<div id="div-4" class="just-style" style="background-color: violet;"></div>
<div id="div-5" class="just-style" style="background-color: forestgreen;"></div>
<!--AND MORE DIV ... -->
</div>
Enjoy and good luck =D
In the wishlist ui function, I append items to the wishlist by checking the .wish-btn. I want to simulate items already added to the list so I need to run the function on load so that all of the items have been checked.
How do I run the function on load so that all of the items are:
Already checked
Appended to the list
var wish = {
items: []
};
var update_product = function(product) {};
$(function() {
//Add to wish
var addToWish = function(product, qty) {
qty = qty || 1;
var wish = getWish();
var indexOfId = wish.items.findIndex(x => x.id == product.id);
if (indexOfId === -1) {
wish.items.push({
id: product.id,
img: product.img,
name: product.name
});
$parent = $("#" + product.id).closest(".product");
$parent
.find(".wish-icon")
.addClass("active")
.attr("data-prefix", "fas");
} else {
wish.items[indexOfId].qty++;
wish.items[indexOfId].stock = Number(product.stock);
}
//Update popup wish
updateWish(wish);
};
//Remove from wish on id
var removeFromWish = function(id) {
var wish = getWish();
var wishIndex = wish.items.findIndex(x => x.id == id);
wish.items.splice(wishIndex, 1);
$parent = $("#" + id).closest(".product");
$parent
.find(".wish-icon")
.first()
.removeClass("active")
.attr("data-prefix", "far");
//Update popup wish
updateWish(wish);
};
var getProductValues = function(element) {
var productId = $(element)
.closest(".product")
.find(".item__title")
.attr("id");
var productImg = $(element)
.closest(".product")
.find(".item__img")
.attr("src");
var productName = $(element)
.closest(".product")
.find(".item__title")
.html();
return {
id: productId,
img: productImg,
name: productName
};
};
$(".my-wish-add").on("change", function() {
var product = getProductValues(this);
if ($(this).is(":checked")) {
addToWish({
id: product.id,
img: product.img,
name: product.name
});
} else {
removeFromWish(product.id);
}
});
//Update wish html to reflect changes
var updateWish = function(wish) {
//Add to shopping wish dropdown
$(".wishlist__items").html("");
for (var i = 0; i < wish.items.length; i++) {
$(".wishlist__items").append(
"<li class='wish__item'>" +
'<div class="wish__thumb">' +
"<img src='" +
wish.items[i].img +
"' />" +
"</div>" +
'<div class="wish__info">' +
'<div class="wish-name">' +
wish.items[i].name +
"</div>" +
"</div>" +
'<div class="wish__remove">' +
'<label class="wish__label">' +
'<input type="checkbox" id="my-wish-remove' +
i +
'" class="my-wish-remove" aria-hidden="true">' +
"<i class='fas fa-heart'></i>" +
"</div>" +
"</div>"
);
(function() {
var currentIndex = i;
$("#my-wish-remove" + currentIndex).on("change", function() {
$(this)
.closest("li")
.hide(400);
setTimeout(function() {
wish.items[currentIndex].stock = "";
update_product(wish.items[currentIndex]);
$("#" + wish.items[currentIndex].id).parents().find($(".wish-btn > input")).prop("checked", false);
removeFromWish(wish.items[currentIndex].id);
}, 400);
});
})();
}
};
//Get Wish
var getWish = function() {
var myWish = wish;
return myWish;
};
});
img {
width: 50px;
}
.my-wish-add {
font-family: "Font Awesome\ 5 Pro";
font-weight: 900;
}
.wish-btn {
position: relative;
}
.wish-btn input {
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.wishlist__list {
right: 0;
width: 320px;
position: absolute;
padding: 20px;
}
<script src="https://pro.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-id="wishlist">
<div class="wishlist__list">
<ul class="wishlist__items">
</ul>
</div>
</div>
<div class='products'>
<div class="product">
<div id='headphones' class='item__title'>Item 1</div>
<img class="item__img" src="https://www.iconasys.com/wp-content/uploads/2017/06/360-Product-Photography-White-Background-Acrylic-Riser-08.jpg">
<label class="wish-btn">
<input type="checkbox" name="wish-check" class='my-wish-add'>
<i class="wish-icon far fa-heart"></i>
</input>
</label>
</div>
<div class="product">
<div class="items__cart">
<div id='backpack' class='item__title'>Item 2</div>
<img class="item__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoqpSgkG4AQDQOe33jI1NiW3GW2JSB-_v36aREsVyFQH55JFOJ">
<label class="wish-btn">
<input type="checkbox" name="wish-check" class='my-wish-add'>
<i class="wish-icon far fa-heart"></i>
</input>
</label>
</div>
</div>
<div class="product">
<div class="items__cart">
<div id='handbag' class='item__title'>Item 3</div>
<img class="item__img" src="https://qph.fs.quoracdn.net/main-qimg-de7d9680c4460296e461af9720a77d64">
<label class="wish-btn">
<input type="checkbox" name="wish-check" class='my-wish-add'>
<i class="wish-icon far fa-heart"></i>
</input>
</label>
</div>
</div>
</div>
`
Follow charlietfl's answer, then you will get an error:
TypeError: getWish is not a function
Then you have to move your change event handler to the bottom below getWish and updateWish function, because they need to be declared first to be used by the event handler.
var wish = {
items: []
};
var update_product = function(product) {};
$(function() {
//Add to wish
var addToWish = function(product, qty) {
qty = qty || 1;
var wish = getWish();
var indexOfId = wish.items.findIndex(x => x.id == product.id);
if (indexOfId === -1) {
wish.items.push({
id: product.id,
img: product.img,
name: product.name
});
$parent = $("#" + product.id).closest(".product");
$parent
.find(".wish-icon")
.addClass("active")
.attr("data-prefix", "fas");
} else {
wish.items[indexOfId].qty++;
wish.items[indexOfId].stock = Number(product.stock);
}
//Update popup wish
updateWish(wish);
};
//Remove from wish on id
var removeFromWish = function(id) {
var wish = getWish();
var wishIndex = wish.items.findIndex(x => x.id == id);
wish.items.splice(wishIndex, 1);
$parent = $("#" + id).closest(".product");
$parent
.find(".wish-icon")
.first()
.removeClass("active")
.attr("data-prefix", "far");
//Update popup wish
updateWish(wish);
};
var getProductValues = function(element) {
var productId = $(element)
.closest(".product")
.find(".item__title")
.attr("id");
var productImg = $(element)
.closest(".product")
.find(".item__img")
.attr("src");
var productName = $(element)
.closest(".product")
.find(".item__title")
.html();
return {
id: productId,
img: productImg,
name: productName
};
};
//Update wish html to reflect changes
var updateWish = function(wish) {
//Add to shopping wish dropdown
$(".wishlist__items").html("");
for (var i = 0; i < wish.items.length; i++) {
$(".wishlist__items").append(
"<li class='wish__item'>" +
'<div class="wish__thumb">' +
"<img src='" +
wish.items[i].img +
"' />" +
"</div>" +
'<div class="wish__info">' +
'<div class="wish-name">' +
wish.items[i].name +
"</div>" +
"</div>" +
'<div class="wish__remove">' +
'<label class="wish__label">' +
'<input type="checkbox" id="my-wish-remove' +
i +
'" class="my-wish-remove" aria-hidden="true">' +
"<i class='fas fa-heart'></i>" +
"</div>" +
"</div>"
);
(function() {
var currentIndex = i;
$("#my-wish-remove" + currentIndex).on("change", function() {
$(this)
.closest("li")
.hide(400);
setTimeout(function() {
wish.items[currentIndex].stock = "";
update_product(wish.items[currentIndex]);
$("#" + wish.items[currentIndex].id).parents().find($(".wish-btn > input")).prop("checked", false);
removeFromWish(wish.items[currentIndex].id);
}, 400);
});
})();
}
};
//Get Wish
var getWish = function() {
var myWish = wish;
return myWish;
};
// Move this block to the bottom after you have defined all functions
$(".my-wish-add").on("change", function() {
var product = getProductValues(this);
if ($(this).is(":checked")) {
addToWish({
id: product.id,
img: product.img,
name: product.name
});
} else {
removeFromWish(product.id);
}
}).prop('checked', true).change();
});
img {
width: 50px;
}
.my-wish-add {
font-family: "Font Awesome\ 5 Pro";
font-weight: 900;
}
.wish-btn {
position: relative;
}
.wish-btn input {
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.wishlist__list {
right: 0;
width: 320px;
position: absolute;
padding: 20px;
}
<script src="https://pro.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-id="wishlist">
<div class="wishlist__list">
<ul class="wishlist__items">
</ul>
</div>
</div>
<div class='products'>
<div class="product">
<div id='headphones' class='item__title'>Item 1</div>
<img class="item__img" src="https://www.iconasys.com/wp-content/uploads/2017/06/360-Product-Photography-White-Background-Acrylic-Riser-08.jpg">
<label class="wish-btn">
<input type="checkbox" name="wish-check" class='my-wish-add'/>
<i class="wish-icon far fa-heart">click to wish</i>
</label>
</div>
<div class="product">
<div class="items__cart">
<div id='backpack' class='item__title'>Item 2</div>
<img class="item__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoqpSgkG4AQDQOe33jI1NiW3GW2JSB-_v36aREsVyFQH55JFOJ">
<label class="wish-btn">
<input type="checkbox" name="wish-check" class='my-wish-add'/>
<i class="wish-icon far fa-heart">click to wish</i>
</label>
</div>
</div>
<div class="product">
<div class="items__cart">
<div id='handbag' class='item__title'>Item 3</div>
<img class="item__img" src="https://qph.fs.quoracdn.net/main-qimg-de7d9680c4460296e461af9720a77d64">
<label class="wish-btn">
<input type="checkbox" name="wish-check" class='my-wish-add'/>
<i class="wish-icon far fa-heart">click to wish</i>
</label>
</div>
</div>
</div>
You can trigger a change right after you create a change event listener by chaining change() with no arguments to it.
Using prop('checked', true) will check them and you can chain that as well
$(selector).on('change', function(evt){
// do stuff when change occurs
// now check it and trigger change
}).prop('checked', true).change()
I am stuck in a problem where I have to create text boxes dynamically into the table cell. Along with the data which I am fetching from the DB.
It should be something like:
Number of rows are dynamic and I am able to generate it using Array. I am capturing all values into the array of records for each row and pushing it into the table. But I don't know what to do to add empty text boxes.
I was thinking if I can add "textboxes" to the array and insert along with text to the table cell. I am not sure what other options available.
I am open to answer any queries to you which might help me to get the answer.
EDIT:
Below is the code which I used to generate table:
function generateTable(fundDetails){
var tbody_holder = document.getElementById("tbody_holder");
for(var row = 0; row < fundDetails.length; row++){
var tr = document.createElement("tr");
for(var col = 0; col < fundDetails[row].length; col++){
var td = document.createElement("td");
var tn = document.createTextNode(fundDetails[row][col]);
td.appendChild(tn);
tr.appendChild(td);
}
tbody_holder.appendChild(tr);
}
}
fundDetail is a 2D array. Each element in array contains all the data for the one row of table. Next array element contains data for next row. I want to insert text boxes in each rows.
TIA
I think it will be your answer for creating the records dynamically.
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-control" content="no-cache">
<script src="jquery/jquery-1.10.2.js"></script>
<script src="jquery/canvasjs.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<script src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/html2canvas.min.js"></script>
<script type="text/javascript" src="jquery/jquery.plugin.html2canvas.js"></script>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="text"], input[type="number"] {
border: none;
}
tbody tr{
background:#f7f7f7;
}
.navbar{
border-radius:0px !important;
border:none;
}
thead{
background:#8b99a0;
color:white;
}
.navbar{
background:#323E4E;
}
table{
border-radius:4px !important;
}
a.canvasjs-chart-credit {
display: none;
}
#chartContainer{
border-bottom:1px dashed #8b99a0;
border-right:1px dashed #8b99a0;
}
.stuck{
position:fixed;
z-index:100;
width:100%;
top:0;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<script>
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$("#bar").addClass('stuck');
} else {
$('#bar').removeClass('stuck');
}
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse" id="bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/records.png" style="width:50px;height:45px;float:left;" class="navbar-logo">
<a class="navbar-brand" href="#" title="calculation">Student Records</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align:center;color: #323E4E;">Student marksheet</h2>
</div>
<div class="col-md-12" style="margin-bottom:2px;">
<div class="col-md-2">
<button class="btn btn-primary" id="addbtn" style="float:left;margin-right:10px;"><i class="fa fa-user-plus" aria-hidden="true"></i> Add Row</button>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="search form-control" id="search" placeholder="What you looking for?" style="box-shadow:5px 5px 5px #f7f7f7;">
</div>
</div>
<div class="col-md-2">
<button class="btn btn-primary" id="btnExport" style="float:right;"><a style="text-decoration:none;color:#fff;"><i class="fa fa-download"></i> Download</span></a></button>
</div>
</div>
<div class="col-md-12" style="margin-bottom:30px !important;">
<div class="col-md-10">
<div id="dvData">
<table class="table table-hover" id="tblData">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Mark1</th>
<th>Mark2</th>
<th>Total</th>
<th>Average</th>
<th>Status</th>
</tr>
</thead>
<tbody id="frm">
</tbody>
</table>
</div>
</div>
<div class="col-md-2">
<label>Result Chart</label>
<hr>
<div id="chartContainer" style="width:100%;height:200px;"></div>
</div>
</div>
</div>
</div>
</body>
<script>
var aa=0, z=1, numb=1, id="ping";
var x, ab ,bc,cd,tr,ty,tg,we ,er;
var id1,id2,id0,stat="mark",num="1";
var mnc="avg",mno="total", abcd=1;
var msg="status",pa=0,fa=0, stanum;
$("#addbtn").click(function(e){
var i=aa;
var zz=z+aa;
for(i;i<zz;i++){
var head= document.createElement("TR");
ab="tear";
bc=zz;
cd=ab.concat(bc);
head.setAttribute("id",cd);
document.getElementById("frm").appendChild(head);
var did= document.createElement("TD");
var pin=id.concat(numb);
did.setAttribute("id",pin);
document.getElementById(cd).appendChild(did);
document.getElementById(pin).innerHTML=numb;
numb++;
for(var p=0;p<6;p++){
if(p<3){
var lab= document.createElement("TD");
tr="tead";
ty=p;
we=zz;
er=tr.concat(ty);
tg=er.concat(we);
lab.setAttribute("id",tg);
document.getElementById(cd).appendChild(lab);
}else if(p==3)
{
var lab= document.createElement("TD");
tr="tead";
ty=p;
we=zz;
er=tr.concat(ty);
tg=er.concat(we);
lab.setAttribute("id",tg);
var ctot=mno.concat(abcd);
lab.setAttribute("id",ctot);
document.getElementById(cd).appendChild(lab);
}else if(p==4)
{
var lab= document.createElement("TD");
tr="tead";
ty=p;
we=zz;
er=tr.concat(ty);
tg=er.concat(we);
lab.setAttribute("id",tg);
var cpo=mnc.concat(abcd);
lab.setAttribute("id",cpo);
document.getElementById(cd).appendChild(lab);
}else if(p==5)
{
var lab= document.createElement("TD");
var meg=msg.concat(i);
lab.setAttribute("id",meg);
document.getElementById(cd).appendChild(lab);
}
if(p==0)
{
x= document.createElement("INPUT");
x.setAttribute("type","text");
id0=stat.concat(num);
num++;
x.setAttribute("id",id0);
document.getElementById(tg).appendChild(x);
}else if(p==1)
{
x= document.createElement("INPUT");
x.setAttribute("type","number");
id1=stat.concat(num);
num++;
x.setAttribute("id",id1);
document.getElementById(tg).appendChild(x);
}else if(p==2)
{
x= document.createElement("INPUT");
x.setAttribute("type","number");
id2=stat.concat(num);
num++;
x.setAttribute("id",id2);
document.getElementById(tg).appendChild(x);
}
}
}
abcd++;
aa++;
});
var xx;
$("#tblData").change(function(e){
var n=1;var qq=0;xx=0;
for(var rr=1;rr<=aa;rr++){
var m0=stat.concat(n);
n++;
var m1=stat.concat(n);
n++;
var m2=stat.concat(n);
n++;
var az=document.getElementById(m0).value;
document.getElementById(m0).innerHTML=az;
var a=document.getElementById(m1).value;
document.getElementById(m1).innerHTML=a;
var b=document.getElementById(m2).value;
document.getElementById(m2).innerHTML=b;
if(a=="")
{
a=0;
}else if(b==""){
b=0;
}
else{}
var c=Number(a)+Number(b);
var d=(Number(a)+Number(b))/2;
var mp=mno.concat(rr);
document.getElementById(mp).innerHTML=c;
var cp=mnc.concat(rr);
document.getElementById(cp).innerHTML=d;
stanum=msg.concat(qq);
if((a<50)||(b<50)){
document.getElementById(stanum).innerHTML="Fail";
qq++;
}else{
document.getElementById(stanum).innerHTML="Pass";
qq++;
}
}
xx=qq;
});
$("#tblData").change(function(e){
fa=0,pa=0;
var county=$('#tblData tr').length;
for(var mob=0;mob<county-1;mob++){
var mom=msg.concat(mob);
if(document.getElementById(mom).innerHTML=="Pass"){
pa++;
}
if(document.getElementById(mom).innerHTML=="Fail"){
fa++;
}
}
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
title:{
text: "students vs pass / fail"
},
data: [
{
type: "column", //change type to bar, line, area, pie, etc
dataPoints: [
{ label: "pass", y: pa },
{ label: "fail", y: fa }
]
}
]
});
chart.render();
});
</script>
<script type="text/javascript">
$("#resbtn").click(function(e){
html2canvas($("#tblData"), {
onrendered: function(canvas) {
theCanvas = canvas;
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
}
});
});
</script>
<script>
$(document).ready(function()
{
$('#search').keyup(function()
{
searchTable($(this).val());
});
});
function searchTable(inputVal)
{
var table = $('#tblData');
table.find('tr').each(function(index, row)
{
var allCells = $(row).find('td');
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, td)
{
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()))
{
found = true;
return false;
}
});
if(found == true)$(row).show();else $(row).hide();
}
});
}
</script>
<Script>
$("#btnExport").click(function (e) {
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
var hour = dt.getHours();
var mins = dt.getMinutes();
var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
//creating a temporary HTML link element (they support setting file names)
var a = document.createElement('a');
//getting data from our div that contains the HTML table
var data_type = 'data:application/vnd.ms-excel';
var table_div = document.getElementById('dvData');
var table_html = table_div.outerHTML.replace(/ /g, '%20');
a.href = data_type + ', ' + table_html;
//setting the file name
a.download = 'exported_table_' + postfix + '.xls';
//triggering the function
a.click();
//just in case, prevent default behaviour
e.preventDefault();
});
</script>
</html>
Trying to teach myself javascript and having trouble converting the JSON from this link https://www2.shapeshift.io/crowdsales to display on a bootstrap page using javascript, HTML, and CSS. I can't seem to get it working and I'm not sure why, can someone please help?
Here is the javascript:
$.get( "http://www2.shapeshift.io/crowdsales", function( data ) {
var sold = data['sold.toFixed(2)'];
var left = data['remaining'];
var total = sold + left;
var ratebtc = data['rateT'];
var percent = sold/total * 100;
var raised = data.toFixed(2) + 'BTC';
var percentsold = data.toFixed(2) + '%';
var orders = data['backers'];
$('.progress-bar').css('width', percentsold);
$('.percentage-label').html( percentsold + " \(" + sold + " sold out of " + total + " \)");
$('.ratebtc').html( ratebtc );
$('.orders').html( orders);
$('.raised').html( raised);
});
Here is the HTML:
<div class="shapeshift">
<div class="col-md-1 col-md-offset-5 object-non-visible"
data-animation-effect="fadeIn">
<div class="orders"></div>
<div class="raised"></div>
</div>
</div>
<div class="banner-buynow">
<div class="col-md-1 col-md-offset-5 object-non-visible"
data-animation-effect="fadeIn">
<a class="btn btn-info" href="javascript:void(0);" onclick=
"opentac();">Buy Now<br>
<div class="ratebtc"></div></a>
</div>
</div>
<div class="progress">
<div class="progress-bar active progress-bar-striped" style=
"width:50%">
<div class="percentage-label"></div>
</div>
</div>
Here is the CSS
}
.banner-buynow {
position: absolute;
top: 65%;
width: 100%;
z-index: 2;
}
.shapeshift {
position: absolute;
top: 75%;
width: 100%;
z-index: 2;
}
.progress {
position: absolute;
top: 90%;
width: 100%;
z-index: 2;
}
$.get( "http://www2.shapeshift.io/crowdsales", function( data ) {
var sold = parseFloat(data['sold']).toFixed(2);//problem
var left = data['remaining'];
var total = parseFloat(sold + left).toFixed(2);//problem
var ratebtc = data['rateT'];
var percent = sold/total * 100;
var raised = parseFloat(data['raised']).toFixed(2) + 'BTC';//problem
var percentsold = parseFloat(data['sold']).toFixed(2) + '%';//problem
var orders = data['backers'];
$('.progress-bar').css('width', percentsold);
$('.percentage-label').html( percentsold + " \(" + sold + " sold out of " + total + " \)");
$('.ratebtc').html( ratebtc );
$('.orders').html( orders);
$('.raised').html( raised);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="shapeshift">
<div class="col-md-1 col-md-offset-5 object-non-visible"
data-animation-effect="fadeIn">
<div class="orders"></div>
<div class="raised"></div>
</div>
</div>
<div class="banner-buynow">
<div class="col-md-1 col-md-offset-5 object-non-visible"
data-animation-effect="fadeIn">
<a class="btn btn-info" href="javascript:void(0);" onclick=
"opentac();">Buy Now<br>
<div class="ratebtc"></div></a>
</div>
</div>
<div class="progress">
<div class="progress-bar active progress-bar-striped" style=
"width:50%">
<div class="percentage-label"></div>
</div>
</div>
Problems:
You need to use the data which are present in json var raised = data.toFixed(2) + 'BTC';
var percentsold = data.toFixed(2) + '%'; seems useless for me. because data is an object.
toFixed() will only work with floats.
try putting this code and check.
To get json response from URL use $.getJSON
var url = "https://www2.shapeshift.io/crowdsales";
$.getJSON(url , function (json) {
var status= json.status;
console.log(status);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>