Owl Carousel not showing properly - javascript

I am trying to load my dynamic categories with owl carousel but it shows items closed.
Screenshots
first category **Notebook** is opened and others are closed
second category **PC** is opened and others are closed
I need all of them to be open and show items when page loads. it's working fine if i use html version but when i add my dynamic codes it broke as you see in images above.
Code
<div class="category-module" id="latest_category">
<h3 class="subtitle">{{$kis->title}} - <a class="viewall" href="category.tpl">view all</a></h3>
<div class="category-module-content">
<!-- tabs -->
<ul id="sub-cat" class="tabs">
#foreach($kis->childs->take(6) as $child)
<li>{{$child->title}}</li>
#endforeach
</ul>
<!-- items -->
#foreach($kis->childs->take(6) as $child)
<div id="tab-cat{{$child->id}}" class="tab_content">
<div class="owl-carousel latest_category_tabs">
#foreach($child->products->take(10) as $ki)
<div class="product-thumb">
<div class="image"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>{{$ki->title}}</h4>
<p class="price"> <span class="price-new">{{number_format($ki->price,0)}}</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
</div>
</div>
#endforeach
</div>
</div>
#endforeach
</div>
</div>
Can anyone help me to find the issue?
PS: in case you wonder why my PHP codes are the way you see in my code
I am using laravel blade templates.
Update
here i share my full html version of code above maybe you can find some differences which i couldn't
<div class="category-module" id="latest_category">
<h3 class="subtitle">Electronics - <a class="viewall" href="category.tpl">view all</a></h3>
<div class="category-module-content">
<ul id="sub-cat" class="tabs">
<li>Laptops</li>
<!-- and more -->
</ul>
<div id="tab-cat1" class="tab_content">
<div class="owl-carousel latest_category_tabs">
<div class="product-thumb">
<div class="image"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Aspire Ultrabook Laptop</h4>
<p class="price"> <span class="price-new">$230.00</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
<div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_pro_1-200x200.jpg" alt=" Strategies for Acquiring Your Own Laptop " title=" Strategies for Acquiring Your Own Laptop " class="img-responsive" /></div>
<div class="caption">
<h4> Strategies for Acquiring Your Own Laptop </h4>
<p class="price"> <span class="price-new">$1,400.00</span> <span class="price-old">$1,900.00</span> <span class="saving">-26%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_air_1-200x200.jpg" alt="Laptop Silver black" title="Laptop Silver black" class="img-responsive" /></div>
<div class="caption">
<h4>Laptop Silver black</h4>
<p class="price"> <span class="price-new">$1,142.00</span> <span class="price-old">$1,202.00</span> <span class="saving">-5%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_1-200x200.jpg" alt="Ideapad Yoga 13-59341124 Laptop" title="Ideapad Yoga 13-59341124 Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Ideapad Yoga 13-59341124 Laptop</h4>
<p class="price"> $2.00 </p>
<div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/ipod_shuffle_1-200x200.jpg" alt="Hp Pavilion G6 2314ax Notebok Laptop" title="Hp Pavilion G6 2314ax Notebok Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Hp Pavilion G6 2314ax Notebok Laptop</h4>
<p class="price"> $122.00 </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/ipod_touch_1-200x200.jpg" alt="Samsung Galaxy S4" title="Samsung Galaxy S4" class="img-responsive" /></div>
<div class="caption">
<h4>Samsung Galaxy S4</h4>
<p class="price"> <span class="price-new">$62.00</span> <span class="price-old">$122.00</span> <span class="saving">-50%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- and more -->
</div>
</div>
update 2
this is javascript of my carousels
$("#latest_category .owl-carousel.latest_category_tabs").owlCarousel({
itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
lazyLoad : true,
navigation : true,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
scrollPerPage : true,
pagination: false,
});
$("#latest_category .tab_content").addClass("deactive");
$("#latest_category .tab_content:first").show();
//Default Action
$("#latest_category ul#sub-cat li:first").addClass("active").show(); //Activate first tab
//On Click Event
$("#latest_category ul#sub-cat li").on("click", function() {
$("#latest_category ul#sub-cat li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$("#latest_category .tab_content").hide();
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});


If I understand you correctly, the issue is not with the carousel. It is with the tabs script.
So you are better off using a class as the selector.
It looks like you are using something like this https://gist.github.com/hong6/7372763 for your tabs.
Then you are better off removing the #latest_category and using a class. Then in your jquery, you can add a jquery context. Here is un-tested the code:
$(".category-module .owl-carousel.latest_category_tabs").owlCarousel({
itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
lazyLoad : true,
navigation : true,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
scrollPerPage : true,
pagination: false,
});
$(".category-module").each(function() {
$(".tab_content", this).addClass("deactive");
$(".tab_content:first", this).show();
//Default Action
$("ul#sub-cat li:first", this).addClass("active").show(); //Activate first tab
});
//On Click Event
$(".category-module ul#sub-cat li").on("click", function() {
var parent = $(this).parents('.category-module')
$("ul#sub-cat li", parent).removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content", parent).hide();
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab, parent).fadeIn(); //Fade in the active content
return false;
});
Here is a fiddle that shows a similar situation.

