Displaying four elements in same row
Displaying three elements in same row
Displaying three elements in single colunm
Displaying four elements in same row
for (var i = 0; i < nonNullSocialPrices.length; i += 4) {
// Add a row for each set of 4 social sites
html += '<div class="row">';
// Display each social site
for (var j = 0; j < 4 && i + j < nonNullSocialPrices.length; j++) {
var site = nonNullSocialPrices[i + j].site.trim();
var site_url = nonNullSocialSites[i + j].site_url.trim();
console.log(site_url)
var cartSocialsObject = JSON.parse(item.cart_socials);
var hasPrice = item.cart_socials && Object.keys(cartSocialsObject).includes(site);
html += '<div class="col-md-3">';
if (hasPrice) {
// Add a link with the site_url
html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
html += '<i class="fas fa-cart-plus"></i> <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i + j].price;
html += '</a>';
} else if (isAdded) {
// Show the 'not added' icon in red with a checkbox and add a link with the site_url
html += '<i class="fas fa-times" style="color:red"></i> ';
html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
html += ' <a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;"><span data-site="' + site + '">' + site + '</span>: </a>' + nonNullSocialPrices[i + j].price;
} else {
// Add a link with the site_url for the social site name
html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
// Just display the checkbox and social site name
html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
html += ' <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i + j].price;
html += '</a>';
}
html += '</div>';
} // Display each social site
html += '</div>';
}
Explanation
for (var i = 0; i < nonNullSocialPrices.length; i += 4) {
// Outer loop: iterates over groups of 4 social sites
for (var j = 0; j < 4 && i + j < nonNullSocialPrices.length; j++) {
// Inner loop: iterates within each group of 4 social sites
var currentIndex = i + j;
if (currentIndex < nonNullSocialPrices.length) {
var site = nonNullSocialPrices[currentIndex].site.trim();
var site_url = nonNullSocialSites[currentIndex].site_url.trim();
// ... rest of the loop body
console.log('Site:', site, 'Site URL:', site_url);
}
}
}
1.Outer Loop (for (var i = 0; i < nonNullSocialPrices.length; i += 4) {):
This loop iterates over the array nonNullSocialPrices in increments of 4, creating a new set of rows for each group of 4 social sites.
for (var i = 0; i < nonNullSocialPrices.length; i += 4) {
2.Add a Row for Each Set of 4 Social Sites (html += '
';):This line adds a new row (
) to the HTML for each set of 4 social sites.
html += '<div class="row">';
3.Inner Loop (for (var j = 0; j < 4 && i + j < nonNullSocialPrices.length; j++) {):
This nested loop iterates within each set of 4 social sites.
The condition j < 4 && i + j < nonNullSocialPrices.length ensures that the inner loop doesn't go beyond the bounds of the array.
for (var j = 0; j < 4 && i + j < nonNullSocialPrices.length; j++) {
4.Extract Site Information (var site = nonNullSocialPrices[i + j].site.trim();):
This line extracts the site name from the nonNullSocialPrices array, ensuring leading and trailing whitespaces are trimmed.
var site = nonNullSocialPrices[i + j].site.trim();
5.Extract Site URL Information (var site_url = nonNullSocialSites[i + j].site_url.trim();):
This line extracts the site_url from the nonNullSocialSites array, ensuring leading and trailing whitespaces are trimmed.
var site_url = nonNullSocialSites[i + j].site_url.trim();
Another Way
var sitesPerRow = 4;
for (var i = 0; i < nonNullSocialPrices.length; i++) {
// Start a new row for every multiple of 'sitesPerRow'
if (i % sitesPerRow === 0) {
html += '<div class="row">';
}
var site = nonNullSocialPrices[i].site.trim();
var site_url = nonNullSocialSites[i].site_url.trim();
console.log(site_url);
var cartSocialsObject = JSON.parse(item.cart_socials);
var hasPrice = item.cart_socials && Object.keys(cartSocialsObject).includes(site);
html += '<div class="col-md-3">';
if (hasPrice) {
// Add a link with the site_url
html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
html += '<i class="fas fa-cart-plus"></i> <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
html += '</a>';
} else if (isAdded) {
// Show the 'not added' icon in red with a checkbox and add a link with the site_url
html += '<i class="fas fa-times" style="color:red"></i> ';
html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
html += ' <a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;"><span data-site="' + site + '">' + site + '</span>: </a>' + nonNullSocialPrices[i].price;
} else {
// Add a link with the site_url for the social site name
html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
// Just display the checkbox and social site name
html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
html += ' <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
html += '</a>';
}
html += '</div>';
// Close the row after 'sitesPerRow' items
if ((i + 1) % sitesPerRow === 0 || i === nonNullSocialPrices.length - 1) {
html += '</div>';
}
}
Displaying three elements in same row
// Assuming you want 3 social sites per row
var sitesPerRow = 3;
for (var i = 0; i < nonNullSocialPrices.length; i++) {
// Start a new row for every multiple of 'sitesPerRow'
if (i % sitesPerRow === 0) {
html += '<div class="row">';
}
var site = nonNullSocialPrices[i].site.trim();
var site_url = nonNullSocialSites[i].site_url.trim();
console.log(site_url);
var cartSocialsObject = JSON.parse(item.cart_socials);
var hasPrice = item.cart_socials && Object.keys(cartSocialsObject).includes(site);
html += '<div class="col-md-4">';
if (hasPrice) {
// Add a link with the site_url
html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
html += '<i class="fas fa-cart-plus"></i> <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
html += '</a>';
} else if (isAdded) {
// Show the 'not added' icon in red with a checkbox and add a link with the site_url
html += '<i class="fas fa-times" style="color:red"></i> ';
html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
html += ' <a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;"><span data-site="' + site + '">' + site + '</span>: </a>' + nonNullSocialPrices[i].price;
} else {
// Add a link with the site_url for the social site name
html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
// Just display the checkbox and social site name
html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
html += ' <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
html += '</a>';
}
html += '</div>';
// Close the row after 'sitesPerRow' items
if ((i + 1) % sitesPerRow === 0 || i === nonNullSocialPrices.length - 1) {
html += '</div>';
}
}
Displaying three elements in single colunm
var sitesPerRow = 3;
for (var i = 0; i < nonNullSocialPrices.length; i++) {
// Start a new row for every multiple of 'sitesPerRow'
if (i % sitesPerRow === 0) {
html += '<div class="col">';
}
var site = nonNullSocialPrices[i].site.trim();
var site_url = nonNullSocialSites[i].site_url.trim();
console.log(site_url);
var cartSocialsObject = JSON.parse(item.cart_socials);
var hasPrice = item.cart_socials && Object.keys(cartSocialsObject).includes(site);
html += '<div class="row-md-4">'; // Adjust the column size based on your layout
if (hasPrice) {
// Add a link with the site_url
html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
html += '<i class="fas fa-cart-plus"></i> <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
html += '</a>';
} else if (isAdded) {
// Show the 'not added' icon in red with a checkbox and add a link with the site_url
html += '<i class="fas fa-times" style="color:red"></i> ';
html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
html += ' <a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;"><span data-site="' + site + '">' + site + '</span>: </a>' + nonNullSocialPrices[i].price;
} else {
// Add a link with the site_url for the social site name
html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
// Just display the checkbox and social site name
html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
html += ' <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
html += '</a>';
}
html += '</div>';
// Close the row after 'sitesPerRow' items
if ((i + 1) % sitesPerRow === 0 || i === nonNullSocialPrices.length - 1) {
html += '</div>';
}
}
Errors
Cannot read properties of undefined (reading 'site_currency')
var site_currency = (nonNullSocialcurrency[i + j] && nonNullSocialcurrency[i + j].site_currency) ? nonNullSocialcurrency[i + j].site_currency.trim() : '';
another example
$.each(paginatedData, function(index, item) {
cardContent += '<div class="card">'; // Main card
cardContent += '<div class="card-header row">';
cardContent += '<div class="card-body row">';
cardContent += '<div class="col-md-6">';
cardContent += '<p class="black-text"><b>Influencer Name:</b> ' + item.slug + '</p>';
cardContent += '<p class="black-text"><b>Task Id: </b>' + item.orders_id + '</p>';
cardContent += '<p class="black-text"><b>Amount: </b>' + item.pay_amount + '</p>';
cardContent += '</div>';
cardContent += '<div class="col-md-6">';
cardContent += '<p class="black-text"><b>Task Title: </b>' + item.task_title + '</p>';
cardContent += '<p class="black-text"><b>Influencer Status: </b>' + item.status + '</p>';
cardContent += '<p class="black-text"><b>Task Link: </b>' + (item.Video_link ? item.Video_link : 'not Available') + '</p>';
cardContent += '</div>';
cardContent += '</div>';
cardContent += '</div>';
cardContent += '<div class="card-body row">';
cardContent += '<div class="left-content col-md-10">'; // Added 'col-md-10' class for the left content
cardContent += '<p class="black-text"><b>Amount:</b> ' + item.amount + '</p>';
cardContent += '</div>';
cardContent += '<div class="left-content col-md-1">'; // Added 'col-md-10' class for the left content
cardContent += '<button class="btn btn-primary influencer-button" data-orders_id="' + item.orders_id + '" data-order_product_id="' + item.order_product_id + '" data-id="' + item.id + '">View Detail</button>';
cardContent += '</div>';
cardContent += '<div class="right-content col-md-1">'; // Added 'col-md-2' class for the right content
cardContent += '<button class="btn btn-primary tasks-button" data-id="' + item.id + '">Update Status</button>';
cardContent += '</div>';
cardContent += '</div>';
cardContent += '</div>'; // End of main card
});
Another Example
$.each(paginatedData, function(index, item) {
cardContent += '<div class="card">'; // Main card
cardContent += '<div class="card-header row">';
cardContent += '<div class="card-body row">';
cardContent += '<div class="col-md-6">';
cardContent += '<p class="black-text"><b>Influencer Name:</b> ' + item.slug + '</p>';
cardContent += '<p class="black-text"><b>Task Id: </b>' + item.orders_id + '</p>';
cardContent += '<p class="black-text"><b>Amount: </b>' + item.pay_amount + '</p>';
cardContent += '</div>';
cardContent += '<div class="col-md-6">';
cardContent += '<p class="black-text"><b>Task Title: </b>' + item.task_title + '</p>';
cardContent += '<p class="black-text"><b>Influencer Status: </b>' + item.status + '</p>';
cardContent += '<p class="black-text"><b>Task Link: </b>' + (item.Video_link ? item.Video_link : 'not Available') + '</p>';
cardContent += '</div>';
cardContent += '</div>';
cardContent += '</div>';
cardContent += '<div class="card-body row">';
cardContent += '<div class="left-content col-md-10">'; // Added 'col-md-10' class for the left content
cardContent += '<p class="black-text"><b>Amount:</b> ' + item.amount + '</p>';
cardContent += '</div>';
cardContent += ' <div class="right-content col-md-2" style="margin-top: 80px;">';
cardContent += ' <div class="nested-col">';
cardContent += ' <button class="btn btn-primary tasks-button" style="width: 150px;" data-id="' +item.id + '">Update Task</button>';
cardContent += ' <div style="margin-top: 5px;"></div>';
cardContent += ' <button class="btn btn-primary tasks-button" style="width: 150px;" data-id="'+item.id + '">Task Lock</button>';
cardContent += ' </div>';
cardContent += ' </div>';
cardContent += '</div>';
cardContent += '</div>'; // End of main card
});
Another Example
$.each(paginatedData, function(index, item) {
cardContent += '<div class="card">'; // Main card
cardContent += '<div class="card-header row">';
cardContent += '<div class="card-body row">';
cardContent += '<div class="col-md-6">';
cardContent += '<p class="black-text"><b>Order Id:</b> ' + item.order_id + '</p>';
cardContent += '<p class="black-text"><b>Cart Id: </b>' + item.cart_id + '</p>';
cardContent += '<p class="black-text"><b>Payment date: </b>' + item.cart_id + '</p>';
cardContent += '</div>';
cardContent += '<div class="col-md-6">';
cardContent += '<p class="black-text"><b>Amount:</b> ' + item.amount + '</p>';
cardContent += '<p class="black-text"><b>Payment ID:</b> ' + item.payment_id + '</p>';
cardContent += '<p class="black-text"><b>payment status: </b>' + item.cart_id + '</p>';
cardContent += '</div>';
cardContent += '</div>';
cardContent += '</div>';
var influencersNames = JSON.parse(item.influencer_name);
var influencersEmails = JSON.parse(item.influencer_email);
var productIds = JSON.parse(item.product_id);
for (var i = 0; i < influencersNames.length; i++) {
cardContent += '<div class="card-body row">';
// Left content column with colspan for the p tag
cardContent += ' <div class="left-content col-md-10">';
cardContent += ' <div class="black-text"><b>Product Id:</b> ' + productIds[i] + ' | ' + " " + ' <b>Influencer email:</b> ' + influencersEmails[i] + ' | ' + " " + ' <b>Influencer name: </b>' + influencersNames[i] + '</div>';
var orderStatuses = ['cart added', 'order created', 'task created', 'task locked', 'task approved', 'task completed'];
var currentOrderStatus = 6; // You should replace this with your actual logic for the current order status
cardContent += ' <div class="order-container">';
for (var j = 0; j < orderStatuses.length; j++) {
if (orderStatuses.length < 3) {
// handle the case when there are less than 3 statuses
} else {
cardContent += '<div style="color: black; font-weight: bold; margin-top: 20px;">' + orderStatuses[j] + '</div>';
}
}
cardContent += ' </div>';
cardContent += ' <div class="order-container">';
for (var j = 1; j <= orderStatuses.length; j++) {
cardContent += ' <div class="circle' + (j <= 3 ? ' highlighted' : '') + '">' + j + '</div>';
if (j < orderStatuses.length) {
cardContent += ' <div class="arrow' + (j < 3 ? ' arrowhighlight' : '') + '"></div>';
}
}
cardContent += '</div>';
cardContent += '</div>';
cardContent += ' <div class="right-content col-md-2" style="margin-top: 80px;">';
cardContent += ' <div class="nested-col">';
cardContent += ' <button class="btn btn-primary tasks-button" style="width: 150px;" data-id="' + productIds[i] + '">Update Task</button>';
cardContent += ' <div style="margin-top: 5px;"></div>';
cardContent += ' <button class="btn btn-primary tasks-lock" style="width: 150px;" data-id="' + productIds[i] + '">Task Lock</button>';
cardContent += ' </div>';
cardContent += ' </div>';
// Additional CSS for the arrow and labels (moved outside the loop)
cardContent += '<style>';
cardContent += ' .order-container {';
cardContent += ' position: relative;';
cardContent += ' }';
cardContent += ' .order-label {';
cardContent += ' position: absolute;';
cardContent += ' top: -20px;'; // Adjust the position of the text above the arrow
cardContent += ' left: 50%;';
cardContent += ' transform: translateX(-50%);'; // Center the text above the arrow
cardContent += ' }';
cardContent += ' .arrow {';
cardContent += ' width: 220px;';
cardContent += ' height: 0px;'; // Increase the height to fully connect circles
cardContent += ' border-top: 2px solid #3498db;'; // Adjust the color as needed
cardContent += ' border-bottom: 2px solid #3498db;'; // Adjust the color as needed
cardContent += ' margin-top: 20px;'; // Adjust the spacing between circles
cardContent += ' }';
cardContent += ' .arrowhighlight {';
cardContent += ' width: 220px;';
cardContent += ' height: 0px;'; // Increase the height to fully connect circles
cardContent += ' border-top: 2px solid #15e715;'; // Adjust the color as needed
cardContent += ' border-bottom: 2px solid #15e715;'; // Adjust the color as needed
cardContent += ' margin-top: 20px;'; // Adjust the spacing between circles
cardContent += ' }';
cardContent += '</style>';
cardContent += '</div>';
}
cardContent += '</div>'; // End of main card
});
Top comments (0)