Develop Reference

Javascript foreach loop calls ajax several times

So I am trying to create to do list with several boards. Each board have add item button. If I click add item button it opens modal where to insert task info. But if I click add item button several times and then insert info to modal and press save ajax fires as many times i clicked add item button. How can I prevent from that?
var addNewItems = document.querySelectorAll("#addNewItem");
var addNewSubmits = document.querySelectorAll("#listItemSave");
addNewItems.forEach(function(addNewItem) {
addNewItem.addEventListener("click", function(e) {
var newItemModal = this.nextElementSibling;
newItemModal.classList.toggle("hidden");
var addNewBtn = newItemModal.querySelector("#listItemSave");
//current board
var board = this.closest("div.list");
//current list
var list = board.querySelector(".todo--items");
addNewBtn.addEventListener ("click", function(e) {
//current board id
var boardId = board.dataset.boardid;
//current title
var title = newItemModal.querySelector("#listTitle");
var titleValue = title.value;
//current content
var content = newItemModal.querySelector("#listTextarea");
var contentValue = content.value;
$.ajax({
type: "POST",
url: "add.php",
data: { content: contentValue , title: titleValue , listid: boardId },
success: function(data, textStatus, jqXHR) {
$("#todoItems-" + id + "").append(data);
}
});
});
});
});

You could use a variable, lets say busy, to validate that an AJAX request isn't already on going.
You could set this variable in the beforeSend callback of AJAx and then updated it back to false in the finally callbac :
var addNewItems = document.querySelectorAll("#addNewItem");
var addNewSubmits = document.querySelectorAll("#listItemSave");
addNewItems.forEach(function (addNewItem) {
addNewItem.addEventListener("click", function (e) {
var newItemModal = this.nextElementSibling;
newItemModal.classList.toggle("hidden");
var addNewBtn = newItemModal.querySelector("#listItemSave");
//current board
var board = this.closest("div.list");
//current list
var list = board.querySelector(".todo--items");
var busy = false;
addNewBtn.addEventListener("click", function (e) {
//current board id
var boardId = board.dataset.boardid;
//current title
var title = newItemModal.querySelector("#listTitle");
var titleValue = title.value;
//current content
var content = newItemModal.querySelector("#listTextarea");
var contentValue = content.value;
if (!busy) {
$.ajax({
type: "POST",
url: "add.php",
beforeSend: () => {
busy = true;
}
data: {
content: contentValue,
title: titleValue,
listid: boardId
},
success: function (data, textStatus, jqXHR) {
$("#todoItems-" + id + "").append(data);
},
complete: () => {
busy = false;
}
});
}
});
});
});
This is a pretty simple solution but it works.

You can use addNewBtn.onclick = function () {} instead to overlap the previous listener in this case.
But it's not recommended to register listeners inside another listener. Try to move it out of there.

keep the scroll to bottom with appending text to it

I have created a chatbox which scrolls to bottom at first and the scroll bar remain their until user scrolls up.But a new text is inserted instead of scroll bar moving to downward it remain at the same position.
<script>
var currentID = null;
var chatTimer = null;
var scrolled=false;
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
//fetch_chat();
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#messages").show();
$('#messages').html(data);
$("div.area").show();
//chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time
if(!scrolled){
$("#messages").animate({ scrollTop: $(document).height() }, "fast");
}
}
});
}
$(document).ready(function() {
$("#messages").on('scroll',function(){
scrolled=true;
});
fetch_data();
$(document).on('click', '.first_name', function() {
currentID = $(this).data("id1");
//immediately fetch chat for the new ID, and clear any waiting fetch timer that might be pending
//clearTimeout(chatTimer);
fetch_chat();
});
function scrollToBottom() {
$("#messages").scrollTop(1e10); // Lazy hack
}
setInterval(function() {
fetch_chat();
}, 500);
$("#sub").click(function() {
var text = $("#text").val();
$.post('insert_chat.php', {
id: currentID,
msg: text
}, function(data) {
$("#messages").append(data);
$("#text").val('');
scrollToBottom();
});
// alert(text);
});
//this will also trigger the first fetch_chat once it completes
});
</script>
I just want to keep that scroll at the bottom even after user enter a new text.
the scroll should always remain at bottom but should be scrollable when user wish to do so.

First read the height of current chat box using jQuery like this,
var scrollToheight = $("#message").height();
And then use this height to scrollTop jQuery function :
$("#message").scrollTop(scrollToheight);
This should work for you always.

Correct way to wait after click once clicked then enable again? Javascript