Related

error in quick box popup in html not working

I have a store website in which while clicking the eye icon or expand icon in some images, the quick box shows up with some description.
<div class="ImageWrapper">
<div class="product-button">
<a href="javascript:void(0)" id="promise-solitaire-ring-mount" class="quick-view-text">
<i class="zmdi zmdi-eye"></i>
</a>
<a href="products\promise-solitaire-ring-mount.html">
<i class="zmdi zmdi-link"></i>
</a>
<div class="add-to-wishlist">
<div class="show">
<div class="default-wishbutton-promise-solitaire-ring-mount loading">
<a class="add-in-wishlist-js btn" href="promise-solitaire-ring-mount">
<i class="fa fa-heart-o"></i>
<span class="tooltip-label">
Add to wishlist
</span>
</a>
</div>
<div class="loadding-wishbutton-promise-solitaire-ring-mount loading btn" style="display: none; pointer-events: none">
<a class="add_to_wishlist" href="promise-solitaire-ring-mount">
<i class="fa fa-circle-o-notch fa-spin"></i>
</a>
</div>
<div class="added-wishbutton-promise-solitaire-ring-mount loading" style="display: none;">
<a class="added-wishlist btn add_to_wishlist" href="pages\wishlist.html">
<i class="fa fa-heart"></i>
<span class="tooltip-label">
View Wishlist
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-detail">
<div class="product_left">
<a href="collections\new-arrivals\products\promise-solitaire-ring-mount.html" class="grid-link__title">
Let Promise Solitaire Ring Mount
</a>
<div class="grid-link__meta">
<div class="product_price">
<div class="grid-link__org_price">
<span class="money">$590.00</span>
</div>
</div>
<span class="shopify-product-reviews-badge" data-id="10109315278"></span>
</div>
The complete files are here.
When I click the icon, the popup is not shown, instead, a light-black shade is shown:
What could be the problem?

Loop through items in HTML table using jQuery

I have a table.
I want to go through all the goods and get their quality and price.
But i can't figure out how to get these values.
table:
<div class="table-items__container">
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">1</div>
<div class="item_price">30</div>
<div class="table-items_item__controls">
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">2</div>
<div class="item_price">20</div>
<div>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">3</div>
<div class="item_price">10</div>
<div>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
</div>
<div class="Summary">Summary: <span></span></div>
Script:
$('.table-items__item').children().each(function(){
console.log($(this).text());
});
I think that's all needed.
Then I need to calculate the price of all items.
http://jsfiddle.net/mg4wjfbu/

