Develop Reference

how to set retrived firebase data into div using javascript

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.

Why YouTube embedded code is not working on any smart phone like Samsung?

I'm using Youtube Embedded code for display my video on my website.to display this video I'm using Jquery plugin and and Youtube embedded code.
Issue My Video can't play or display on Samsung smartphone.
Here is my JS code
$(document).ready(function () {
var first_child = $(".url").first().text();
$("<iframe id=videos class=" + first_child + " width=701 height=400 src='https://www.youtube.com/embed/" + first_child + "?rel=1&controls=1&showinfo=1' frameborder='0' allowfullscreen></iframe>").appendTo('#video');
$('ul#vurl li').on('click', function ()
{
var newname = $(this).children('span.url').text();
if ($('#video>iframe').hasClass(first_child)) {
$('#video').html("");
$("<iframe class=" + newname + " width=701 height=400 src='https://www.youtube.com/embed/" + newname + "?autoplay=1&rel=1&controls=1&showinfo=1' frameborder='0' allowfullscreen></iframe>").appendTo('#video');
}
if ($('#video>iframe').hasClass(newname)) {
$('#video').html("");
$("<iframe class=" + newname + " width=701 height=400 src='https://www.youtube.com/embed/" + newname + "?autoplay=1&rel=1&controls=1&showinfo=1' frameborder='0' allowfullscreen></iframe>").appendTo('#video');
} else {
$('#video').html("");
$("<iframe class=" + newname + " width=701 height=400 src='https://www.youtube.com/embed/" + newname + "?autoplay=1&rel=1&controls=1&showinfo=1' frameborder='0' allowfullscreen></iframe>").appendTo('#video');
}
}
);
});
This is HTMl for result after user click on my video
<div class="wrapper ">
<div class="bg-gray">
<div class="col-lg-9">
<div class="data" id="video"></div>
</div>
<div class="col-lg-3">
<div class="data">
<ul id="vurl">
<li class="video_title"><a class="no">title </a><span class="url" style="display: none;">T1JbM8Oged0</span></li>
<li class="video_title"><a class="no">Kham New MV </a><span class="url" style="display: none;">AfBne0tKMCw</span></li>
<li class="video_title"><a class="no">Title</a><span class="url" style="display: none;">0ynW4eg70uA</span></li>
</ul>
</div>
</div>
</div>
</div>

You're using an HTML string as the selector. Try using the element ID as selector, and appending the HTML string to it:
$('#video').append("<iframe class=" + newname + " width=701 height=400 src='https://www.youtube.com/embed/" + newname + "?autoplay=1&rel=1&controls=1&showinfo=1' frameborder='0' allowfullscreen></iframe>");

How to change div id according to tab clicked in tab slider?

I want to dynamically change the code of my tab slider in Wordpress.
All the images come from the post. Clicking any of the images should display it in a tab so I used a counter and want to change the id according to the counter value.
while ($posts_array->have_posts()) {
$posts_array->the_post();
$large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'project-thumb');
$images = get_multi_images_src('medium', 'large', false, get_the_ID());
$counter = 1;
$str = '<div class="slide">'
. '<div class="col-lg-7 col-sm-12 col-xs-12">'
//<!-- Tab panes-->
. '<div id="myTabContent" class="tab-content">'
. '<div class="tab-pane fade active in" id="1" >'
. ' <img src="' . $images['image1'][1][0] . '" alt="" class="img-responsive">'
. '</div>'
.'</div>'
. '<ul id="myTab" class="row">';
foreach ($images as $image) {
$str.= '<li class="col-lg-3 col-sm-3 col-xs-3 "><img src="' . $image[0][0] . ' " class="img-responsive"> </li>';
$counter++;
}
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
$("ul#myTab > li > a").on("shown.bs.tab", function (e) {
var new_id = $(e.target).attr("href").substr(1);
alert(new_id);
$('.tab-content').attr('id', 'new_id');
});

Sorting script inside function doesn't work correctly

