How do I trigger Bootstrap Toasts when the visitor is offline? - javascript

I have a website that works with the Bootstrap 5 theme and I want to show a Bootstrap Toasts message when the visitor is offline.
Currently the #BTNofflineToast button triggers #offlineToast
I want to remove the button and trigger the display of Toasts #offlineToast automatically when the visitor is offline.
How to do the JS code ?
(function() {
window.addEventListener('offline', () => {
// show toast
});
window.addEventListener('online', () => {
// hide toast
});
});
index.html
<!doctype html>
<html lang="fr" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column bg-dark text-white text-center">
<button type="button" class="btn btn-primary m-4" id="BTNupdateToast">Show update toast</button>
<button type="button" class="btn btn-primary m-4" id="BTNofflineToast">Show offline toast</button>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x mb-3">
<div id="updateToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-repeat text-success" viewBox="0 0 16 16">
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
</svg>
<strong class="me-auto">Mise à jour disponible</strong>
</div>
<div class="toast-body text-start text-dark">
Cliquez ICI pour mettre à jour.
</div>
</div>
<div id="offlineToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-wifi-off text-danger" viewBox="0 0 16 16">
<path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/>
</svg>
<strong class="me-auto">Vous êtes hors-ligne</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-start text-dark">
Les informations de cette page peuvent être obsolètes.
</div>
</div>
</div>
<script src="/bootstrap.bundle.min.js"></script>
<script>
document.getElementById("BTNupdateToast").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('#updateToast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
});
toastList.forEach(toast => toast.show());
};
document.getElementById("BTNofflineToast").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('#offlineToast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
});
toastList.forEach(toast => toast.show());
};
</script>
</body>
</html>


To test properly, run the code snippet first, then disconnect your internet connection and review the snippet.
The message disappears automatically when reconnected.
var connectionLostToast = new bootstrap.Toast(document.querySelector('#connectionLost'), {
autohide: false
});
window.addEventListener('offline', function() {
connectionLostToast.show();
});
window.addEventListener('online', function() {
connectionLostToast.hide();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
<div class="toasts">
<div id="connectionLost" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Connection Lost</strong>
<small>Now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Your internet connection lost!
</div>
</div>
</div>

Related

How to have pre-selected option while construction of dropdown in mdc

i wanted to select a particular option while construction of dropdown.
Question: i want to select grapes while construction of dropdown. not after construction.
Note: i want to construct it at once(while appending). don't want to select after construction.
$(function(){
var listOptions = ['apple','banana','grapes']
var optionsStr = '';
for(var i = 0; i < listOptions.length; i++){
var selectedClass = '',ariaValue = '', value = '';
value = listOptions[i];
if(value == 'grapes') selectedClass = 'mdc-list-item--selected',ariaValue = 'aria-selected="true"';
optionsStr += `<li class="mdc-list-item ${selectedClass}" ${ariaValue} data-value="" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
${listOptions[i]}
</span>
</li>`
}
$('#foods_items').html(optionsStr);
mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));
});
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor"
role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-labelledby="demo-label demo-selected-text">
<span class="mdc-select__ripple"></span>
<span id="demo-label" class="mdc-floating-label">Pick a Food Group</span>
<span class="mdc-select__selected-text-container">
<span id="demo-selected-text" class="mdc-select__selected-text">sss</span>
</span>
<span class="mdc-select__dropdown-icon">
<svg
class="mdc-select__dropdown-icon-graphic"
viewBox="7 10 10 5" focusable="false">
<polygon
class="mdc-select__dropdown-icon-inactive"
stroke="none"
fill-rule="evenodd"
points="7 10 12 15 17 10">
</polygon>
<polygon
class="mdc-select__dropdown-icon-active"
stroke="none"
fill-rule="evenodd"
points="7 15 12 10 17 15">
</polygon>
</svg>
</span>
<span class="mdc-line-ripple"></span>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
<ul class="mdc-list" role="listbox" aria-label="Food picker listbox" id="foods_items">
</ul>
</div>
</div>
Please help me thanks in advance!!

Update like count span in same duplicate post