Iterate over the wrapped div and within the callback function get element within current div by specifying context argument or using find() method(within callback this refers to the current element).
$('.table-items__item').each(function() {
console.log($('.item_quality', this).text(), $('.item_price', this).text());
// or
console.log($(this).find('.item_quality').text(), $(this).find('.item_price').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-items__container">
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">1</div>
<div class="item_price">30</div>
<div class="table-items_item__controls">
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">2</div>
<div class="item_price">20</div>
<div>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
<div class="table-items__item">
<div class="item_name">Name</div>
<div class="item_quality">3</div>
<div class="item_price">10</div>
<div>
<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>
</div>
</div>
</div>
<div class="Summary">Summary: <span></span></div>
</div>

How can I detect addition of <li> tag in DOM using MutationObserver in JavaScript and get data-filename inside an IFRAME?

I am working on a CRM system where I can only write javascript in onloadfunc. My intenton is get data-filename from newly added li tag to the DOM and send notifications. Please note that my targetNode is inside an IFRAME. I have many other upload fields besides this upload field. My code is working with no Iframe but it is not working in this situation.
var targetNode = document.getElementById('filelist_cf_1267610');
var config = {childList: true, subtree: true };
var ActiveDraftsCallback = function(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
}
}
};
var observer = new MutationObserver(ActiveDraftsCallback);
observer.observe(targetNode, config);
<iframe name="win_lst" id="win_lst" src="fp_list.jsp?fieldid=1267609&codedid=QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~&uptype=0" frameborder="0">
<html lang="en">
<head>
<body style="background:#FFFFFF">
<div id="uploaded-filelist" class="uploaded-filelist">
<form action="fp_list.jsp" method="POST">
<input type="hidden" name="ss_formtoken" id="ss_formtoken" value="60B19CD9C086ED81DC1FC23B65D6E9942F94BEEEA96F60CAA533B8705E6D013A">
<input type="hidden" name="fieldid" value="1267609">
<input type="hidden" name="codedid" value="QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~">
<input type="hidden" name="uptype" value="0">
<input type="hidden" name="isanno" value="0">
<input type="hidden" name="delefile" id="delefile" value="">
<div id="updatedresult" style="display:none">
<div id="cf_1267609" style="display:inline-block"><button type="button" class="Button" name="iconbutton" aria-label="Upload" title="" onclick="x_uploadfolder(1267609,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~','File Manager')" data-original-title="Upload"><i class="fa fa-upload" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" class="Button" name="iconbutton" title="" aria-label="Merge Files" onclick="x_mergefile(1267609,-1,'QHJrJ0keIhgKFlALJGc1KgRXEAcuXRsTH2JcU0VNZl8~')" data-original-title="Merge Files"><i class="fa fa-clone" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<i class="fa fa-history fa-lg text-help Pointer" onclick="openinmwin('/s_cusfieldhistory.jsp?ismwin=1&appid=102946&objectid=1127956&fieldid=1267609');" id="his_1267609" title="" aria-label="History" data-original-title="History"></i>
<div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="ssUploadedFileList" data-orderby="date|desc">
<ul id="filelist_cf_1267609" class="">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li>
<li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span>
<div id="options_1127956_1267609_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
<li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2">111mergefile_180904.pdf</span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span>
<div id="options_1127956_1267609_2" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
</ul>
<div class="ssUploadedFileList-footer"><span class="total">Total Files: 2</span></div>
</div>
</div>
<div id="updatedpdfresult" style="display:none"></div>
<div id="cf_1267609_container">
<div id="cf_1267609" style="display:inline-block"><button type="button" onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,null,'Delete File(s)','Are you sure you want to delete the following file(s)?')" class="btn btn-default faButton DisabledButton" id="delete_1267609" name="delete_1267609" data-original-title="Delete Selected Files" aria-label="Delete Selected Files" disabled=""><i class="fa fa-trash" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="toggleButtonGroup"><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle active" id="gridviewbtn_1267609" name="gridviewbtn_1267609" data-original-title="Grid View" disabled=""><i class="fa fa-th-large" style="cursor:pointer" data-original-title="" title=""></i></button><button type="button" onclick="ssUploadedFileList.toggleListView(1081636,1267609)" class="btn btn-default faButton buttonToggle" id="listviewbtn_1267609" name="listviewbtn_1267609" data-original-title="List View"><i class="fa fa-list" style="cursor:pointer" data-original-title="" title=""></i></button></div>
<div class="ssUploadedFileList" data-orderby="date|desc">
<ul id="filelist_cf_1267609" class="">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span> </span></li>
<li data-filename="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" data-size="824" data-date="1540390632018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-0" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf"><span> </span><label for="uploadedFileSet1267609-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_1">Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf</span><span>824 KB - 2018-10-24 10:17am</span></span><span id="renamespan_1127956_1267609_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_1" value="Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>824 KB - 2018-10-24 10:17am</span></span><span class="ssUploadedFileList-size">824 KB</span><span class="ssUploadedFileList-date">2018-10-24 10:17am</span>
<div id="options_1127956_1267609_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,1,'Form1-Assessment-of-Attendant-Care-Needs-User-Manual.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
<li data-filename="111mergefile_180904.pdf" data-size="283" data-date="1536094080018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267609" id="uploadedFileSet1267609-1" data-fieldid="1267609" data-fileicon="fa fa-file-pdf-o" value="111mergefile_180904.pdf"><span> </span><label for="uploadedFileSet1267609-1" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267609_2" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267609_2">111mergefile_180904.pdf</span><span>283 KB - 2018-09-04 4:47pm</span></span><span id="renamespan_1127956_1267609_2" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267609_2" value="111mergefile_180904.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>283 KB - 2018-09-04 4:47pm</span></span><span class="ssUploadedFileList-size">283 KB</span><span class="ssUploadedFileList-date">2018-09-04 4:47pm</span>
<div id="options_1127956_1267609_2" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul>
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267609,1127956,80,'111mergefile_180904.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267609_2" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267609,1127956,2)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267609,1127956,80,2,'111mergefile_180904.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li> </ul>
</div>
</div>
</form>
</div>
</body></html>
</iframe>

