I am working on my code still 3 hours to achieve an add / remove of HTML over Javascript. But even that, I was not able it. I did find some solutions on the internet, but they are much easier, like adding the text in the end of a div.
In my case, I would like to add a table element in on a specific part of the HTML, and remove this table element if the Remove button is clicked.
I hope you can help me..
Here is my HTML:
<div class="col-xl border-left border-dark">
<div class="row">
<div class="col-md-12">
<!-- *** Table number 1 *** -->
<table class="table table-bordered">
<!-- MORE HTML CODE -->
<a class="btn" role="button" id="JS_ADD_THIS_ENTRY">Add HTML below...</a>
</table>
<!-- *** Table number 1 *** -->
<!-- ********** INPUT FROM Javascript, if clicking on ADD ********** -->
<!-- this templated below should be appended here after clicking on ADD button -->
<table class="JS_ADD_THIS_ENTRY table table-bordered">
<div class="row">
<div class="col-auto justify-content-around d-flex flex-column border">
<a class="JS_REMOVE_THIS_ENTRY btn btn-danger" role="button">Remove</a>
</div>
<div class="col border">
<B>Title</B><br />
<hr class="my-1">
Name
</div>
</div>
</table>
<!-- ********** INPUT FROM Javascript, if clicking on ADD ********** -->
<!-- *** Table number 3 *** -->
<table class="table table-bordered">
<!-- MORE HTML CODE -->
</table>
<!-- *** Table number 3 *** -->
</div>
</div>
</div>
Here is my JS:
$(document).ready(function () {
var counter = 0;
$("#JS_ADD_THIS_ENTRY").on("click", function () {
var newEntryRow = $("<table>");
var buildHTML = "";
buildHTML += '<table class="YT_URL_AddRow_Element table table-bordered id="' + counter '">';
buildHTML += '<div class="row">';
buildHTML += '<div class="col-auto justify-content-around d-flex flex-column border">';
buildHTML += '<a class="btn btn-danger" role="button">Remove</a>';
buildHTML += '</div>';
buildHTML += '<div class="col border">';
buildHTML += '<B>Title</B><br />';
buildHTML += '<hr class="my-1">';
buildHTML += 'Name';
buildHTML += '</div>';
buildHTML += '</div>';
buildHTML += '</table>';
newEntryRow.append(buildHTML);
$("table.table-bordered").append(newEntryRow);
counter++;
});
$("table.table-bordered").on("click", ".JS_REMOVE_THIS_ENTRY", function (event) {
$(this).closest("table").remove();
counter -= 1
});
});
Related
i want to print specific div by javascript. it is working fine when printed without any html tag. but when use any html
tag like p, h1 or h2 it is printed blank page.
here is my code
#extends('layout.master')
#section('content')
<div class="separator-breadcrumb border-top">
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header bg-secondary" style="padding: 7px 1.25rem">
<div class="row">
<div class="col-md-1">
<button onclick="printDiv('printMe')" class="btn btn-danger font-weight-700"> Print
</button>
</div>
</div>
</div>
<div id="printMe" >
<div class="card-body">
<h1>
Print this only
</h1>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('JScript')
<script>
function printDiv(divID) {
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML = divElements;
window.print();
document.body.innerHTML = oldPage;
}
</script>
#endsection
try formating your code so it doesn't parse as HTML (replacing the '<' closing tags character with the unicode < ; , and also placing it within a tag, to preserve white space:
// try changing from this :
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML = divElements;
// to this :
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML = '<pre>' + divElements.replace(/</g, '<') + '</pre>';
I have following HTML code.
Here 2 add/remove link exists. 1) Add More Details(+) 2) Add(+)
when I click on Add(+) link its clone the tour_wrap class div and counting the number of trip_counting class div cloned/added. Like: Trip 1, Tip 2, Trip 3 etc..
And, I have another link called Add More Details (+) which is clone the tour_wrap div.
So when I click on this link twice for e.g then it's clone the tour_wrap div 2 times, That's good.
Now I have 3 tour_wrap div. In this div's you can see that I have the link Add(+) 3 times, right? Yes. So when I click on any Add(+) link then it's counting the Total number of trip_counting classes added But I want to count only corresponding trip_counting classes.
Check this image:
HTML Code:
<div class="tour_wrap">
<!-- some other html code for the tour -->
<div class="trip_wrap">
<h5 class="badge badge-success trip_counting">Trip 1</h5>
<div class="col-md-4">
<div class="form-group">
<label>From</label>
<input type="text" name="ow_from[]" class="form-control" placeholder="From">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>To</label>
<input type="text" name="to[]" class="form-control" placeholder="To">
</div>
</div>
<div class="col-md-12">
<div class="change_trip text-right">
<a class="btn add_button_trip trip_btn">Add(+)</a>
</div>
</div>
</div> <!-- end trip_wrap -->
</div> <!-- end tour wrap -->
<div class="row">
<div class="col-md-12">
<div class="form-group change text-right">
<a class="btn add_button add_more add_more_btn"><strong>Add More Details (+)</strong></a>
</div>
</div>
</div> <!-- end row -->
jQuery Code:
// for all way
$("body").on("click",".add_button",function(){
var html = $(".tour_wrap").first().clone();
$(html).find(".change").html("<a class='btn remove remove_more'>Remove Details(-)</a>");
$(".tour_wrap").last().after(html);
$('.counting').each(function(i, elm) {
$(elm).text('Detail ' + (i + 1));
});
});
$("body").on("click",".remove",function(){
$(this).parents(".tour_wrap").remove();
});
// add more trip
$("body").on("click",".add_button_trip",function(){
var html = $(".trip_wrap").first().clone();
$(html).find(".change_trip").html("<a class='btn remove_trip remove_more trip_btn_remove'>Delete(-)</a>");
//$(".trip_wrap").last().after(html);
$('.trip_wrap').each(function(i, elm) {
$(elm).last().after(html);
});
$('.trip_counting').each(function(i, elm) {
$(elm).text('Trip ' + (i + 1));
});
});
$("body").on("click",".remove_trip",function(){
$(this).parents(".trip_wrap").remove();
});
I ask a question about my function Javascript.
I recover a data list after an a ajax call.
In the list i have a field with a picture and i want show this in a modal bootstrap.
In my code the picture is displayed below the column.
Thanks in advance guys :)
$.when(promiseListeRubriqueDocument).then(function(result) {
var data = JSON.parse(result);
$(".listRubrique").html("");
$.each(data, function(index, item) {
console.log(item);
var rubTemplate = $(".template");
var modal = (".img");
var rub = $(rubTemplate).clone().removeClass("template").removeClass("hide");
$(rub).find(".labelRubrique").text(item.codeRubrique);
$(rub).find(".inputRubrique").val(item.libelleRubrique);
$(rub).find("div.rubrique-image").attr("data-rubrique-id", item.idRub);
$(rub).find("div.rubrique-image[data-rubrique-id=" + item.idRub + "]").click(function(i, element) {
if (item.imageRubrique) {
if ($("" + "[data-rubrique-id=" + item.idRub + "]").find('img.rubrique-exemple').length < 1) {
$("" + "[data-rubrique-id=" + item.idRub + "]").append("<div><img class='rubrique-exemple' src=" + item.imageRubrique + " width='100px' /></div>");
}
}
});
$(".listRubrique").append(rub);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="list-group-item template hide">
<label class="labelRubrique" style="font-weight:bold"></label>
<div class="row rubrique-image" data-rubrique-id="">
<div class="col-md-8">
<input name="enteteRubrique" id="enteteRubrique" maxlength="255" type="text" class="form-control aveo-icon aveo-magnifier inputRubrique" disabled/>
</div>
<div class="col-md-3">
<a class="seeImage" href="javascript:void(0);" role='button' aria-expanded='false' aria-controls='collapseExample'><span class='glyphicon glyphicon-eye-open fa-lg'></span></a>
</div>
</div>
</li>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<liferay-ui: messagekey="admin.gestion.documents.rubriques.disponibles" />
</div>
<div class="panel-body">
<ul class="list-group listRubrique">
</ul>
</div>
</div>
</div>
</div>
"Lightbox" is the common name for what you've described. Since you mentioned a modal bootstrap, something like http://jbutz.github.io/bootstrap-lightbox/ is likely to be aligned with your goals.
simply clone your "field" div, give it id then append to a bootstrap modal body. Or to avoid appending new clone everytime: use .html() instead.
from https://www.w3schools.com/bootstrap/bootstrap_modal.asp with modification, using bootstrap 3.3.7, jquery 3.3.1
<body>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id='myColumn'>
<img src="https://via.placeholder.com/350x150"/>
<p>Some text in the modal.</p>
</div>
</div>
<script>
$(document).ready(function(){
// var field = $("" + "[data-rubrique-id=" + item.idRub + "]").clone();
var fieldtest= $('#myColumn').clone();
var modal = $("<div id='myModal' class='modal'>\
<div class='modal-dialog'>\
<div class='modal-content'>\
<div id='myBody' class='modal-body'>\
</div>\
</div>\
</div>\
</div>").appendTo('body');
// $('#myBody').html(field);
$('#myBody').html(fieldtest);
});
</script>
</body>
`
I'm populating HTML tbody with rows through jquery,it doesn't show the new rows in the browser but if I try to see tbody content in chrome console it shows me the html but it doesn't displays that in browser.
Code: Javascript
function initTables() {
MergeObjects_ToArry(statsGroup.obamaFollowers.lang, statsGroup.trumpFollowers.lang, 'lang');
addRowToTable(statsGroup.mergedFollowers['lang'], "tblLanguageGroup");
MergeObjects_ToArry(statsGroup.obamaFollowers.timeZone, statsGroup.trumpFollowers.timeZone, 'timeZone');
addRowToTable(statsGroup.mergedFollowers['timeZone'], "tblTimeZone");
MergeObjects_ToArry(statsGroup.obamaFollowers.age, statsGroup.trumpFollowers.age, 'age');
addRowToTable(statsGroup.mergedFollowers['age'], "tblAgeGroups");
}
function addRowToTable(data, tblId) {
var rowHtml = '';
Object.keys(data).forEach(function (key, index) {
rowHtml += "<tr>";
rowHtml += '<td>' + key + '</td><td>' + data[key][0] + '</td><td>' + data[key][1] + '</td>';
rowHtml += "</tr>";
});
$("#" + tblId).find('tbody').append(rowHtml);
}
function MergeObjects_ToArry(obj1, obj2, keyName) {//obama , trump
var obama = jQuery.extend(true, {}, obj1);
var trump = jQuery.extend(true, {}, obj2);
Object.keys(obama).forEach(function (key, index) {
if (trump[key]) {//if key exists in small
obama[key] = [obama[key], trump[key]];// Merge values in ARRAY
}
else {
obama[key] = [obama[key], 'N/A']; // key is in only obj1 so add it in mergedObj
}
});
statsGroup.mergedFollowers[keyName] = obama;
//merge keys in trump not present in obama
}
Code: HTML
<div id="statsCharts" class="chartsSection" style="display:none;">
#*Account Age Comparision Trump vs Obama*#
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Account Age Comparision Trump vs Obama
</h4>
</div>
<div id="ageChart" class="dvChart"> </div>
<div class="dvScrollable" style="display:none;">
<table id="tblAgeGroups" class="table table-condensed tablesorter">
<thead>
<tr>
<th>Account Age</th>
<th>Trump</th>
<th>Obama</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
#*Time Zone Comparision Trump vs Obama*#
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Time Zone Comparision Trump vs Obama
</h4>
</div>
<div id="timeZoneChart" class="dvChart" style="position: relative; width: 960px; height: 800px;"> </div>
<div class="dvScrollable" style="display:none;">
<table id="tblTimeZone" class="table table-condensed tablesorter">
<thead>
<tr>
<th>Time Zone</th>
<th>Trump</th>
<th>Obama</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
#*Language Comparision Trump vs Obama*#
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Language Comparision Trump vs Obama
</h4>
</div>
<!-- Chart -->
<div id="langGroupChart" class="dvChart"> </div>
</div>
</div>
</div>
In the Browser:
TLDR:
I have the data from api and I have tried to populate the three html table only one gets displayed with new data ,other two have data when I check in console but they don't get displayed.
Have you tried to comment the line where you add the chart 'timeZoneChart'? Your api is sending data for timeZone?
I want to do a cart system in js so that a user can click a div to add/remove to cart (toggle). I can toggle the cart list but can't sum the price in total. Any idea how to do that??
These are the product which can be added to cart
<div class="col-xs-6 col-sm-3 col-md-2">
<div id="feature-card" class="card" data-option-id="104" data-name="Activity Feed" data-price="200">
<div class="card-content text-center">
<i id="feature-icon" class="fa fa-feed"></i>
<p>
<?php _e( 'Activity Feed', 'techcare' ); ?>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div id="feature-card" class="card" data-option-id="103" data-name="Dashboard" data-price="200">
<div class="card-content text-center">
<i id="feature-icon" class="fa fa-dashboard"></i>
<p>
<?php _e( 'Dashboard', 'techcare' ); ?>
</p>
</div>
</div>
total calculation print div in the cart
<div class="col-md-9 col-sm-9 col-xs-9">
<p id="left-margin-card-content" class="text-left"><strong><?php _e( 'Total', 'techcare' ); ?></strong></p>
</div>
I used this js to show/hide div to cart list
< script >
$(document).ready(function() {
$('.card').one('click', function(event) {
var id = $(this).attr('data-option-id'); //get specific div data id
var name = $(this).attr('data-name'); //get specific div data name
var price = $(this).attr('data-price'); //get specific div data price
var NewItem = '<span id="' + id + '"><div class="col-md-9 col-sm-9 col-xs-9" ><p id="left-margin-card-content" class="text-left">' + name + '</p></div><div class="col-md-3 col-sm-3 col-xs-3" id="' + price + '"><p id="left-margin-card-content" class="text-right">$<span id="item-price">' + price + '</span></p></div><span>';
var Item = $(NewItem).insertBefore('#features');
$('.card[data-option-id = ' + id + ']').toggleClass("active-feature"); //click div toogle class
$('.card[data-option-id = ' + id + ']').click(function(event) {
$('.card[data-option-id = ' + id + ']').toggleClass("active-feature");
$('#' + id).toggle();
});
});
});
</script>
I've simplified the above example. On each of your cart items, add a class called cart-item (to the same element that contains data-price).
I'm looping through each of these elements and adding the data-price found.
var total = 0;
$('.active-feature').each(function() {
total += parseInt($(this).attr('data-price'));
});
console.log(total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="active-feature" data-price="200"></div>
<div class="active-feature" data-price="100"></div>
<div class="active-feature" data-price="500"></div>
<div class="cart-item" data-price="10000" style="display: none;"></div> <!-- not active - don't add it! -->
You can use the :visible selector to find only visible.
$(".someDiv:visible").each(....);
You can use the .not() selector to find only hidden.
$(".someDiv").not(":visible").each(....);
I think you can perform the same operation in your code with this one line.