I have a duplicate list of posts on the same page. Hence, some posts appear on the same page more than once.
The like system updates through javascript the like count of a post in a span, with id "like-{{ $item->id }}", it is identified with the post id.
<span id="like-{{ $item->id }}">
#json($item->likers()->count())
</span>
When a post is liked, only one post card is updated, the others are not, despite having the same id.
How can I solve this annoyance?
function likePost(a) {
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
}
});
$(this);
$.ajax({
url: APP_URL + "/save_like",
type: "POST",
dataType: "json",
data: {
item: a,
_token: $('meta[name="csrf-token"]').attr("content")
},
success: function(e) {
var t;
1 == e.bool ? ($("#like-icon-" + a).removeClass("text-muted").addClass("icon-filled text-danger"), t = $("#like-" + a).text(), $("#like-" + a).text(++t)) : 0 == e.bool && ($("#like-icon-" + a).removeClass("icon-filled text-danger").addClass("text-muted"), t = $("#like-" + a).text(), $("#like-" + a).text(--t))
},
error: function(e) {
location.replace(APP_URL + "/login")
}
})
};
<svg xmlns="http://www.w3.org/2000/svg" id="like-icon-{{ $item->id }}" class="icon #if(Auth::check()) #if(Auth::user()->hasLiked($item)) icon-filled text-danger #else text-muted #endif #else text-muted #endif" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> <span id="like-{{ $item->id }}">#json($item->likers()->count())</span>
Changes applied:
<a href="#" class="btn btn-light border-0">
<svg xmlns="http://www.w3.org/2000/svg" id="like-icon-{{ $item->id }}" class="icon icon-filled text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
<span id="like-{{ $item->id }}">
#json($item->likers()->count())
</span>
</a>
And the java code you provided.
It shows no errors, but it doesn't work.
In order not to be fully explained in my intent, I leave some pictures on my problem.
I have a tab that fetches all the categories and posts within them, consequently some posts are duplicated, but by clicking like the first of the posts is updated (the like count) while in the other cards it is not.