Since you just watch the childList you don't need to filter mutations by type, because they are all going to be of type childList.
So just forEach through mutations and console.log the every first addedNodes
var targetNode = document.getElementById('filelist_cf_1267610');
var config = {
childList: true,
subtree: true
};
var ActiveDraftsCallback = function(mutations, observer) {
mutations.forEach(({
addedNodes
}) => {
const li = addedNodes[0];
if (li && li.nodeName == 'LI') {
console.log(li.getAttribute("data-filename"));
}
});
};
var observer = new MutationObserver(ActiveDraftsCallback);
observer.observe(targetNode, config);
// imitate adding a li in 2secs
const li = document.createElement("li");
li.setAttribute("data-filename", "test");
setTimeout(() => {document.getElementById("filelist_cf_1267610").appendChild(li)}, 2000);
<ul id="filelist_cf_1267610" class="listView">
<li class="ssUploadedFileList-listViewHeader"><span> </span><span data-sorttype="filename"><span>File Name</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="size"><span>Size</span>
<i
class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title="" title=""></i></span><span data-sorttype="date" class="descending"><span>Date</span><i class="fa fa-caret-up" data-original-title="" title=""></i><i class="fa fa-caret-down" data-original-title=""
title=""></i></span><span> </span></li>
<li data-filename="asif.pdf" data-size="74" data-date="1544642199018">
<div class="ssUploadedFileList-checkbox"><input type="checkbox" name="uploadedFileSet1267610" id="uploadedFileSet1267610-0" data-fieldid="1267610" data-fileicon="fa fa-file-pdf-o" value="asif.pdf"><span> </span><label for="uploadedFileSet1267610-0" class="fa fa-file-pdf-o"></label></div>
<span id="details_1127956_1267610_1" class="ssUploadedFileList-details" style="width:calc(100% - 75px)"><span id="span_file_1127956_1267610_1">asif.pdf</span><span>74 KB - 2018-12-12 2:16pm</span></span>
<span
id="renamespan_1127956_1267610_1" class="renamespan" style="width:calc(100% - 136px); display:none"><input id="renamefile_1127956_1267610_1" value="asif.pdf" class="ignoreChange" style="width:calc(100% - 15px)"><span>74 KB - 2018-12-12 2:16pm</span></span><span class="ssUploadedFileList-size">74 KB</span><span class="ssUploadedFileList-date">2018-12-12 2:16pm</span>
<div id="options_1127956_1267610_1" class="ssUploadedFileList-options">
<span aria-label="Options"><i class="fa fa-ellipsis-v" title="" data-original-title="Options"></i></span>
<ul style="display: none;">
<li onclick="ssUploadedFileList.confirmDeleteFiles(1267610,1127956,80,'asif.pdf','Delete File(s)','Are you sure you want to delete the following file(s)?')">Delete</li>
</ul>
</div>
<span id="renamebut_1127956_1267610_1" class="renamebuttons" style="display:none"><span onclick="ssUploadedFileList.cancelRename(1267610,1127956,1)"><i class="fa fa-times" title="" data-original-title="Cancel"></i></span><span onclick="ssUploadedFileList.saveRename(1267610,1127956,80,1,'asif.pdf')"><i class="fa fa-floppy-o" title="" data-original-title="Save"></i></span></span>
</li>
</ul>

