I am using the the following function to load content in a div and refresh the content in that div every 10 seconds:
$(function () {
var timer,
updateContent;
function resetTimer() {
if (timer) {
window.clearTimeout(timer);
}
timer = window.setTimeout(updateContent, 10000);
}
updateContent = function () {
resetTimer();
$.get('modules/b.php', function (data) {
$('#main').html(data);
});
};
updateContent();
$(document.body).on('mousemove keydown', resetTimer);
});
I have a contact form in the loaded content, that I, for obvious reasons, would like to exclude from the refresh. Is this possible, or is it otherwise possible to declare the divs that I would like to refresh?
1) You can save the values you need before the ajax call, and set them again after. 2) If this messes with the user cursor, you can use absolute positioning and not have the entry box be a descendant of #main. 3) Or the obvious way: you can restructure the call where you are not updating #main, but only what you need.
Other than that, there is not a way to magically exclude an item from the html overwrite.
Related
I have spend a lot of time think about this and tried different things now. I want to scrape a webpage with multiple pages but the page does not reload on page change. Instead, some container data is changed on each changed page. The most difficult thing to do is know when to click the next page button.
Someone might think that this is pretty easy and I thought the same and started off by doing:
$('.pagn a').each(function() {
console.log(`Loop counter`)
$(this).click()
//Code to scrape the new page
})
Now, the loop runs 13 times but only one page is changed. This is because the pagination itself is inside the container that reloads so all other button presses are basically ignored.
To tackle this I needed some kind of a check that makes sure that the new content has loaded before proceeding but if I try to do something like:
$('.pagn a').each(function() {
console.log(`Loop counter`)
while (someConditionToCheckIfPageLoaded) {
}
$(this).click()
//Code to scrape the new page
})
This would be an infinite loop because JavaScript is single threaded and the code to change the condition never fires.
I also tried this which I now know is incorrect.
The indicator for page being loaded is if the button URL matches the page URL.
$('.pagn a').each(function() {
let visitedURL = [];
if ($(this).attr('data-url')) {
let button = $(this)
buttonURL = "https://www.ebay.com/myb/PurchaseHistory#" + $(this).attr('data-url');
(function wait() {
button.click()
if (buttonURL == location.href && !visitedURL.includes(button.html())) {
console.log(button.html())
button.click()
visitedURL.push(button.html())
console.log(buttonURL);
console.log(location.href);
//Scrape page
} else {
setInterval(wait, 5000);
}
})();
}
})
This also only changes one page.
If someone has been able to scrape webpages with multiple pages with JavaScript please let me know how.
Edit1:
Also, I am not sure why this creates an infinite loop as well:
let glbElements = []
$('.pagn a').each(function() {
glbElements.push($(this))
})
for(let i = 0 ; i<glbElements.length; i++){
console.log(`Loop Counter`)
setTimeout(function(){
console.log(`Inside SetTimeout`)
glbElements[i].click()
glbElements.splice(i,1)
},2000)
}
Lopp Counter *5
Inside SetInterval -- Keeps printing
You can use the setTimeout() function to wait after a user clicks a button.
Like this:
<a href='newpage.html'><button id='click'>Click!</button</a>
$('#click').click(function() {
setTimeout(function() {
// code you want executed after page is loaded
}, 100);
});
In my Jquery datatable I'm programmatically navigating to the pages with setinverval function.
setInterval(function () {
table3.page('next').draw('page');
}, 5000)
This works fine but stops at last page. Once it reaches to the last page, I want it to go back to the first page and do the whole process again.
I guess I need to find out the count of pages then once it reaches that, go go page 1. But I have not have good luck on how to accomplish this.
this is what I came up with:
http://live.datatables.net/fobalaxe/1/edit
$(document).ready( function () {
var table = $('#example').DataTable({paging:true});
setInterval(function(){browse(table);} , 5000);
});
function browse(table){
if(table.page() >= table.page.info().pages - 1){
table.page('first').draw('page');
}
else {
table.page("next").draw('page');
}
}
I'm trying to play a sound every time a user gets a new notification. The way I am loading the notifications on my page is simple:
(function($)
{
$(document).ready(function()
{
var $container = $("#noti");
$container.load("notify.php");
var refreshId = setInterval(function()
{
$container.load('notify.php');
}, 1000);
});
})(jQuery);
This works by updating a div container with whatever number the PHP code sends out. it retries every second (probably not the most efficient way, but it works).
I have another piece of code that checks when the div content changes, then creates an alert box (which I will change to playing a sound when the script is done):
var myElement = document.getElementById('noti');
if(window.addEventListener) {
// Normal browsers
myElement.addEventListener('DOMSubtreeModified', contentChanged, false);
} else
if(window.attachEvent) {
// IE
myElement.attachEvent('DOMSubtreeModified', contentChanged);
}
function contentChanged() {
// this function will run each time the content of the DIV changes
alert("js is working");
}
This script works, however it also creates an alert or the first loading of the notifications. This is because it starts of as an empty div, then it loads the data, which sets off this alert script. The only way I could think about going round this is delaying the script from loading for a couple of seconds whilst the AJAX script does its business.
Does anyone know a way I could delay this second script from doing anything for the first few seconds after page load, or perhaps a better way about going round this?
Instead of doing that, use a custom event which you trigger when load finishes:
var refreshId = setInterval(reloadContainer, 1000)
function reloadContainer() {
$container.load('notify.php', function success() {
$container.trigger('loaded')
})
}
$(myElement).on('loaded', contentChanged)
I added some hide and slide functions to a website so that as each product attribute was selected the next one would slide out. This worked fine until the customer added additional attributes to SOME products. The additional attribute is causing me problems because i can't add a second slide function trigger without making it trigger two functions on these products.
The original code i used is
$('.wrapperAttribsOptions11').hide();
$('.sizeRadio').click(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});
The client then added an attribute id4 so i added
$('.wrapperAttribsOptions4').change(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});
But this means that on pages where BOTH attributes are in use option11 is sliding down when .sizeRadio is clicked and not when option4 is changed.
In short, is it possible to make it function so that if .wrapperAttribsOptions4 is present then
$('.sizeRadio').click(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});
is ignored.
I hope that's clear enough.
I resolved this by using
if ($('.wrapperAttribsOptions4').length != 0) {
so the whole code segment becomes
$('.wrapperAttribsOptions11').hide();
if ($('.wrapperAttribsOptions4').length != 0) {
$('.wrapperAttribsOptions4').change(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});
}else
$('.sizeRadio').click(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});
This script fills several tables with ajax queries if they are active, and cleans the inactive tables:
$(".my_button_tables").on("click", function(event) {
var thetable = $(event.target).parent().next("table");
if (thetable.prop('rows').length) thetable.empty();
else {
fill_ajax($("#id_study").val(), thetable); // Fill the table
};
});
I want to reload the active ajax queries every X seconds. I'm using setInterval but I have problems with the code. Any solution?
Ok, my inspiration came after asking the question. Before I was using setInterval inside the onclick function. Now I found a solution simply adding another script:
var table_refresher = setInterval( function() {
$(".my_button_tables").parent().next("table").each(function(){
if ($(this).prop('rows').length) fill_ajax($("#id_study").val(), $(this)); // Fill the table
});
}, 15000);