Try this
change <span id="like-{{ $item->id }}"> to
<span class="likes" data-id="{{ $item->id }}">
Change the link code to this - Add the ID to the link and not to the SVG or span
<a href="#" id="like-{{ $item->id }}" class="like-link btn btn-light border-0">
<svg ... /></svg> <span>1 like</span>
</a>
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
}
});
$("a[id^=like]").on("click", function() {
const $link = $(this);
const a = $link.attr("id").split("-")[1]; // make id="like-1234" into 1234
console.log(a)
/* Commented to test this snippet. uncomment in working code
$.ajax({
url: APP_URL + "/save_like",
type: "POST",
dataType: "json",
data: {
item: a,
_token: $('meta[name="csrf-token"]').attr("content")
},
success: function(e) {
const liked = e.bool == 1;
*/
const liked = 1; // test, remove when using ajax
$(".likes[data-id="+a+"]").each(function() {
$(this)
.toggleClass("text-muted", !liked)
.toggleClass("icon-filled text-danger", liked)
let t = +$(this).text();
t += liked ? 1 : -1
if (t<0) t=0; // remove if you support negative likes
$link.find("span").text(t);
$(this).html($link.html());
})
/* },
error: function(e) {
location.replace(APP_URL + "/login")
}
}) */
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="likes" data-id="1234">
1
</span><br/>
<span class="likes" data-id="1234">
1
</span>
<hr>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> <span>1</span>

Need more info.
How are you updating through JavaScript?
If you're using getElementById or so, the problem here is it only returns the first element that satisfies the query not all the elements with the same id on the page. Use a class, that way you can use querySelectorAll and loop through it and do the necessary updates.
HTML:
<span id="like-{{ $item->id }}" class="post-{{ $item->id }}">
#json($item->likers()->count())
</span>
JS:
const setLikes = postID => {
const postElems = document.querySelectorAll(`.post-${postID}`);
// loop through all the posts
for(let i = 0; i < postElems.length; i++){
// use the logic here to update the like counts as you want
}
}

Throwing my own validation message with custom CSS | URL validation

I am trying to render the error message in my HTML form when a non-url is submitted, as I need to be able to easily adjust the position and apply a CSS style.
The reason I am going through this and not just simply using type=url, as I do not like the standard chrome validation error message, and I want to throw my own beneath my form.
Currently, no error message is showing when a non-url is submitted, and there are no errors in my console. Any thoughts?
function onInvalid(ev) {
ev.preventDefault();
document.getElementById('errorMessage').innerText = "Yikes! That's not a valid URL";
}
#errorMessage {
display: none;
color: #EB7051;
font-size: 15px;
}
<form method="POST" id="Submit">
<div class="inner-form">
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "
></path>
</svg>
</div>
<input id="search" name="url" placeholder="Paste a domain here" type="url" required oninvalid="onInvalid(event)" />
</div>
<div class="input-field second-wrap">
<button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">
SEARCH
</button>
</div>
</div>
<p class="errorMessage" id="errorMessage">Yikes! That's not a valid URL.</p>
</form>
Could it be because the display: none ? I only want it to show when a non valid url (does not contain http:// or https://), and then disappear when a valid url is submitted
Edit of desired result:

Yes. display: none is the culprit. And for hiding the error message when valid url is submitted, you'll just need to set the innterText as empty string ('') when the input is valid.
Here's my solution: https://jsfiddle.net/mqvynw3L/
<html>
<head>
<style>
#errorMessage {
color: #EB7051;
font-size: 15px;
}
</style>
</head>
<body>
<form method="POST" id="Submit">
<div class="inner-form">
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "
></path>
</svg>
</div>
<input id="search" name="url" placeholder="Paste a domain here" type="url" required oninvalid="onInvalid(event)" />
</div>
<div class="input-field second-wrap">
<button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">
SEARCH
</button>
</div>
</div>
<p class="errorMessage" id="errorMessage"></p>
</form>
</body>
<script>
function runValidation() {
const inputEl = document.getElementById('search');
const errorEl = document.getElementById('errorMessage');
console.log('Validating the input value >>>', inputEl.value);
if (inputEl && typeof inputEl.checkValidity === 'function') {
const isValid = inputEl.checkValidity();
console.log('IsValid >>>', isValid);
errorEl.innerText = !isValid ? "Yikes! That's not a valid URL" : '';
return false;
}
return true;
}
function searchIt(ev) {
if (runValidation()) {
console.log('Search it .>>');
}
}
function onInvalid(ev) {
ev.preventDefault();
}
</script>
</html>
Since, oninvalid also runs only during submitting, it's best to create your own validation (I'm using the browser's native validator with checkValidity), and only execute your submit actions (eg: calling API) if the input is valid. This way you have more control over the logic and in case you decide to run the validation when the input changes, you can just call runValidation function for onkeypress event.

WordPress: Display a fallback thumbnail if post doesn't have a featured image

I'm working on local WordPress, theme: Twenty Twenty.
I'm trying to get it so that if the article does not have a feature image, then it uses one sourced elsewhere, but no matter what I try it doesn't work. It either displays no image at all, or this.
Obviously, I don't want the sourced image on the ones that do have a featured image uploaded.
Here is what I have so far:
<?php
/**
* Displays the featured image
*
* #package WordPress
* #subpackage Twenty_Twenty
* #since Twenty Twenty 1.0
*/
// if has feature image
if ( has_post_thumbnail() && ! post_password_required() ) {
$featured_media_inner_classes = '';
// Make the featured media thinner on archive pages.
if ( ! is_singular() ) {
$featured_media_inner_classes .= ' medium';
}
?>
<figure class="featured-media">
<div class="featured-media-inner section-inner<?php echo $featured_media_inner_classes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
<?php
the_post_thumbnail();
$caption = get_the_post_thumbnail_caption();
if ( $caption ) {
?>
<figcaption class="wp-caption-text"><?php echo wp_kses_post( $caption ); ?></figcaption>
<?php
}
?>
<!-- .featured-media -->
<?php
}
// no feature image
else {
echo '<img src="https://st4.depositphotos.com/17828278/24401/v/600/depositphotos_244011872-stock-illustration-image-vector-symbol-missing-available.jpg" alt=""/>';
}
edited WITH image
</header><!-- .archive-header -->
<div class="grid" id="container grid">
<div class="entry-header-inner section-inner medium">
<div class="portfolio-header box-row">
<h1 class="entry-title heading-size-1">Such Is My Fortune</h2></div>
<div class="feature-img box-row">
<figure class="featured-media">
<div class="featured-media-inner section-inner medium">
<img width="800" height="440" src="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-800x440.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" data-attachment-id="11" data-permalink="http://localhost:8888/wordpress/deaths-hourglass/" data-orig-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass.jpg" data-orig-size="944,1303" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Death’s Hourglass" data-image-description="" data-medium-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-217x300.jpg" data-large-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-742x1024.jpg" /></div><!-- .featured-media-inner -->
</figure>
</div>
<div class="post-meta box-row">
<div class="post-meta-wrapper post-meta-single post-meta-single-top">
<ul class="post-meta">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span>
<span class="meta-text">
By seabear211 </span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span>
<span class="meta-text">
October 19, 2020
</span>
</li>
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"><path d="M9.43016863,13.2235931 C9.58624731,13.094699 9.7823475,13.0241935 9.98476849,13.0241935 L15.0564516,13.0241935 C15.8581553,13.0241935 16.5080645,12.3742843 16.5080645,11.5725806 L16.5080645,3.44354839 C16.5080645,2.64184472 15.8581553,1.99193548 15.0564516,1.99193548 L3.44354839,1.99193548 C2.64184472,1.99193548 1.99193548,2.64184472 1.99193548,3.44354839 L1.99193548,11.5725806 C1.99193548,12.3742843 2.64184472,13.0241935 3.44354839,13.0241935 L5.76612903,13.0241935 C6.24715123,13.0241935 6.63709677,13.4141391 6.63709677,13.8951613 L6.63709677,15.5301903 L9.43016863,13.2235931 Z M3.44354839,14.766129 C1.67980032,14.766129 0.25,13.3363287 0.25,11.5725806 L0.25,3.44354839 C0.25,1.67980032 1.67980032,0.25 3.44354839,0.25 L15.0564516,0.25 C16.8201997,0.25 18.25,1.67980032 18.25,3.44354839 L18.25,11.5725806 C18.25,13.3363287 16.8201997,14.766129 15.0564516,14.766129 L10.2979143,14.766129 L6.32072889,18.0506004 C5.75274472,18.5196577 4.89516129,18.1156602 4.89516129,17.3790323 L4.89516129,14.766129 L3.44354839,14.766129 Z" /></svg> </span>
<span class="meta-text">
No Comments<span class="screen-reader-text"> on Such Is My Fortune</span> </span>
</li>
</ul><!-- .post-meta -->
</div><!-- .post-meta-wrapper -->
<div class="post-inner thin ">
<div class="entry-content">
<div class="portfolio-filter box-row">
<span class='type'><p> Type: Poetry </p></span>
<span class='genre'><p> </p></span>
</div>
without image
<div class ="box archive-container">
<div class="grid2">
<div class="entry-header-inner section-inner medium">
<div class="portfolio-header box-row">
<h1 class="entry-title heading-size-1">Vance</h2></div>
<div class="feature-img box-row">
<figure class="featured-media">
<div class="featured-media-inner section-inner medium">
</div><!-- .featured-media-inner -->
</figure>
</div>
<div class="post-meta box-row">
<div class="post-meta-wrapper post-meta-single post-meta-single-top">
<ul class="post-meta">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span>
<span class="meta-text">
By seabear211 </span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span>
<span class="meta-text">
October 14, 2020
</span>
</li>
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"><path d="M9.43016863,13.2235931 C9.58624731,13.094699 9.7823475,13.0241935 9.98476849,13.0241935 L15.0564516,13.0241935 C15.8581553,13.0241935 16.5080645,12.3742843 16.5080645,11.5725806 L16.5080645,3.44354839 C16.5080645,2.64184472 15.8581553,1.99193548 15.0564516,1.99193548 L3.44354839,1.99193548 C2.64184472,1.99193548 1.99193548,2.64184472 1.99193548,3.44354839 L1.99193548,11.5725806 C1.99193548,12.3742843 2.64184472,13.0241935 3.44354839,13.0241935 L5.76612903,13.0241935 C6.24715123,13.0241935 6.63709677,13.4141391 6.63709677,13.8951613 L6.63709677,15.5301903 L9.43016863,13.2235931 Z M3.44354839,14.766129 C1.67980032,14.766129 0.25,13.3363287 0.25,11.5725806 L0.25,3.44354839 C0.25,1.67980032 1.67980032,0.25 3.44354839,0.25 L15.0564516,0.25 C16.8201997,0.25 18.25,1.67980032 18.25,3.44354839 L18.25,11.5725806 C18.25,13.3363287 16.8201997,14.766129 15.0564516,14.766129 L10.2979143,14.766129 L6.32072889,18.0506004 C5.75274472,18.5196577 4.89516129,18.1156602 4.89516129,17.3790323 L4.89516129,14.766129 L3.44354839,14.766129 Z" /></svg> </span>
<span class="meta-text">
No Comments<span class="screen-reader-text"> on Vance</span> </span>
</li>
</ul><!-- .post-meta -->
</div><!-- .post-meta-wrapper -->
<div class="post-inner thin ">
<div class="entry-content">
<div class="portfolio-filter box-row">
<span class='type'><p> Type: Novel </p></span>
<span class='genre'><p>Genres: Adult Themes ❦ Dark Fantasy </p></span>
</div>

Convert a Button to Span. Why My code Doesn't work with javascript?

I'm using datatable button and I need a way to upload a file using those buttons
This Javascript
buttons: [
{
text: '<label for="fileUpload" class="btn btn-secondary-outline"><span class="fa fa-upload"></span> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"/>',
className: 'import-btn',
action: function () {
}
}
]
$('.import-btn').removeClass();
Generates
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button class="" tabindex="0" aria-controls="dataTable"><span><label for="fileUpload" class="btn btn-secondary-outline"><svg class="svg-inline--fa fa-upload fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="upload" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <span class="fa fa-upload"></span> --> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"></span></button>
I can upload but If I generate the code with the lines above nothing opens...
Also is there a way to change <button class="" tabindex="0" aria-controls="dataTable"> to <span class="" tabindex="0" aria-controls="dataTable">

Spans are inline elements, and they're hard to click. If you add
display: inline-block
(or even block), you should be fine. Here's a working snippet.
.hide {
display: none;
}
.spanButton {display: inline-block;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span class="spanButton" tabindex="0" aria-controls="dataTable"><span><label for="fileUpload" class="btn btn-secondary-outline"><svg class="svg-inline--fa fa-upload fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="upload" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <span class="fa fa-upload"></span> --> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"></span></span>

Categories