I'm having this problem with Ajax where each time data is sent, the script gets duplicated and it makes my audio overlap or play multiple times.
$.ajax({
url: 'fetch.php',
method: 'POST',
data: { limit: limit, start: start },
cache: false,
success: function (data) {
$('#load_quotes_recent').append(data);
if (!$.trim(data)) {
action = 'active';
} else {
action = 'inactive';
}
if (window.location == 'https://www.example.com/') {
$('.icon-wrapper').on('click', function () {
var postid = $(this).data('id');
$post = $(this);
$.ajax({
url: 'fetch.php',
type: 'post',
data: {
'liked': 1,
'postid': postid
},
success: function (response) {
var audio = new Audio('../sounds/pop.mp3');
audio.pause();
audio.currentTime = 0;
audio.play();
}
});
});
}
}
});
I was wondering if there was a way to prevent the script from duplicating itself so that the audio won't overlap?
The reason why I have it like this is because if I were to put the script in fetch.php Ajax will think I still have data left once I've reached the end even though I do not.
It would be great if there was a way to "replace" the same script instead of duplicating them.
Why not just initialise the audio separate from the AJAX, then only have it play when needed?
var audio = new Audio('../sounds/pop.mp3');
$.ajax({
url: 'fetch.php',
method: 'POST',
data: { limit: limit, start: start },
cache: false,
success: function (data) {
$('#load_quotes_recent').append(data);
if (!$.trim(data)) {
action = 'active';
} else {
action = 'inactive';
}
if (window.location == 'https://www.example.com/') {
$('.icon-wrapper').on('click', function () {
var postid = $(this).data('id');
$post = $(this);
$.ajax({
url: 'fetch.php',
type: 'post',
data: {
'liked': 1,
'postid': postid
},
success: function (response) {
audio.pause();
audio.currentTime = 0;
audio.play();
}
});
});
}
}
});
Related
i want to send ajax request to a url and the response is json its has 2 object ; first is group_id second object is next_page. i want to send next ajax request if isset next_page and request url will be next_page value if there isn't next_page stop ajax requesting.
this is my javascript code but not working :
$("#getUsersId").on('submit', function(e){
e.preventDefault();
var Keyword = $('#Keyword').val();
var fbAcc = $("#fbAccs").val();
$.ajax({
type: 'POST',
url: 'exGoupsReq.php',
data:{Keyword: Keyword,fb_acc: fbAcc},
dataType: 'json',
beforeSend: function(){
$('.submitBtn').attr("disabled","disabled");
$('#addFbAcc').css("opacity",".5");
},
success: function(response){
$('.successMSG').html('');
if(response[0].next_page){
console.log(response[0].next_page);
// if is set next_page then send ajax request to next_page
$.ajax({
type: 'POST',
url: 'exGoupsReq.php?next='+response[0].next_page,
data:{Keyword: Keyword,fb_acc: fbAcc},
dataType: 'json',
beforeSend: function(){
},
success: function(response2){
if(response[0].next_page){
$.ajax({
type: 'POST',
url: 'exGoupsReq.php?next='+response2[0].next_page,
data:{Keyword: Keyword,fb_acc: fbAcc},
dataType: 'json',
beforeSend: function(){
},
success: function(response){
}
});
}
}
});
}else{
$('.successMSG').html(
Swal.fire({
icon: 'danger',
title: response.message,
showConfirmButton: false,
timer: 2000,
timerProgressBar: true
}).then(function(isConfirm) {
if (isConfirm) {
} else {
//if no clicked => do something else
}
})
);
}
$('#addFbAcc').css("opacity","");
$(".submitBtn").removeAttr("disabled");
}
});
});
and this is the json response:
[{"group_id":"3227753957460161","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"634745371303934","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"623523731538627","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"874339386716003","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"327802997885129","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"1213445152028414","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"310298904216864","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"2630210850348811","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"234662357739095","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"591588044857727","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"3348702175450922","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"101162043569757","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"},{"group_id":"2287318904779687","next_page":"/smm/nextpage.php?id=jkldt5u437VpRx57AZF_SwJok0Qj5Nkcma8LUb_AKz1agfMs_5YFb1Gf2cI2_6t8fSrE_fqZ-cbex-CIJf4meZjFWkBU87OnJrxUP6wWdGkV4kOqCexzbBpjEXQVwKzg8H7XAJw2ZfHLbCvacn1Q9I6Hh4C0Z6sD_eVOaPyTMWqVZsA&pn=2&usid=34fcde099323ec03cc2630d7e4b36988&tsid&refid=46"}]
I've modified your code so that it uses a recursive function. That means that whenever there is a next page, it will fetch it and keeps doing this untill there are no more next pages to fetch.
async function scrapePage(url, data = {}) {
const response = await $.ajax({
url,
data,
type: "POST",
dataType: "json",
});
// If there is no next page, show the error.
const nextPage = response[0]?.next_page;
if (typeof nextPage === 'undefined') {
$(".successMSG").html(
Swal.fire({
icon: "danger",
title: "No more pages",
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
}).then(function (isConfirm) {
if (isConfirm) {
} else {
//if no clicked => do something else
}
})
);
return;
}
// Otherwise scrape the next page.
await scrapePage(nextPage, data);
}
$("#getUsersId").on("submit", async function (e) {
e.preventDefault();
var keyword = $("#Keyword").val();
var fbAcc = $("#fbAccs").val();
const data = {
Keyword: keyword,
fb_acc: fbAcc
};
$(".submitBtn").attr("disabled", "disabled");
await scrapePage("exGoupsReq.php", data);
$(".submitBtn").removeAttr("disabled");
});
.submitBtn:disabled {
opacity: 0.5;
}
I want to keep my scroll bar each time user send or receive a new message .
<script>
$ = jQuery;
var currentID = null;
var chatTimer = null;
var scrolled;
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#chatbox").show();
$('#messages').html(data);
$("div.area").show();
if(!scrolled){
$('#messages').scrollTop($('#messages')[0].scrollHeight);
scrolled=true;
}
}
});
}
$(document).ready(function() {
fetch_data();
$(document).on('click', '.first_name', function() {
scrolled=false;
currentID = $(this).data("id1");
fetch_chat();
});
$("#sub").click(function() {
var text = $("#text").val();
$.post('insert_chat.php', {
id: currentID,
msg: text
}, function(data) {
$("#messages").append(data);
$("#text").val('');
scrolled=false;
setInterval(function() {
fetch_chat();}, 500);
});
});
});
</script>
what I want is that whenever a user send or receive a new message the scroll bar should come to bottom but it should be scrollable according to user's desire. the setinterval() bring the scroll bar down whenever its scrolled up .
I want to call the fetch_chat() repeatedly but not the scroll bar ,I want it to be at bottom : at the beginning,after sending or receiving a new message and must be scrollable freely.
Basic logic of the following answer:
Compare the current chat HTML with the previous chat HTML, and if they are different, then scroll, if they are the same, then don't.
<script>
$ = jQuery;
var currentID = null,
chatTimer = null,
oldHtml = "";
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#chatbox").show();
$('#messages').html(data);
$("div.area").show();
if (oldHtml !== data) {
$('#messages').scrollTop($('#messages')[0].scrollHeight);
}
oldHtml = data;
}
});
}
$(document).ready(function() {
fetch_data();
$(document).on('click', '.first_name', function() {
currentID = $(this).data("id1");
fetch_chat();
});
$("#sub").click(function() {
var text = $("#text").val();
$.post('insert_chat.php', {
id: currentID,
msg: text
}, function(data) {
$("#messages").append(data);
$("#text").val('');
setInterval(fetch_chat, 500);
});
});
});
</script>
I have a chat app that show the previous messages by fetching the datas repeatedly using setInterval(). So as most of the chatting apps do, I also want to keep the scroll bar at the last message(i.e at the bottom). But here comes the problem ,as I am using setInterval to fetch The data repeatedly it also execute that code which keep the scroll bar at the bottom and hence it become impossible to scroll up to check the previous messages.
<script>
var currentID = null;
var chatTimer = null;
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
$("#messages").animate({ scrollTop: $(document).height() }, "fast");
}
});
}
$(document).ready(function() {
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>
plz tell me the correct way to do this.
Keep a variable outside the setInterval method that sets if it is the first time that the data is fetched. Scroll only the first time. Then, change it and it will never scroll again.
var currentID = null;
var chatTimer = null;
var firstTime = true;
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 (firstTime) {
firstTime = false;
$("#messages").animate({ scrollTop: $(document).height() }, "fast");
}
}
});
}
I'm trying to stop an active ajax request when I click on checkbox. i active an ajax which calls every second to a url, but when i uncheck the checkbox, I was trying to close the ajax request. I tried with listener.abort(); and it doesnt work and also i added xhr.abort() and nothing happend.
Any suggestion?
function listener() {
$.get('http://localhost:3000/get-value', function (dataf) {
if (dataf.result != "") {
$.ajax({
url: "http://localhost:8000/login",
data: { pId: dataf.result },
type: "POST",
success: function (result) {
if (result.name != "") {
$.get('http://localhost:3000/close-conn');
window.location.href = result.url;
}
}
});
}
setTimeout(listener, 1000);
});
}
function GetCheckStatus() {
var flag = chkAuto.GetValue();
if (flag) {
$.ajax({
url: "http://localhost:3000/open-conn",
type: "GET",
});
listener();
} else {
$.ajax({
url: "http://localhost:3000/close-conn",
type: "GET",
});
// Doesnt work
listener.abort();
}
}
You're calling the .abort() method on the function, not the actual request object. Try something like this instead.
Define variables for the $.get request and the setTimeout, then abort/clear them as needed.
var xhr, timeout;
function listener() {
xhr = $.get('http://localhost:3000/get-value', function (dataf) {
if (dataf.result != "") {
$.ajax({
url: "http://localhost:8000/login",
data: { pId: dataf.result },
type: "POST",
success: function (result) {
if (result.name != "") {
$.get('http://localhost:3000/close-conn');
window.location.href = result.url;
}
}
});
}
timeout = setTimeout(listener, 1000);
});
}
function GetCheckStatus() {
var flag = chkAuto.GetValue();
if (flag) {
$.ajax({
url: "http://localhost:3000/open-conn",
type: "GET",
});
listener();
} else {
$.ajax({
url: "http://localhost:3000/close-conn",
type: "GET",
});
//Cancel the current request and prevent the next one from being triggered
xhr.abort();
clearTimeout(timeout);
}
}
I want to stay on the same page if the login (data.login != 1) is incorrect , I tried with preventDefault but that's not working. Can anyone help me ?
$(document).on('submit', '#login', function(e) {
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: $(form).serialize(),
dataType: 'json',
success: function(data) {
if (data.login === 1) {
$.mobile.changePage("<?php echo site_url('redirect/overview'); ?>");
} else {
e.preventDefault();
}
}
});
});
The page will submit before the result of ajax call is being received in success as you have asyn call, You can e.preventDefault() before ajax call and call submit on success.
$(document).on('submit', '#login', function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: $(form).serialize(),
dataType: 'json',
success: function(data) {
if (data.login === 1) {
$.mobile.changePage("<?php echo site_url('redirect/overview'); ?>");
}
else {
$('#submitButtonId')[0].submit();
}
}
});
});