We Keep Coding

Product Loop Problem in Javascript Categories

We made a category structure where products can be listed without changing the page. However, instead of stopping when the products in the category are exhausted, it first brings the products in the category, and then continues to pull products from another unrelated category. We couldn't find where we went wrong.
loadFsk('{{baseurl}}index.php?route=product/category&path='+selecteds.join('_'));
$.get('{{baseurl}}index.php?route=common/fskcats/search&catid=' + did, function (json) {
for (var i = (step); i < 6; i++) {
$('.seller-subcategories.step' + (i + 1)).remove();
}
if (step == 0) {
$('#catappends').html('');
}
if (json) {
var html = '<div class="seller-subcategories step' + (step + 1) + '"><ul class="seller-sub-ul">';
$(json['categorys']).each(function (k, v) {
html += '<li class="seller-sub-li"><a class="catjs" data-step="'
+ (step + 1) + '" data-id="' + v['category_id'] + '">' + v['name'] + '</a></li>'
});
html += '</ul></div>';
$('#catappends').append(html);
}
}, 'JSON');
});
function loadFsk(url,isnew=false){
$.ajax({
url: url,
dataType:'HTML',
success: function(htmlData){
if (isnew) {
$('.main-products-wrapper .main-products.product-grid').html($(htmlData).find('.product-grid .product-layout'));
}else{
$('.main-products-wrapper .main-products.product-grid').html($(htmlData).find('.main-products-wrapper .main-products.product-grid .product-layout'));
}
$('.pagination-results').html($(htmlData).find('.pagination-results'));
}
});
Journal.infiniteScrollInstance = $.ias({
container: '.main-products',
item: '.product-layout',
pagination: '.pagination-results',
next: '.pagination a.next'
});
}
window.addEventListener('load', () => {
let el = document.querySelector('.seller-horizontal .seller-ul .seller-li.active');
if(el){
let left_value = el.offsetLeft - (window.innerWidth/2) + (el.offsetWidth/2);
el.parentNode.scrollTo({
left: left_value,
behaviour: 'smooth',
});
}
})

onclick in div not calling function

I have a problem where onclick in the code does not work, as the function does not run when clicking.
function kaka(x) {
$('.' + x).each(function() {
html += this.outerHTML;
});
$("#klasa").html(html);
alert(html);
}
tab = ciong.split("&");
dlu = tab.length;
tab = removeDuplicates(tab);
for (var i = 0; i <= dlu; i++) {
$("#linki").html($("#linki").html() + "<div onclick='kaka(\'" + tab[i] + "\');'> " + tab[i] + " </div>");
}

I have javascript code to view a news from RSS as a vertical list. I need help to move the list of topics as horizontal one by one, in one line

I have javascript code to view a news from RSS as a vertical list.
(function ($) {
$.fn.FeedEk = function (opt) {
var def = $.extend({
MaxCount: 5,
ShowDesc: true,
ShowPubDate: true,
DescCharacterLimit: 0,
TitleLinkTarget: "_blank",
DateFormat: "",
DateFormatLang:"en"
}, opt);
var id = $(this).attr("id"), i, s = "", dt;
$("#" + id).empty();
if (def.FeedUrl == undefined) return;
$("#" + id).append('<img src="loader.gif" />');
var YQLstr = 'SELECT channel.item FROM feednormalizer WHERE output="rss_2.0" AND url ="' + def.FeedUrl + '" LIMIT ' + def.MaxCount;
$.ajax({
url: "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(YQLstr) + "&format=json&diagnostics=false&callback=?",
dataType: "json",
success: function (data) {
$("#" + id).empty();
if (!(data.query.results.rss instanceof Array)) {
data.query.results.rss = [data.query.results.rss];
}
$.each(data.query.results.rss, function (e, itm) {
s += '<li><div class="itemTitle"><a href="' + itm.channel.item.link + '" target="' + def.TitleLinkTarget + '" >' + itm.channel.item.title + '</a></div>';
if (def.ShowPubDate){
dt = new Date(itm.channel.item.pubDate);
s += '<div class="itemDate">';
if ($.trim(def.DateFormat).length > 0) {
try {
moment.lang(def.DateFormatLang);
s += moment(dt).format(def.DateFormat);
}
catch (e){s += dt.toLocaleDateString();}
}
else {
s += dt.toLocaleDateString();
}
s += '</div>';
}
if (def.ShowDesc) {
s += '<div class="itemContent">';
if (def.DescCharacterLimit > 0 && itm.channel.item.description.length > def.DescCharacterLimit) {
s += itm.channel.item.description.substring(0, def.DescCharacterLimit) + '...';
}
else {
s += itm.channel.item.description;
}
s += '</div>';
}
});
$("#" + id).append('<ul class="feedEkList">' + s + '</ul>');
}
});
};
})(jQuery);
I need help to move the list of topics as horizontal one by one, in one line. by used javascript code. this code display just 5 topics, which I need it, but I have problem to how can I movement it as horizontal.

How to convert the values in an array to strings and send to php?

I have a javascript file here.What it does is,when a user selects seats accordings to his preference in a theater layout,the selected seats are stored in an array named "seat".This code works fine until function where the selected seats are shown in a window alert.But from there onwards,the code doesn't seem to do anything.
After the above window alert, I've tried to serialize the above array and send it to the "confirm.php" file.But it does not show anything when echoed the seats.
Here is the js code.
<script type="text/javascript">
$(function () {
var settings = {
rows: 6,
cols: 15,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 80,
seatHeight: 80,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var seat = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
seat.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(seat.join(''));
};
var jArray = <?= json_encode($seats) ?>;
init(jArray);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)) {
alert('This seat is already reserved!');
} else {
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShowNew').click(function () {
var seat = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
seat.push(item);
});
window.alert(seat);
});
$('#btnsubmit').click(function () {
var seat = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
seat.push(item);
var seatar = JSON.stringify(seat);
$.ajax({
method: "POST",
url: "confirm.php",
data: {data: seatar}
});
});
});
});
</script>
Can somebody help me figure it out what's wrong in here?

Please Add content type as json.
$.ajax({
method: "POST",
url: "confirm.php",
contentType: "application/json"
data: {data: seatar}
});
For testing you can print file_get_contents('php://input') as this works regardless of content type.

include json data in the load more button function

how do i include json data in the load more button function at
load more button : Jsfiddle example
var index = 1;
$(document).on("pagecreate", "#page1", function(){
$("#btnAdd").on("click", function(){
var allItems = '';
for (var i = 0; i < 100; i++) {
allItems += '<li><a href="javascript:showDetails(' + (index + i) + ')" >item number ' + (index + i) + '</a></li>';
}
index += 100;
$("#ListTemp").empty().append(allItems).listview("refresh");
var element = $("#ListTemp li").detach();
$("#ListDspQry").append(element);
});
});
My json url is : http://www.beritanisma.com/category/superlawak/?json=get_category_posts
been trying for days but it ended up showing no results, please help me masters, thank you..

var index = 0;
$(document).on("pagecreate", "#page1", function(){
$("#btnAdd").on("click", function(){
var url = "http://www.beritanisma.com/category/superlawak/?json=get_category_posts"
$.getJSON(url, function(data){
var allItems = '';
for (var i = 0; i < data.posts.length; i++) {
console.log(data.posts[i].url);
allItems += '<li><a href="javascript:showDetails(' + (index + i) + ')" >'+data.posts[i].url+'' + (index + i) + '</a></li>';
}
index += 100;
$("#ListTemp").empty().append(allItems).listview("refresh");
var element = $("#ListTemp li").detach();
$("#ListDspQry").append(element);
});
});
});