I want to put data into div which I already retrieved from firebase. Here is my javascript code:
var rootRef = firebase.database().ref().child("products");
rootRef.on("child_added", snap => {
alert(snap.val());
var image = snap.child("image").val();
var desp = snap.child("description").val();
$("#product_section").append();
});
what should I write into append parenthesis to show data into below format html code:
<div id="product_section" class="container">
<div class="row">
<div class="col-md-6 col-sm-6 productDetails">
<p>Something from description field of Firebase 1 </p>
</div>
<div class="col-md-6 col-sm-6">
<img src="image src form Firebase">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 productDetails">
<p>Something from description field of Firebase 2 </p>
</div>
<div class="col-md-6 col-sm-6">
<img src="image src form Firebase">
</div>
</div>
</div>
I want to show image and description field between "< img >" and "< p >" respectively.
It seems you almost have the job done.
To put html tags into div, the $("#product_section").append(); need an string as input that holds corresponding structure as followings:
var image_and_desp_string =
'<div class="row">'
+ '<div class="col-md-6 col-sm-6 productDetails">'
+ '<p>' + desp + '</p>'
+ '</div>'
+ '<div class="col-md-6 col-sm-6">'
+ '<img src="' + image + '">'
+ '</div>'
+ '</div>';
$("#product_section").append(image_and_desp_string);
I try to align the code to you html tags so that it is easier to compare.
Related
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 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.
I want to change the background of the last added element in the dom. To give you a better look here is the html:
<div class="check-in-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="ticket-img">
<img class="image" src="img/icons/ticket.png">
</span>
</div>
<div class="ui-block-b">
<h4>Inchecken</h4>
<div class="check-in-notification-append"></div>
</div>
</div>
</div>
<div class="douane-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="douane-img">
<img class="douane-img image" src="img/icons/douane.png">
</span>
</div>
<div class="ui-block-b">
<h4>Douane</h4>
<div class="douane-notification-append"></div>
</div>
</div>
</div>
<div class="gate-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="gate-img">
<img class="gate-img image" src="img/icons/gate.png">
</span>
</div>
<div class="ui-block-b">
<h4>Gate</h4>
<div class="gate-notification-append"></div>
</div>
</div>
Where I append the elements to check-in-notification-append, douane-in-notification-append, gate-in-notification-append here a better look at the js file.
$(document).on("pagebeforeshow","#progress",function(){
var incheckHtml = '';
var douaneHtml = '';
var gateHtml = '';
for(var count = 0; count < info.data.length; count++){
var shortmessage = info.data[count][3];
var category = info.data[count][4];
var typeOf = info.data[count][5];
if(typeOf === "warning"){
imgPath = 'img/icons/alarm.png';
} else {
imgPath = 'img/icons/alert.png';
}
if (!Array.prototype.last){
Array.prototype.last = function(){
return this[this.length - 1];
};
};
if (category === 'inchecken'){
incheckHtml = incheckHtml + "<div class='notification-item'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
// $('.check-in-wrapper').empty().prepend(incheckHtml);
$('.check-in-notification-append').empty().prepend(incheckHtml);
}
if(category === 'douane'){
douaneHtml = douaneHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
$('.douane-notification-append').empty().prepend(douaneHtml);
}
if(category === 'gate'){
gateHtml = gateHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
$('.gate-notification-append').empty().prepend(gateHtml);
}
}
});
But how do I acces the last added element in any category which removes the class "overlay". I'll hope someone could help me out accessing the last added element and removeClass overlay. I have written an .last() function but this will only give me the output of the last object in array...
I think you could achieve this by having some common selector which applies to all the elements that could be affected and using Jquery's last() function.
$(".allMyThings").last().removeClass("overlay");
https://api.jquery.com/last/
I have a simple bootstrap page I need to load JSON data into it:
This is my script:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var tweets = JSON.parse(xhr.responseText);
var tweet = ' <div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">';
var name = ' <h4 class="card-title">';
var photo = ' <div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">';
for (var i = 0; i < tweets.length; i += 1) {
name += tweets[i].name;
name += '</h4> </div>';
tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";
photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';
document.getElementById('photo').innerHTML = photo;
document.getElementById('name').innerHTML = name;
document.getElementById('tweet').innerHTML = tweet;
// close all html tags
}
}
};
xhr.open('GET', 'empdata.json');
xhr.send();
And this is my HTML:
<div class="container">
<div class="card">
<div class="card-header">
<div class="row">
<div id="photo">
<!-- here where the pic goes ! -->
</div>
<div id="name">
<!-- here where the name goes ! -->
</div>
</div>
<div class="card-block row">
<div id="tweet">
<!-- here where the tweet goes ! -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-block row">
<div id="tweet"> </div>
</div>
It loops correctly through all JSON data, but it displays all the pictures first then the names and finally the tweets separately. think the problem is related to the mechanism I follow in the loop.
I think you mean to do this. It can be much simpler but without changing your html I would do this:
var container = document.querySelector(".container");
for (var i=0; i<tweets.length; i += 1) {
var name = ' <h4 class="card-title">';
name += tweets[i].name;
name += '</h4> </div>';
var tweet = '<div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">'
tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";
var photo ='<div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">'
photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';
container.innerHTML+='<div class="card"><div class="card-header">'+
photo+name+tweet+'</div></div>';
}
EDITED Try set innerText outside from the loop
for (var i=0; i<tweets.length; i += 1) {
name += tweets[i].name;
name += '</h4> </div>';
...
photo += tweets[i].pic;
photo += '"></div></div>';
}
document.getElementById('name').innerHTML = name;
document.getElementById('photo').innerHTML = photo;
what's wrong with this div tag?
$(.displayvideo).html('<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="'+data.songjson[i].url+'" data-toggle="modal" data-target="#trailer">
<img src="'+data.songjson[i].url+'" width="220" height="250">'+
'<h4>'+data.songjson[i].title+'</h4></div>');
I tried this, but I'm getting error as unexpected token.
First of all you are missing quotes in CSS selector:
$('.displayvideo')
Then HTML string is not concatenated properly. I recommend to split it into sevepa lines to see HTML structure easily:
$('.displayvideo').html(
'<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="' + data.songjson[i].url + '" data-toggle="modal" data-target="#trailer">' +
'<img src="' + data.songjson[i].url + '" width="220" height="250">' +
'<h4>' + data.songjson[i].title + '</h4>' +
'</div>'
);
You are missimg ""
Try like this
$(".displayvideo").html('<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="'+data.songjson[i].url+'" data-toggle="modal" data-target="#trailer"> <img src="'+data.songjson[i].url+'" width="220" height="250">'+ '<h4>'+data.songjson[i].title+'</h4></div>');
Your problem is you did not surround .displayvideo with quotes. You need to do
$('.displayvideo')
$('.displayvideo').html('<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="'+'data.songjson[i].url'+'" data-toggle="modal" data-target="#trailer"><img src="'+'data.songjson[i].url'+'" width="220" height="250">'+
'<h4>'+'data.songjson[i].title'+'</h4></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="displayvideo"></div>
You should put .displayvideo in blockqoutes. so it should be like this:
$(".displayvideo").html(
'<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="' + data.songjson[i].url + '" data-toggle="modal" data-target="#trailer">' +
'<img src="' + data.songjson[i].url + '" width="220" height="250">' +
'<h4>' + data.songjson[i].title + '</h4>' +
'</div>'
);