I looked at many of the same question as mine and I tried to implement them into my code, but no luck.
$(document).ready(function(){
// when the user clicks on like
$('.icon-wrapper').on('click', function(){
setTimeout(function() {
}, 5200);
var postid = $(this).data('id');
$post = $(this);
$.ajax({
url: 'user_profiles.php',
type: 'post',
data: {
'liked': 1,
'postid': postid
},
success: function(response){
$post.parent().find('span.likes_count').text(response);
$post.addClass('hide');
$post.siblings().removeClass('hide');
$post.siblings().addClass('anim');
$post.removeClass('anim');
}
});
});
// when the user clicks on unlike
$('.icon-appear').on('click', function(){
setTimeout(function() {
}, 5200);
var postid = $(this).data('id');
$post = $(this);
$.ajax({
url: 'user_profiles.php',
type: 'post',
data: {
'unliked': 1,
'postid': postid
},
success: function(response){
$post.parent().find('span.likes_count').text(response);
$post.siblings().removeClass('anim');
$post.addClass('anim');
$post.addClass('hide');
$post.siblings().removeClass('hide');
}
});
});
});
The code above is the one that doesn't work when I insert setTimeout
var $iconWrapper = $(".icon-wrapper");
$iconWrapper.on('click', function() {
var _this = $(this);
if (_this.hasClass('anim')) _this.removeClass('anim');
else {
_this.addClass('anim');
_this.css('pointer-events', 'none');
setTimeout(function() {
_this.css('pointer-events', '');
}, 3200);
}
})
This one works but not as well as it should. When I got to like, it doesn't delay the like, it delays the unlike instead.
When I go to like something, no action takes place. I am trying to prevent the button from being push multiple times quickly. I am still learning Javascript so I gladly appreciate any response/answer!

Previous divs with jQuery does not work after Ajax call

I have two scripts:
The first one is image carousel. It uses jQuery slick slider.
The second one is an Ajax script that loads contents as page scrolls down.
Here is my code:
function slider () {
var $arrows = $('.arrows');
var $next = $arrows.children(".slick-next");
var $prev = $arrows.children(".slick-prev");
var slick = $('.your-class').slick({
appendArrows: $arrows
});
$('.slick-next').on('click', function (e) {
var i = $next.index( this )
slick.eq(i).slickNext();
});
$('.slick-prev').on('click', function (e) {
var i = $prev.index( this )
slick.eq(i).slickPrev();
});
}
$(document).ajaxComplete(slider);
Below is the scroll content load with Ajax:
$(document).ready(function(){
function slider () {
var $arrows = $('.arrows');
var $next = $arrows.children(".slick-next");
var $prev = $arrows.children(".slick-prev");
var slick = $('.your-class').slick({
appendArrows: $arrows
});
$('.slick-next').on('click', function (e) {
var i = $next.index( this )
slick.eq(i).slickNext();
});
$('.slick-prev').on('click', function (e) {
var i = $prev.index( this )
slick.eq(i).slickPrev();
});
}
$(document).ajaxComplete(slider);
var flag = 0;
$.ajax({
type: "GET",
url: "getdata.php",
data: {
'offset': 0,
'limit': 10
},
success: function(data){
$('.rowmasonry').append(data);
flag += 10;
},
});
$(window).scroll(function(){
if($(window).scrollTop() >= $(document).height() - $(window).height()-500){
$.ajax({
type: "GET",
url: "getdata.php",
data: {
'offset': flag,
'limit': 10
},
success: function(data){
$('.rowmasonry').append(data);
flag += 10;
},
});
}
});
});
The problem is that the first 10 contents that are loaded work properly. However, as I scroll down, and another 10 contents come, the first 10 contents that were loaded do not respond.
How do I bind the image slider to Ajax, so that all contents on the page work with jQuery?
Thanks for your help.

You are just appending new elements to DOM. In order to update slick you need to reInit slick carousel or if you are sure about the slide markup then you can use slickAdd method provided by plugin.
$.ajax().done(function(data){
$('.your-class').slick('slickAdd', data);
});
ref: http://kenwheeler.github.io/slick/

stop/cancel form jquery form action from javascript?

I have a form that is submitted via jquery for an instant image upload. When the image starts to upload via the form, i show a cancel upload button via jquery. Now is there a way using jquery, i can stop/cancel the form submission on the click property of the cancel upload button? What i do currently is that i delete the current upload from the databse using ajax and then refresh the page. this will not upload the image but i am trying to find something that will not let the page refresh.
$('.deleteimage').live("click", function () {
var ID = $(this).attr("id");
var IPString = $(".ipvaluetable").val();
var dataString = 'msg_id=' + IPString;
document.getElementById("preview").style.visibility = "hidden";
$(".preview").slideUp('slow', function () {
$(this).remove();
});
document.getElementById("deleteimage").style.visibility = "hidden";
$.ajax({
type: "POST",
url: "http://schoolspam.com/delete_image.php",
data: dataString,
cache: false,
success: function (html) {}
});
location.reload();
return false;
});

Well on cancel you can do event.preventDefault(); and then return false.
Example
$('.cancel').on('click', function(e){
e.preventDefault();
return false;
});

Please use below code and also see my comments :
$('.deleteimage').live("click", function (e) {
e.preventDefault();//Stops default behaviour
var ID = $(this).attr("id");
var IPString = $(".ipvaluetable").val();
var dataString = 'msg_id=' + IPString;
document.getElementById("preview").style.visibility = "hidden";
$(".preview").slideUp('slow', function () {
$(this).remove();
});
document.getElementById("deleteimage").style.visibility = "hidden";
$.ajax({
type: "POST",
url: "http://schoolspam.com/delete_image.php",
data: dataString,
cache: false,
success: function (html) {}
});
//location.reload();//This one needs to be removed so as to stop the reload
return false;
});