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.
Related
I have been trying to create a like button with calling an ajax function in Django, But somehow whenever i click on the like button it redirect me to different page with a json object that return {liked : true }. why am getting this issue! it's been a challenge for me to figure it out and does it having any thing to do with my javascripts or with my function in views.py how better can i do this to stop the effect! and make the page not to reload when users like! Here's my like function!
def like(request, pk, c_slug=None):
user = request.user
if request.POST.get("operation") == "like_submit" and is_ajax(request=request):
liked=get_object_or_404(Like,pk=pk)
product = Product.objects.get(pk=pk, slug=c_slug)
liked= False
like = Like.objects.filter(user_like=user, product=product)
if like:
like.delete()
else:
liked = True
Like.objects.create(user_like=user, product=product)
resp = {
'liked':liked,
}
response = json.dumps(resp)
return HttpResponse(response,content_type = "application/json")
model.py
class Like(models.Model):
user_like = models.ForeignKey(settings.AUTH_USER_MODEL, related_name='user_likes', on_delete=models.CASCADE)
product = models.ForeignKey(Product, related_name='user_likes', on_delete=models.CASCADE)
like_date = models.DateTimeField(auto_now=True)
This is my scriepts for ajax call
<script>
$(".like").click(function (e) {
var id = this.id;
var href = $('.like').find('a').attr('href');
e.preventDefault();
$.ajax({
url: href,
data:
{'liked': $(this).attr('name'),
'operation':'like_submit',
'csrfmiddlewaretoken': '{{ csrf_token }}'},
success: function(response){
if(response.liked){
$('#likebtn' + id).html("Unlike");
$('#likebtn' + id).css("color", "gray")
}
else{
$('#likebtn' + id).html("Like");
$('#likebtn' + id).css("color", "blue")
}
}
})
});
</script>
my HTML
{% if product in liked %}
<a href='{% url "shop:like" product.id product.slug %}' id="likebtn{{ product.id }}" class="flexitems-center space-x-2">
<div class="p-2 rounded-full text-black lg:bg-gray-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="blue" width="22"height="22" class="dark:text-gray-100">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg>
</div>
<div >Unlike</div></a>
{% else %}
<a href='{% url "shop:like" product.id product.slug %}' id="likebtn{{ product.id }}" class="flex items-center space-x-2">
<div class="p-2 rounded-full text-black lg:bg-gray-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="22" height="22" class="dark:text-gray-100">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg>
</div>
<div >Like</div>
</a>
{% endif %}
It doesn't look like you actually have a like button, instead you have links to your like url - so obviously clicking those links is going to take you to those urls. It also doesn't look like any of your elements have the like class, so your JQuery AJAX code doesn't get triggered by anything.
I would suggest using an actual <button> HTML element - if you attached a like class to it then it should work as intended.
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>
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
}
}
I am trying to let the user select a category (3 in total) and then search for items in that category only.
Image for reference: https://ibb.co/zRspdFs
So, when a user clicks on, for example category 1, and then clicks on the form input, the search should show items from the selected category.
For now I have some dummy data as value for the input field. and I can retrieve values from the dropdown selection. But I don't know how to filter the search.
var availableTags = [
"mama",
"tata",
"PAPI"
];
$('#menu li').click(function(ev) {
ev.preventDefault();
var value = $(this).val();
$("#custId").val(value);
});
$("#searcher").autocomplete({
source: availableTags,
minLength: 0
}).click(function() {
$(this).autocomplete("search", $(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form class="form-inline col-lg-4 col-md-4 col-xs-12">
<svg class="svg-custom" 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>
<input class="input-custom srch form-control mr-sm-2" type="search" placeholder="Search by Keywords" id="searcher" aria-label="Search">
<div class="search-dropper">
<span class="icon-down-open-mini arrow-search"></span>
<ul id="menu" class="search-dropdown">
<a class="" href="#">
<li value="1">1</li>
</a>
<a href="#">
<li value="2">2</li>
</a>
<a href="#">
<li value="3">3</li>
</a>
<li>
<input type="hidden" id="custId" name="custId" value="3487">
</li>
</ul>
</div>
</form>
Can you make array that contains list of items that you can pass to autocomplete after category is selected?
eg:
var availableTags = [
"mama",
"tata",
"PAPI"
];
var categories = [
[searchItem1, searchitem2...],
[searchItem1, searchitem2...],
[searchItem1, searchitem2...]
]
On category select you take index, and you pull searchable items by index, and then pass that to autocomplete:
$( "#searcher" ).autocomplete({
source: categories[indexOfCategory]
});
Im sure there is a bit cleaner solution, jquery is not my specialty, but you can do something like this
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>