I'm trying to turn a script into a function, because it's very tiresome repeating the same code over and over again.
The script selects a container which will be holding a new accordion soon. Every accordion inside the container has a unique data-sort id. (It needs to sort from 1 to 10)
It then detects if there are any accordions with an id smaller or bigger than it and adds itself between them.
The script works correctly without it being inside a function.
This script without a function works correctly
var $container = $('.panel-group[data-group-holder="' + dataPlace + '"]'),
$d = $container.find('div.panel-default'),
$n = $('<div class="panel panel-default dragged-true" data-sort="' + dataSort + '"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle sub" data-sort="' + dataSort + '" data-toggle="collapse" href="#main-' + dataSort + '"><div class="remove set"><i class="icon-remove"></i></div>' + dataHtml + ' <b>(<span class="sub-count">0</span>)</b><i class="icon-angle-down"></i></a></h4></div><div id="main-' + dataSort + '" class="panel-collapse in"><div class="panel-body" data-accept="' + dataSort + '"></div></div></div>');
var $a = $d.filter(function () {
return $(this).data('sort') < dataSort;
}).last();
$(that).parents('div:eq(0)').remove();
/*alert($('.draggable-groups .main-groups[data-sort="' + dataSort + '"]').parents().html());*/
if ($a.length) $a.after($n);
else $container.prepend($n);
This function does not work correctly (it doesn't sort)
function placeSort(thisContainer, containerFind, placeHtml, returnCompareOneFind, returnCompareOne, returnCompareTwo, removeClone) {
var $container = $(thisContainer),
$d = $container.find(containerFind),
$n = $(placeHtml);
if(returnCompareOneFind == "false") {
var $a = $d.filter(function () {
return $(this).data(returnCompareOne) < returnCompareTwo;
}).last();
} else {
var $a = $d.filter(function () {
return $(this).find(returnCompareOneFind).data(returnCompareOne) < returnCompareTwo;
}).last();
}
removeClone;
if ($a.length) $a.after($n);
else $container.prepend($n);
}
function addGroupAccordion(that, dataSort, dataPlace, dataHtml) {
var thisContainer = '.panel-group[data-group-holder="' + dataPlace + '"]';
var containerFind = 'div.panel-default';
var placeHtml = '<div class="panel panel-default dragged-true" data-sort="' + dataSort + '"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle sub" data-sort="' + dataSort + '" data-toggle="collapse" href="#main-' + dataSort + '"><div class="remove set"><i class="icon-remove"></i></div>' + dataHtml + ' <b>(<span class="sub-count">0</span>)</b><i class="icon-angle-down"></i></a></h4></div><div id="main-' + dataSort + '" class="panel-collapse in"><div class="panel-body" data-accept="' + dataSort + '"></div></div></div>';
var returnCompareOneFind = "false";
var returnCompareOne = 'sort';
var returnCompareTwo = dataSort;
var removeClone = $(that).parents('div:eq(0)').remove();
placeSort(thisContainer, containerFind, placeHtml, returnCompareOne, returnCompareTwo, removeClone);
}
$(document).on('click','.draggable-groups .main-groups',function(){
var dataSort = $(this).attr("data-sort");
var dataPlace = $(this).parents('div:eq(1)').attr("data-group");
var dataHtml = $(this).html();
var that = $(this);
addGroupAccordion(that, dataSort, dataPlace, dataHtml);
var groupHolder = dataPlace;
countChildren(groupHolder);
});
HTML
<div class="panel panel-default">
<div class="panel-heading main">
<h4 class="panel-title">
<a class="accordion-toggle collapsed main side-js" data-parent="#main-panel" data-panel="00" data-toggle="collapse" href="#panel-00">
<span>0</span>Tellija kulud
<b>(<span class="cat-count">0</span>)</b>
<i class="icon-angle-down"></i>
</a>
</h4>
</div>
<div id="panel-00" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" data-group-holder="00">
</div>
</div>
</div>
</div>
<h3>Main groups</h3>
<div class="row draggable-groups" data-group="00">
<div class="col-md-6">
<div class="main-groups" data-sort="01">01</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="02">02</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="03">03</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="04">04</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="05">05</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="06">06</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="07">07</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="08">08</div>
</div>
</div>
Creating a jsFiddle would take too much time recreating this. I'm sorry for lacking it.

Your issue likely comes down to an issue with trying to pass this
Give this a try:
function addGroupAccordion(self, dataSort, dataPlace, dataHtml) {
...
var removeClone = $(self).parents('div:eq(0)').remove();
...
}
$(document).on('click','.draggable-groups .main-groups',function(){
...
var self = this; // 'self' is more standardized
addGroupAccordion(self, dataSort, dataPlace, dataHtml);
...
});
What is going on here is that when you were setting var that = $(this); in the $().on function, you were storing the jQuery object containing this, then when you were trying to use it in the addGroupAccordion function by using $(that), you were asking jQuery to do: $($(this)).

Jquery parseHTML not giving expected object

Given I have this html string in javascript variable "data"
<div class="packery-item">
<img class="rsImg" src="/media/VERSIONS/images/blog/2013/04/heart-watercolor1_featured_image.jpg" alt="Article illustration"/>
</div>
<div class="packery-item">
<img class="rsImg" src="/media/VERSIONS/images/blog/2013/04/planning_featured_image.jpg" alt="Article illustration"/>
</div>
<div class="packery-item">
<img src="/media/VERSIONS/images/galleries/2013/04/fashion_slideshow.jpg" alt="" />
</div>
When I run $(data)it returns something like:
[div.packery-item, text, div.packery-item, text, div.packery-item, text, div.packery-item, text, div.packery-item, text, div.packery-item, constructor: function, init: function, selector: "", jquery: "1.8.3", size: function…]
I would expect it to return a list of div.packery-item only. What have I done wrong?

You need to get rid of the whitespace between the tags, they're being turned into text nodes so that there will be spacing between the elements.
var data = '<div class="packery-item">' +
'<img class="rsImg" src="/media/VERSIONS/images/blog/2013/04/heart-watercolor1_featured_image.jpg" alt="Article illustration"/>' +
'</div>' +
'<div class="packery-item">' +
'<img class="rsImg" src="/media/VERSIONS/images/blog/2013/04/planning_featured_image.jpg" alt="Article illustration"/>' +
'</div>' +
'<div class="packery-item">' +
'<img src="/media/VERSIONS/images/galleries/2013/04/fashion_slideshow.jpg" alt="" />' +
'</div>'