jQuery $.post return incomplete data

I've come across a strange behavior of a $.post command.
I have an AJAX request by $.post(param,returned data), which loads pictures onto the page of the visitor.
This is the code, with a little bit of animation:
function showPicturesByCat(cat){
$('.local-overlay').fadeIn(200);
$('#picturesByCat').stop().animate({height: '0px' },200);
setTimeout(function(){
$.post('./ajax/populate.php',{operation:'show-pictures-on-front',cat:cat})
.done(function(data){
$('#picturesByCat').html(data);
setTimeout(function(){
var inaltime = $('#picturesByCat')[0].scrollHeight+20;
$('#picturesByCat').stop().animate({height: inaltime+'px' },500);
$('#picturesByCat').css({opacity: 1});
$('.local-overlay').delay(500).fadeOut(300);
},300);
$('html, body').delay(200).stop().animate({
scrollTop: $('#picturesByCat').offset().top
},300);
});
},200);
}
On the PHP side, it's just a loading of pictures with names inside a database, based on the chosen category (cat).
Code works perfectly ... on PC,s, but when it turns to mobile, both Chrome and Firefox do the same wierd thing.
When I choose a category, the pictures loads but not completely. If you scroll to the bottom, you'll see the thing. If I tap the second time on the same category, the pictures loads completely.
Here's the address
http://adrianmalancaphotography.com/en/fotografie
I can't figure this out, it's too wierd for me. Maybe some of you can spot or already know what it's wrong.
Edited:
this is the dump data, as requested in comments.
<hr class="hr-white">
Peisaj
<hr class="hr-white">
<div class="col-12">
<div class="card-columns">
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Maci 2</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-22.jpg" class="img-fluid" width="100%" alt="fotografie Maci 2" onClick="showImage(22)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Grau</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-17.jpg" class="img-fluid" width="100%" alt="fotografie Grau" onClick="showImage(17)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Apa incetosata</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-15.jpg" class="img-fluid" width="100%" alt="fotografie Apa incetosata" onClick="showImage(15)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Apus intunecat</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-14.jpg" class="img-fluid" width="100%" alt="fotografie Apus intunecat" onClick="showImage(14)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Nori cenusii</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/preview/AMP-IMG-13.jpg" class="img-fluid" width="100%" alt="fotografie Nori cenusii" onClick="showImage(13)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>La tara</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-12.jpg" class="img-fluid" width="100%" alt="fotografie La tara" onClick="showImage(12)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Ponton</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-10.jpg" class="img-fluid" width="100%" alt="fotografie Ponton" onClick="showImage(10)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Lebede</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-9.jpg" class="img-fluid" width="100%" alt="fotografie Lebede" onClick="showImage(9)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Apus pe apa</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-8.jpg" class="img-fluid" width="100%" alt="fotografie Apus pe apa" onClick="showImage(8)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Camp cu maci</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-4.jpg" class="img-fluid" width="100%" alt="fotografie Camp cu maci" onClick="showImage(4)"> </div>
</div>
</div>
Hope it helps, although I can't see anything wrong.

The problem does not come from $.post. The problem is caused by:
var inaltime = $('#picturesByCat')[0].scrollHeight+20;
$('#picturesByCat').stop().animate({height: inaltime+'px' },500);
REASON:
Since the height is not properly calculated because, when your images start loading, its height is not calculated right, then your #picturesByCat is limited to your wrong calculated value, so it is not fully displayed, but the images are loaded correctly.
The second time you clicked on the category, those images are fully displayed and have right height, then the problem is gone.
RESOLUTION:
Set the height back to auto when your animation is finished:
$('#picturesByCat').stop().animate({height: inaltime+'px' },500, function(){
$('#picturesByCat').css('height', 'auto');
});

How to play music from label?

