We Keep Coding

Loading spinner VueJS

I have to make a loading animation when a client clicks the button search to popup a spinner animation, in order the client can't click multiple times on the search button. However, I don't know how to call this animation. I have made this until now:
table.vue:
<div id="overlay-back"></div>
<div id="overlay">
<div id="dvLoading">
<img id="loading-image" src="../assets/images/spinner.gif" alt="Loading..."/>
</div>
</div>
loadData(filter) {
var self = this;
const url = this.$session.get('apiUrl') + 'loadSystemList'
this.submit('post', url, filter);
}
main.css:
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 995;
display : none;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 990;
display : none;
}
#dvLoading {
padding: 20px;
background-color: #fff;
border-radius: 10px;
height: 150px;
width: 250px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -125px 0 0 -125px;
text-align: center;
display: none;
}
I need to call the animation when the button Search is clicked and invokes the function loadData. I would be happy if you help me guys :) I am kinda lost
Update1:
file.vue:
<template>
<div>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<div id="dvLoading">
<i class="fa fa-spinner fa-spin fa-10x"></i>
</div>
<div class="toolbarStrip">
<br><h1 style="text-align: center; padding-bottom: 10px;">System table</h1>
<fieldset class="buttons">
<span class="logInBTN" v-on:click="loadData(filter)" id="loadData">Search</span>
</fieldset>
</div>
</div>
</template>
<script type="text/javascript">
import config from '../main.js'
var loadButton = document.getElementById("loadData");
export default {
data(){
return {
},
methods: {
stopShowingLoading(){
var element = document.getElementById("dvLoading");
element.classList.remove("showloading");
var button = document.getElementById("loadData");
button.classList.remove("showloading");
},
loadData(filter) {
var element = document.getElementById("dvLoading");
element.classList.add("showloading");
var button = document.getElementById("loadData");
button.classList.add("showloading");
var self = this;
const url = this.$session.get('apiUrl') + 'loadSystemList'
this.submit('post', url, filter);
window.setTimeout(function(){stopShowingLoading();},3000);
},
submit(requestType, url, submitData) {
this.$http[requestType](url, submitData)
.then(response => {
this.items = response.data;
})
.catch(error => {
console.log('error:' + error);
});
},
newData: function(){
config.router.push('/systemData')
}
}
}
</script>

first of all, whilst I have done things with vue.js in the past, I've forgotten much of that so there may be a better way within that framework than this, which is a vanilla JS approach really...
You don't seem to have a requirement to stop showing the loading animation. When I've done this sort of thing in the past, I've usually made use of callbacks to know when the loading operation is complete, and at that point 'turn off' the loading animation. I've included a function to hide the loading, but don't know where/if you'd want to call this.
This is untested, so apologies for typos or other minor errors...
css:
/*
Override the display:none on the #dvloading element if it has a class
of 'showloading
*/
#dvLoading.showloading{
display:block
}
JS:
function loadData(filter) {
/*
Add the 'showloading' class to the #dvLoading element.
this should make it appear due to the css change...
*/
var element = document.getElementById("dvLoading");
element.classList.add("showloading");
var self = this;
const url = this.$session.get('apiUrl') + 'loadSystemList'
this.submit('post', url, filter);
}
function stopShowingLoading(){
/*
When loading finishes, reverse the process
*/
var element = document.getElementById("dvLoading");
element.classList.remove("showloading");
}
edit: jsFiddle to show general approach
further edit: To stop showing animation only after data has loaded (I just used a timeout to simulate this in my example) then you need to simply stop it after the data has loaded, which would be something like this:
submit(requestType, url, submitData) {
this.$http[requestType](url, submitData)
.then(response => {
// We've received the data now, so set items and
//also hide the loading animation.
this.items = response.data;
this.stopShowingLoading();
})
...
and then remove the window.setTimeout() call altogether.

Method fired multiple times on click event

I'm building a web app in which the user can type in any key word or statement and get in return twenty results from wikipedia using the wikipedia API. AJAX works just fine. When the web app pulls data from wikipedia it should display each result in a DIV created dynamically.
What happens is that, when the click event is fired, the twenty DIVs are created five times, so one hundred in total. I don't know why but, as you can see in the snippet below, the web app creates twenty DIVs for each DOM element that has been hidden (through .hide) when the click event is fired.
Here's is the code:
function main() {
function positive() {
var bar = document.getElementById("sb").childNodes[1];
var value = bar.value;
if (!value) {
window.alert("Type in anything to start the research");
} else {
var ex = /\s+/g;
var space_count = value.match(ex);
if (space_count == null) {
var new_text = value;
} else {
new_text = value.replace(ex, "%20");
//console.log(new_text);
}
url = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&continue=-%7C%7C&srsearch=" + new_text + "&srlimit=20&sroffset=20&srprop=snippet&origin=*";
var request = new XMLHttpRequest();
request.open("GET", url);
//request.setRequestHeader("Api-User-Agent", "Example/1.0");
request.onload = function() {
var data = JSON.parse(request.responseText);
render(data);
//console.log(data);
}
request.send();
}
}
function render(data) {
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
$("#sb input").css({
"float":"left",
"margin-left":"130px"
});
$("#first_btn").css({
"float":"left"
});
var title = data.query.search[0].title;
var new_text = document.createTextNode(title);
var new_window = document.createElement("div");
new_window.appendChild(new_text);
new_window.setAttribute("class", "window");
var position = document.getElementsByTagName("body")[0];
position.appendChild(new_window);
//}
});
}
var first_btn = document.getElementById("first_btn");
first_btn.addEventListener("click", positive, false);
}
$(document).ready(main);
html {
font-size: 16px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;ù
}
.align {
text-align: center;
}
#first_h1 {
margin-top: 30px;
}
#first_h3 {
margin-bottom: 30px;
}
#sb {
margin-bottom: 10px;
}
#second_h1 {
margin-top: 30px;
}
#second_h3 {
margin-bottom: 30px;
}
.window {
width: 70%;
height: 150px;
border: 3px solid black;
margin: 0 auto;
margin-top: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wikipedia Viewer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h1 class="align" id="first_h1">Wikipedia Viewer</h1>
<h3 class="align" id="first_h3">Type in a key word about the topic you are after<br>and see what Wkipedia has for you..</h3>
<p class="align" id="sb">
<input type="text" name="search_box" placeholder="Write here">
<label for="search_box">Your search starts here...</label>
</p>
<p class="align" id="first_btn">
<input type="submit" value="SEND">
</p>
<h1 class="align" id="second_h1">...Or...</h1>
<h3 class="align" id="second_h3">If you just feel eager of random knowledge,<br>punch the button below and see what's next for you...</h3>
<p class="align" id="second_btn">
<input type="submit" value="Enjoy!">
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>')
</script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
I made the code easier to read by erasing the for loop. As you can see, even with just one result, it is displayed five times.
Do you know guys why it happens?
thanks

The line:
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {})
Says, for every element in this "list", hide the element and run this block of code after hidden.

