We Keep Coding

Run AJAX every x seconds with different data each time [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I have the below code whichs executes every 5 seconds. However i would like to return different data each time.
For example:
First interval = top level data (level.php)
Second interval = top skill data (skill.php)
Third interval = top magic data (magic.php)
And once the third interval is done... return to level.php to start the sequence again
Can someone tell me how would i modify the code to achieve what i want?
<script>
var text = "";
var toplevel = function() {
$.ajax({
type : 'GET',
url : '/pages/level.php',
success : function(data){
text = data;
$("#tops").fadeOut( "normal", function() {
$('#tops').html(data);
$("#tops").fadeIn( "normal", function() {});
});
},
});
};
$(document).ready(function(){
setInterval(toplevel, 5000);
toplevel();
});
</script>

You could have an array of URLs, always send the request to the first one, and rotate the array order on success:
function toplevel(urls) {
return function () {
$.get(urls[0]).done(function (data) {
urls.push(urls.shift());
$("#tops").fadeOut("normal", function () {
$('#tops').html(data).fadeIn( "normal");
});
});
}
};
$(function () {
var switcher = toplevel(['/pages/level.php', '/pages/skill.php', '/pages/magic.php']);
setInterval(switcher, 5000);
switcher();
});

Is there any way I can dry out this file? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Take a look at my files, the one thing that is bothering me for the moment is the repeated section and panel. I must not be able to see the bigger picture, so can anyone tell me a better and dryer method to code?
$(function() {
let pent = {
init : function () {
this.cacheDom();
this.bindEvents();
},
cacheDom: function () {
this.$el = $('#naver');
this.$button = this.$el.find('#xCancel');
this.$set = this.$el.find(".setting");
this.$section = [
this.$sectionA = this.$el.find('#set1'),
this.$sectionB = this.$el.find('#set2'),
this.$sectionC = this.$el.find('#set3'),
this.$sectionD = this.$el.find('#set4')
];
this.$panelA = this.$el.find('#settbox1');
this.$panelB = this.$el.find('#settbox2');
this.$panelC = this.$el.find('#settbox3');
this.$panelD = this.$el.find('#settbox4');
},
bindEvents: function () {
this.$button.on('click', this.hidePanel.bind(this));
this.$sectionA.on('click', this.showPanelA.bind(this));
this.$sectionB.on('click', this.showPanelB.bind(this));
this.$sectionC.on('click', this.showPanelC.bind(this));
this.$sectionD.on('click', this.showPanelD.bind(this));
},
showPanelA: function () {
this.$button.show();
this.$panelA.slideDown(100);
},
showPanelB: function () {
this.$button.show();
this.$panelB.slideDown(100);
},
showPanelC: function () {
this.$button.show();
this.$panelC.slideDown(100);
},
showPanelD: function () {
this.$button.show();
this.$panelD.slideDown(100);
},
hidePanel : function () {
this.$set.slideUp(100);
this.$button.hide();
},
};
pent.init();
});

Better code would be:
$('#xCancel').on('click', function() {
$('.setting').slideUp(100);
$(this).hide();
});
$('.set1').on('click', function() {
$('#xCancel').show();
$('.settbox').slideDown(100);
});
Just follow DRY principle and make things easier. I mean if you need to do the same operation for more elements, why you can't use class as universal selector?
On youtube are lots of tutorials or you can visit jQuery documentation website.

Converting code from jQuery to JavaScript doesn't get the same result [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have this piece of code in jQuery :
setTimeout(function () {
$('body .animate-box.item-animate').each(function (k) {
var el = $(this);
setTimeout(function () {
var effect = el.data('animate-effect');
if (effect === 'fadeIn') {
el.addClass('fadeIn animated-fast');
} else if (effect === 'fadeInLeft') {
el.addClass('fadeInLeft animated-fast');
} else if (effect === 'fadeInRight') {
el.addClass('fadeInRight animated-fast');
} else {
el.addClass('fadeInUp animated-fast');
}
el.removeClass('item-animate');
}, k * 200, 'easeInOutExpo');
});
}, 100);
I've tried to rewrite it using vanilla JS, but I don't get the same result. The value of the el element is different and this makes my web page refresh one time.
This is the code in JavaScript:
setTimeout(function () {
var index = 0;
document.querySelectorAll('body, .animate-box.item-animate').forEach( (k) => {
var el = k;
setTimeout(function () {
var effect = el.dataset.animateEffect;
if (effect === 'fadeIn') {
el.classList.add('fadeIn', 'animated-fast');
} else if (effect === 'fadeInLeft') {
el.classList.add('fadeInLeft', 'animated-fast');
} else if (effect === 'fadeInRight') {
el.classList.add('fadeInRight', 'animated-fast');
} else {
el.classList.add('fadeInUp', 'animated-fast');
}
el.classList.remove('item-animate');
}, ++index * 200);
});
}, 100);
Can any one tell me what I'm doing wrong?

I believe the correct conversion of this:
$('body .animate-box.item-animate')
should be this:
document.querySelectorAll('body .animate-box.item-animate')
and not this:
document.querySelectorAll('body, .animate-box.item-animate')
Explanation
This document.querySelectorAll('body, .animate-box.item-animate') will return all body elements (which are just one per page) and all elements which as the class animate-box.item-animate.
This document.querySelectorAll('body .animate-box.item-animate') will return all elements that are inside of the body element, which as the class animate-box.item-animate.

Can i shorten this jquery code [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have around 20 buttons that view different type av boxes when clicked, so my JS code is really long. The function works perfect but im wondering if there is a way to shorten this code or make it more cleaner?
// Content lvl 1
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-1').not(el).fadeOut("slow");
}
$('.showmore-1').hide();
$('#click-1a').click(function () {
show('#showmore-1a');
});
$('#click-1b').click(function () {
show('#showmore-1b');
});
// Content lvl 2
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-2').not(el).fadeOut("slow");
}
$('.showmore-2').hide();
$('#click-2a').click(function () {
show('#showmore-2a');
});
$('#click-2b').click(function () {
show('#showmore-2b');
// Content lvl 3
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-3').not(el).fadeOut("slow");
}
$('.showmore-3').hide();
$('#click-3a').click(function () {
show('#showmore-3a');
});
$('#click-3b').click(function () {
show('#showmore-3b');
});
And this will continue to click 20 i maybe will do even more.

YES
$("[id^=click]").click(function (e) { //match elements with ID's starting with "click"
oldSelector = e.target.id; //get the ID of the clicked element
newSelector = oldSelector.replace("click", "showmore"); //replace string
show(newSelector);
});
Advantage is that the code keeps working if you add more or less buttons the same way. No need to update this code for it, nor the HTML itself.
Body as 1 liner:
$("[id^=click]").click(function (e) {
show(e.target.id.replace("click", "showmore"));
});

If your HTML is editable, try something like this:
<button class="clickable" data-for="#showmore-1">Click</button>
Then your jQuery becomes:
$(function() {
$(document.body).on("click",".clickable",function(e) {
e.preventDefault();
show(this.getAttribute("data-for"));
});
function show(sel) { ... }
});

If your elements are like:
<div id="click-1">click me</div>
make them like:
<div class="showing-trigger" data-target-id="showmore-1">click me</div>
and then your handlers could be:
$('.showing-trigger').on('click', function () {
show('#' + $(this).data('target-id'));
});
Note that with this code your triggers can show a div with any id.

for ( var counter = 0; counter < 20; counter++)
{
$('#click-' + counter).click(function () {
var idCounter = $( this ).attr( "id" ).split( "-" )[1];
show('#showmore-' + idCounter );
});
}
or better yet, bind a click event to a class rather than on id

Try this:
for(var i=1,l=21; i<l; i++){
(function(i){ // closure scopes off i so it's not at end of loop when Event occurs
$('#click-'+i).click(function(){
$('.showmore').fadeOut('slow', function(){ // fade showmore class out
$('#showmore-'+i).show(); // show just the one you want
});
});
})(i);
}

It can be shortened to this:
$("[id^= click]").click(function (e) {
oldSelector = e.target.id; //get the ID of the clicked element
newSelector = oldSelector.replace("click", "showmore");
show(newSelector);
});

Add pause on hover to jQuery [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Can someone assist me in trying to get pause on hover working with this example. Essentially I need it to do the following.
Pause interval On Hover
Highlight item hovered over
on hover out resume rotate
Code (fiddle demo):
var $f = $('ul').find('.frame');
function recursive(i) {
$f.removeClass('showing').eq(i).addClass('showing');
setTimeout(function () {
recursive(++i % $f.length)
}, 1000);
}
recursive(0);

Working DEMO
You might need to tweak this a bit to fit into your requirements. Basically the idea is to clear interval on mouse over and resume recursion on mouseout & keep a reference to count.
var $f = $('ul').find('.frame'),
timeOut,
count;
function recursive(i) {
count = i;
$f.removeClass('showing').eq(i).addClass('showing');
timeOut = setTimeout(function () {
recursive(++i % $f.length)
}, 1000);
}
$('ul li').hover(function(){
clearTimeout(timeOut);
});
$('ul li').mouseout(function(){
recursive(count);
});
recursive(0);

Add this
$(".frame").hover(function () {
clearTimeout(t);
console.log(this);
$(this).addClass("showing");
}, function () {
recursive(0);
});
Fiddle

Try this:
var $f = $('ul').find('.frame');
$('ul li').hover(function(){
$f.removeClass('showing');
$(this).addClass('showing');
clearTimeout(timer);
}, function(){
recursive($(this).index());
});
function recursive(i) {
$f.removeClass('showing').eq(i).addClass('showing');
timer = setTimeout(function () {
recursive(++i % $f.length)
}, 1000);
}
recursive(0);
demo