I'm making a web application for mp3 music. But i get stuck at one condition.
I'm using Jplayer open source plugin for mp3 music.
This below script is used to play music:
$(document).ready(function () {
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jplayer_N",
cssSelectorAncestor: "#jp_container_N"
},
[
{
title: "Lat lg gyi",
artist: "Race 2",
mp3: "Music/Lat Lag Gayi (Race 2)-(FreshMaza.co).mp3",
poster: "images/m0.jpg"
}
], {
playlistOptions: {
enableRemoveControls: true,
autoPlay: false
},
swfPath: "js/jPlayer",
supplied: "webmv, ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer, function () {
$('.musicbar').removeClass('animate');
$('.jp-play-me').removeClass('active');
$('.jp-play-me').parent('li').removeClass('active');
});
$(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer, function () {
$('.musicbar').addClass('animate');
});
$(document).on('click', '.jp-play-me', function (e) {
e && e.preventDefault();
var $this = $(e.target);
if (!$this.is('a')) $this = $this.closest('a');
$('.jp-play-me').not($this).removeClass('active');
$('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');
$this.toggleClass('active');
$this.parent('li').toggleClass('active');
if (!$this.hasClass('active')) {
myPlaylist.pause();
} else {
var i = Math.floor(Math.random() * (1 + 7 - 1));
myPlaylist.play(i);
}
});
});
And here is HTML codes.
<footer class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide">
<a class="jp-video-play-icon">play</a>
</div>
<div class="jp-interface">
<div class="jp-controls">
<div>
<a class="jp-previous"><i class="icon-control-rewind i-lg"></i>
</a>
</div>
<div>
<a class="jp-play">
<i class="icon-control-play i-2x"></i>
</a>
<a class="jp-pause hid">
<i class="icon-control-pause i-2x"></i>
</a>
</div>
<div>
<a class="jp-next">
<i class="icon-control-forward i-lg"></i>
</a>
</div>
<div class="hide">
<a class="jp-stop">
<i class="fa fa-stop"></i>
</a>
</div>
<div>
<a class="" data-toggle="dropdown" data-target="#playlist">
<i class="icon-list"></i>
</a>
</div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info">
</div>
<div class="jp-title text-lt">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm">
<a class="jp-mute" title="mute">
<i class="icon-volume-2"></i>
</a>
<a class="jp-unmute hid" title="unmute">
<i class="icon-volume-off"></i>
</a>
</div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter"></div>
</div>
</div>
<div>
<a class="jp-shuffle" title="shuffle">
<i class="icon-shuffle text-muted"></i>
</a>
<a class="jp-shuffle-off hid" title="shuffle off">
<i class="icon-shuffle text-lt"></i>
</a>
</div>
<div>
<a class="jp-repeat" title="repeat">
<i class="icon-loop text-muted"></i>
</a>
<a class="jp-repeat-off hid" title="repeat off">
<i class="icon-loop text-lt"></i>
</a>
</div>
<div class="hide">
<a class="jp-full-screen" title="full screen">
<i class="fa fa-expand"></i>
</a>
<a class="jp-restore-screen" title="restore screen">
<i class="fa fa-compress text-lt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker"> <!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item"></li>
</ul>
</div>
<div class="jp-no-solution hide">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your
Flash plugin.
</div>
</div>
</div>
</footer>
Which looks like this:
QUESTION
As you see above into my screenshot some labels.
As i click into label it must suppose to play mp3 but the problem is my Javascript code(see above my code for javascript code) is used a particular id which play mp3 on the basis of this.
Here is my label code:
<!--Music working here-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" id="jp_container_N"> <!---->
<div class="item jp-type-playlist"> <!---->
<div class="pos-rlt">
<div class="item-overlay opacity r r-2x bg-black">
<div class="text-info padder m-t-sm text-sm">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o text-muted"></i>
</div>
<div class="center text-center m-t-n">
<div id="jplayer_N" class="jp-jplayer hide"></div> <!---->
<a href="#" class="jp-play">
<i class="icon-control-play i-2x"></i>
</a>
<a href="#" class="jp-pause hid">
<i class="icon-control-pause i-2x"></i>
</a>
</div>
<div class="bottom padder m-b-sm">
<a href="#" class="pull-right">
<i class="fa fa-heart-o"></i>
</a>
<a href="#">
<i class="fa fa-plus-circle"></i>
</a>
</div>
</div>
<a href="#">
<img src="images/p1.jpg" alt="" class="r r-2x img-full">
</a>
</div>
<div class="padder-v">
Lat lag gyi
Race 2
</div>
</div>
</div>
<!--Music working here //END-->
<!--///////////////////////////////END/////////////////////////////-->
As you see into my codes, i can't use a particular same id to play mp3. I get stuck here. Please help!! :(
HELP WOULD BE APPRECIATED!

Categories

Resources