This code is the culprit:
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow",
function() {...});
The callback function is called five times, one for each ID listed, not once for all of them, as you might expect.
A workaround is to create a class (say, "hideme"), apply it to each element you want to hide, and write:
$('.hideme').hide("slow", function() {...});

function render(data) {
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
$("#sb input").css({
"float":"left",
"margin-left":"130px"
});
$("#first_btn").css({
"float":"left"
});
}); // Finish it here..
var title = data.query.search[0].title;
var new_text = document.createTextNode(title);
var new_window = document.createElement("div");
new_window.appendChild(new_text);
new_window.setAttribute("class", "window");
var position = document.getElementsByTagName("body")[0];
position.appendChild(new_window);
//}
// }); Move this line..
}

As described in the docs:
complete: A function to call once the animation is complete, called once per matched element.
Which means this line will call the handle function 5 times with 5 matched elements.
$("#first_h1, #first_h3, #sb label, #second_h1, #second_h3").hide("slow", function() {
The easiest solution is moving the render codes outside of the hide event handler

Tooltipster content doubling up each time it is opened

I'm using Tooltipster to show a list of items that the user can click so as to enter the item into a textarea. When a tooltip is created, I get its list of items with selectors = $("ul.alternates > li");
However, each time a tooltip is opened the item clicked will be inserted a corresponding number of times; for example if I've opened a tooltip 5 times then the item clicked will be inserted 5 times. I've tried deleting the variable's value after a tooltip is closed with functionAfter: function() {selectors = null;} but that had no effect.
I have a Codepen of the error here that should make it clearer.
// set list to be tooltipstered
$(".commands > li").tooltipster({
interactive: true,
theme: "tooltipster-light",
functionInit: function(instance, helper) {
var content = $(helper.origin).find(".tooltip_content").detach();
instance.content(content);
},
functionReady: function() {
selectors = $("ul.alternates > li");
$(selectors).click(function() {
var sampleData = $(this).text();
insertText(sampleData);
});
},
// this doesn't work
functionAfter: function() {
selectors = null;
}
});
// Begin inputting of clicked text into editor
function insertText(data) {
var cm = $(".CodeMirror")[0].CodeMirror;
var doc = cm.getDoc();
var cursor = doc.getCursor(); // gets the line number in the cursor position
var line = doc.getLine(cursor.line); // get the line contents
var pos = {
line: cursor.line
};
if (line.length === 0) {
// check if the line is empty
// add the data
doc.replaceRange(data, pos);
} else {
// add a new line and the data
doc.replaceRange("\n" + data, pos);
}
}
var code = $(".codemirror-area")[0];
var editor = CodeMirror.fromTextArea(code, {
mode: "simplemode",
lineNumbers: true,
theme: "material",
scrollbarStyle: "simple",
extraKeys: { "Ctrl-Space": "autocomplete" }
});
body {
margin: 1em auto;
font-size: 16px;
}
.commands {
display: inline-block;
}
.tooltip {
position: relative;
opacity: 1;
color: inherit;
}
.alternates {
display: inline;
margin: 5px 10px;
padding-left: 0;
}
.tooltipster-content .alternates {
li {
list-style: none;
pointer-events: all;
padding: 15px 0;
cursor: pointer;
color: #333;
border-bottom: 1px solid #d3d3d3;
span {
font-weight: 600;
}
&:last-of-type {
border-bottom: none;
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/theme/material.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/235651/jquery-3.2.1.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/235651/tooltipster.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/addon/mode/simple.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/addon/hint/show-hint.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/addon/scroll/simplescrollbars.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="commands">
<li><span class="command">Hover for my list</span><div class="tooltip_content">
<ul class="alternates">
<li>Lorep item</li>
<li>Ipsum item</li>
<li>Dollar item</li>
</ul>
</li>
</div>
</ul>
</div>
<div class="col-md-6">
<textarea class="codemirror-area"></textarea>
</div>
</div>
</div>

Tooltipster's functionReady fires every time the tooltip is added to the DOM, which means every time a user hovers over the list, you are binding the event again.
Here are two ways to prevent this from happening:
Attach a click handler to anything that exists in the DOM before the tooltip is displayed. (Put it outside of tooltipspter(). No need to use functionReady.)
Example:
$(document).on('click','ul.alternates li', function(){
var sampleText = $(this).text();
insertText(sampleText);
})
Here's a Codepen.
Unbind and bind the event each time functionReady is triggered.
Example:
functionReady: function() {
selectors = $("ul.alternates > li");
$(selectors).off('click').on('click', function() {
var sampleData = $(this).text();
insertText(sampleData);
});
}
Here's a Codpen.

You are binding new clicks every time.
I would suggest different code style but in that format you can just add before the click event
$(selectors).unbind('click');
Then do the click again..

How to pause and start gif using jQuery AJAX

I am a student and I am trying to start, pause and start a gif when a user clicks the gif, however I am stuck on how to add in this click function. I know that the the gif version of the object is .images.fixed_height.url and the still image is .images.fixed_height_still.url . If I try to append like below $(this) I get that images is undefined. How would I go by doing this? Currently 10 gifs show when you click the category. Thank you for any help in advance.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Giphy</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
body {
background-image: url('http://www.efoza.com/postpic/2011/04/elegant-blue-wallpaper-designs_154158.jpg');
width: 100%;
}
button {
padding: 0 2%;
margin: 0 2%;
}
h4 {
font-size: 165%;
font-weight: bold;
color: white;
}
.container {
background-color: rgba(0, 0, 0, 0.2);
max-width: 1000px;
width: 100%;
}
.btn {
margin-top: 2%;
margin-bottom: 2%;
font-size: 125%;
font-weight: bold;
}
.guide {
padding: 3% 0 0 0;
}
.tag-row {
padding: 3% 0 0 0;
}
.category-row {
padding: 3% 0 ;
}
#photo {
padding-bottom: 3%;
}
</style>
</head>
<body>
<div class="container">
<div class="row text-center guide"><h4>Click a category and see the current top 10 most popular giphy's of that category!</h4></div>
<div class="row text-center tag-row" id="tags"></div>
<div class="row text-center category-row">
<input type="" name="" id="category"><button class="btn btn-secondary" id="addTag">Add Category</button>
</div>
</div>
<div class="container">
<div id="photo"></div>
</div>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
var tags = ["dog", "dolphin", "whale", "cat", "elephant", "otter"];
// Function for displaying movie data
function renderButtons() {
$("#tags").empty();
for (var i = 0; i < tags.length; i++) {
$("#tags").append('<button class="tag-buttons btn btn-primary">' + tags[i] + '</button>');
}
}
// Add tags function //
$(document).on('click', '#addTag', function(event) {
event.preventDefault();
var newTag = $("#category").val().trim();
tags.push(newTag);
$("#tags").append('<button class="tag-buttons btn btn-primary">' + newTag + '</button>');
});
// Tag button function //
$(document).on('click', '.tag-buttons', function(event) {
// Keeps page from reloading //
event.preventDefault();
var type = this.innerText;
console.log(this.innerText);
var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + window.encodeURI(type) + "&limit=10&api_key=dc6zaTOxFJmzC";
$.ajax({
url: queryURL,
method: "GET"
}).done(function(response) {
for (var i = 0; i < response.data.length; i++) {
$("#photo").append('<img src="' + response.data[i].images.fixed_height_still.url + '" class="animate">');
$('.animate').on('click', function() {
$(this).remove().append('<img src="' + response.data[i].images.fixed_height.url + '" class="animate">');
console.log($(this));
});
}
});
$("#photo").empty();
});
renderButtons();
</script>
</body>
</html>

The difference between fixed_height and fixed_height_still will solve the problem. if you look closely the urls differ only by name_s.gif and name.gif.
So you can simply swap the two images to create a player. This will act like a play and stop. Not play and pause. But in a small gif I don't think pause really matter, stop and pause will look similar.
adding class name to the #photo
$("#photo").append('<img class="gif" src="' + response.data[i].images.fixed_height_still.url + '">');
event handler which will control play and stop
$('body').on('click', '.gif', function() {
var src = $(this).attr("src");
if($(this).hasClass('playing')){
//stop
$(this).attr('src', src.replace(/\.gif/i, "_s.gif"))
$(this).removeClass('playing');
} else {
//play
$(this).addClass('playing');
$(this).attr('src', src.replace(/\_s.gif/i, ".gif"))
}
});
jsfiddle demo
https://jsfiddle.net/karthick6891/L9t0t1r2/

you can use this jquery plugin http://rubentd.com/gifplayer/
<img class="gifplayer" src="media/banana.png" />
<script>
$('.gifplayer').gifplayer();
</script>
you can control like this
Use these methods to play and stop the player programatically
$('#banana').gifplayer('play');
$('#banana').gifplayer('stop');
youll find more details here https://github.com/rubentd/gifplayer

jqtouch - enable Checkbox with Javascript after the user has changed the value

I use jqtouch and have a checkbox:
<li>Checkbox1<span class="toggle"><input type="checkbox" id="1" onclick="Javascript:SetGPIO('1')"> </span></li>
I can enable this checkbox:
$('#1').prop('checked', true);
or
$('#1').attr('checked', true);
and i can disable
$('#1').removeAttr("checked");
This works well.
However, once the user has switched the checkbox, the checkbox can not set by the code above.
I have also tried with:
$('#1').prop("checked",false); //Enables the checkbox (?)
$('#1').attr('checked', false); //enables the checkbox (?)
What can i do, to set the checkbox via JavaScript, after the user has pressed the checkbox?
[Edit]
I have here a complete example for jqtouch:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQTouch β</title>
<link rel="stylesheet" href="../../themes/css/jqtouch.css"
title="jQTouch">
<script src="../../src/lib/zepto.min.js" type="text/javascript"
charset="utf-8"></script>
<script src="../../src/jqtouch.min.js" type="text/javascript"
charset="utf-8"></script>
<!-- Uncomment the following two lines (and comment out the previous two) to use jQuery instead of Zepto. -->
<!-- <script src="../../src/lib/jquery-1.7.min.js" type="application/x-javascript" charset="utf-8"></script> -->
<!-- <script src="../../src/jqtouch-jquery.min.js" type="application/x-javascript" charset="utf-8"></script> -->
<script src="../../extensions/jqt.themeswitcher.min.js"
type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon : 'jqtouch.png',
icon4 : 'jqtouch4.png',
addGlossToIcon : false,
startupScreen : 'jqt_startup.png',
statusBar : 'black-translucent',
themeSelectionSelector : '#jqt #themes ul',
preloadImages : []
});
// Some sample Javascript functions:
$(function() {
// Show a swipe event on swipe test
$('#swipeme').swipe(
function(evt, data) {
var details = !data ? '' : '<strong>' + data .direction
+ '/' + data.deltaX + ':' + data.deltaY
+ '</strong>!';
$(this).html('You swiped ' + details);
$(this).parent().after('<li>swiped!</li>')
});
$('#tapme').tap(function() {
$(this).parent().after('<li>tapped!</li>')
});
$('a[target="_blank"]').bind('click', function() {
if (confirm('This link opens in a new window.')) {
return true;
} else {
return false;
}
});
// Page animation callback events
$('#pageevents').bind(
'pageAnimationStart',
function(e, info) {
$(this).find('.info').append(
'Started animating ' + info.direction
+ '… And the link '
+ 'had this custom data: '
+ $(this).data('referrer').data('custom')
+ '<br>');
}).bind(
'pageAnimationEnd',
function(e, info) {
$(this).find('.info').append(
'Finished animating ' + info.direction
+ '.<br><br>');
});
// Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
$('#callback').bind(
'pageAnimationEnd',
function(e, info) {
// Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
if (!$(this).data('loaded')) {
// Append a placeholder in case the remote HTML takes its sweet time making it back
// Then, overwrite the "Loading" placeholder text with the remote HTML
$(this).append(
$('<div>Loading</div>').load(
'ajax.html .info',
function() {
// Set the 'loaded' var to true so we know not to reload
// the HTML next time the #callback div animation ends
$(this).parent().data('loaded',
true);
}));
}
});
// Orientation callback event
$('#jqt').bind('turn', function(e, data) {
$('#orient').html('Orientation: ' + data.orientation);
});
});
function toggleCheckbox(){
if ($('#myCheckbox1').attr('checked') == 'true'){
$('#myCheckbox1').removeAttr("checked");
}
else {
$('#myCheckbox1').attr('checked', true);
}
window.setTimeout('toggleCheckbox()', 2000); //toggle every 2 seconds
}
toggleCheckbox();
</script>
<style type="text/css" media="screen">
#jqt.fullscreen #home .info {
display: none;
}
div#jqt #about {
padding: 100px 10px 40px;
text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0;
color: #999;
font-size: 13px;
text-align: center;
background: #161618;
}
div#jqt #about p {
margin-bottom: 8px;
}
div#jqt #about a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<div id="jqt">
<div id="home" class="current">
<div class="scroll">
<ul class="rounded">
<li>MyCheckbox<span class="toggle"><input
type="checkbox" id="myCheckbox1" >
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
The checkbox toggle every 2 seconds, but only until the user clicks on this.
I hope now my question is a little clearer. And sorry for my bad english.
[/edit]

First, what you're actually doing is checking and unchecking the boxes as opposed to enabling and disabling them (disabled means the user can't check or uncheck the box anymore). Second, the checked property isn't set to true/false (though that would make more sense) you have to set checked to "checked" to have it checked and remove the property to uncheck it.
$('#1').attr('checked', 'checked'); //Check
$('#1').removeAttr("checked"); //Uncheck