Replace element after amount of page refreshes - javascript

Today, I was thinking if a javascript is possible to replace an element after refreshing the page 10 times specifically. I would really need this to replace an element after amount of page refreshes to make it static. I was trying to code it but all, I coded so far is to replace it after clicking on the element 3 times. And localStorage logs it and creates a key so the webserver remembers the change. All, I want is the element to replace its code with urls code after 10 refreshes on the page.
var count = parseInt(localStorage.getItem("count"), 10) || 0;
function loadMyPage() {
if (count >= 3)
$("#id-2").load("yoinkexecutor2.html");
}
}
$(document).ready( function () {
loadMyPage();
$("#id-2").on("click", function() {
localStorage.setItem("count", count += 1);
loadMyPage();
});
});

Ok, I updated the fiddle to work when the fiddle is reloaded. Don't worry too much about my mockHtmlReq function as it's just to mock a request for HTML content, similar to .load().
The only thing I changed was inside the $(document).ready()
$(document).ready( function () {
loadMyPage();
localStorage.setItem("count", count += 1);
});
Basically what happens is everytime the page reloads we are just incrementing up our count value stored in localStorage.

Related

Jquery loop while class does not exist

I am trying to use jquery to go though each page of the website and scrape data from each page. When a user clicks to new page button and once the page is loaded the value of current page number is set to "". So I am trying to use that as an indicator of when the page has finished loading
So I tried doing something like this, so that each loop waits until the page is fully loaded .
let totalNumberOfPages = -1;
$(".pagination .pg").each(function(data) {
totalNumberOfPages++;
});
for (let i = 1; i <= totalNumberOfPages; i++) {
$(".goto-page-input").val(i);
$(".gotosubmit").click();
// Wait until page loads
while ($(".goto-page-input").val() != "") {
// Loading
}
console.log(`Getting data of page ` + i);
}
The outer loop is to go though each page number buttons. However, this code does not work because it creates an infinite while loop. The while loop never ends because I beleive that it blocks the code and the code that is supposed to set the value of the page number to "" never fires. I am not sure how to solve this issue.
What you're looking for is an event handler for the change event see example below. Do note the change event will be fired on loss of focus.
(async () =>
{
document.querySelector(".goto-page-input")
.addEventListener("change", evt =>
{
console.log(evt.target.value);
if (evt.target.value === "")
{
// LOGIC GOES HERE
console.log('Logic is happening');
}
}, true);
})();
<input type="number" placeholder="Page" value="" class="goto-page-input" />
You could use
$(window).load(() => {
console.log(“Getting data of page “ + i);
});
This will execute the callback function as soon as the window loads.
See docs: https://api.jquery.com/load/

Detect div change after page refresh javascript

I have a page that displays a table with numbers. These are the prices my partner sees in the store. This page is specially made for him.
Prices change often. I enter prices in WordPress. I created Custom Post Type and a simple form to enter these numbers. One price = one custom field. The number of fields is around 30.
And it works great. But I need to detect the price change.
I would like the site for my partner clearly show the price change.
The ideal situation is when the DIV with new price has a changed color, and next to it appears a button to reset its color.
Such a mechanism will allow you to quickly find out about price changes.
This page is refreshed every 10 seconds.
I know the basics of JS, but I do not know how to do it. I suspect you will need to use SessionStorage.
Can anyone give me directions or paste a link to similar solution?
I have a lot of divs such as:
<div id="price1">[types field='price1'][/types]</div>
and JS:
setTimeout(function(){
window.location.reload(1);
}, 10000);
var price1 = document.getElementById('price1').textContent;
sessionStorage.setItem("price1-box", "price1");
var handle_storage = function () {
console.log('change in storage! new' + price1);
};
window.addEventListener("storage", handle_storage, false);
I made o solution. Maybe it will be useful to someone else.
<div id="eur-k">123</div>
window.onload = function() {
setTimeout(function(){
window.location.reload(1);
}, 30000);
// define div to add or remove alert
var eurkDiv = document.getElementById('eur-k');
// store current content in a variable
var eurk = eurkDiv.textContent;
// compare local storage with current content to make alarm
if (localStorage.getItem('eurkLoc') != eurk) {
eurkDiv.classList.add("active");
eurkDiv.innerHTML = eurk + "<button type=\"button\" class=\"potwierdzenie\" onclick=\"resetFunction()\">OK</button>";
}
function resetFunction() {
eurkDiv.classList.remove("active");
eurkDiv.textContent = eurk;
localStorage.setItem('eurkLoc', eurk);
};
};

Refresh div during JQuery update

I have a html file with many div. Beside this I have a JQuery file too which run an AJAX request in every 30 seconds. In my JQuery If a condition met and the jQuery reloded 3 times I want to update my div-s. I tried to add a div, but it does not appear just when I reload my whole page. If I set to remove my div and not add, the JQuery removes my div, so it is very odd for me, because just the .add or .append or .html do not working. furthermore I set a class with invisibility too, and I also set that when the condition met the jQuery file remove the invisibility class, but the div do not want to appear. I am trying to create a sample code.
My html
<div class="row">
<div id="myclass" class= "invisible" >
<div <p> Please appear for me!<p></div>
</div>
</div>
My JQuery:
if (condition) {
$('#myclass').removeClass('invisible');
if (n >= 2) {
$('#myclass').addClass('invisible');
}
}
The main point is, If the conditions met the class not removes just When I reload my page. In the jQuery file the n is equal with the times when the AJAX reloaded with setInterval. My question is why my div not appear just when I reload my whole page? Also why remove without reload?
Thank you in advance the answers!
removeClass and addClass perfectly work. at first, you can check if you jQuery works, just try to write you script (with ".append",".html",".insertAfter") directly in browser console, else you can add some console.log in your code, when you change invisibility like:
console.log('removeClass');
$('#myclass').removeClass('invisible');
if (n >= 2) {
console.log('addClass');
$('#myclass').addClass('invisible');
}
for update some div content, you can use simple function for it. like -
call self page in get request, and replace div content.
function reloadMyDiv(selector){
var element = $(selector);
if(element.length===1){
$.get(window.location.href,{},function(response){
var new_page = $('<div></div>').append(response);
var new_element = new_page.find(selector);
if(new_element.length===1){
element.html( new_element.html() );
console.log('update');
}else{
console.log('need contains only one element, '+new_element.length+' found!');
}
});
}else{
console.log('need contains only one element, '+element.length+' found!')
}
};
and if you more _ not use your interval, is good practice for clear it.
var n = 0;
var myInterval = setInterval(function(){ myFunction() },30*1000);
function myFunction(){
n+=1;
//do, what you want to do
if(n>2){
clearInterval(myInterval);
}
}

javascript setInterval clear issue

I am facing one issue while using setInterval method.
When the jsp page is loaded at that time (onload), I have called one setInterval(function(),time) method. Following is the onload code of my jsp
var refreshLoop = 0;
var refreshFrequency = 900000;
$(window).load(function() {
startRefresh();
});
function startRefresh() {
refreshLoop = setInterval("refreshScreen()", refreshFrequency);
}
Now I have Drag and Drop functionality on this page which drag one row from div to another div. When I Drop my Row to another table that table got refresh. I had done ajax calling one drop happen to another div
Now What I want to do is when My drop id completed I want to clear this setInterval and make to default.
ex : I have set my setInterval timings 10 min on page load so every time it will load the page after 10 mins . Now once I had drag and drop it will start counting 10 mins once I drop my row to another div.
I had done this in JavaScript and ajax.
Please suggests something on this issues.
window.clearInterval(refreshLoop) whenever you wish to clear the interval.
//try this code
<script type="text/javascript">
var refreshLoop = '';
var refreshFrequency = 900000;
$(window).load(function() {
startRefresh();
});
function startRefresh() {
if(refreshLoop){
clearInterval(refreshLoop);
refreshLoop = '';
}
refreshLoop = setInterval("refreshScreen()", refreshFrequency);
}
</script>
When you want to clear the timer, use:
clearInterval(refreshLoop);
startRefresh();

Call a function only once

I've 3 divs (#Mask #Intro #Container) so if you click on Mask, Intro gets hidden and Container appears.
The problem is that I just want to load this only one time, not every time I refresh the page or anytime I click on the menu or a link, etc.
How can I do this?
This is the script I'm using for now:
$(document).ready(function(){
$("div#mask").click(function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});
Thank you!
You can try using a simple counter.
// count how many times click event is triggered
var eventsFired = 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
}
});
});
To persist this you will need to set a cookie. (e.g. $.cookie() if you use that plugin).
// example using $.cookie plugin
var eventsFired = ($.cookie('eventsFired') != null)
? $.cookie('eventsFired')
: 0;
$(document).ready(function(){
$("div#mask").click(function() {
if (eventsFired == 0) {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
eventsFired++; // <-- now equals 1, won't fire again until reload
$.cookie('eventsFired', eventsFired);
}
});
});
To delete the cookie later on:
$.cookie('eventsFired', null);
Just point to an empty function once it has been called.
var myFunc = function(){
myFunc = function(){}; // kill it
console.log('Done once!'); // your stuff here
};
Web pages are stateless in that they don't hold states between page refreshes. When you reload the page it has no clue what has happened in the past.
Cookies to the rescue! You can use Javascript (and jQuery has some nice plugins to make it easier) to store variables on the client's browser. Store a cookie when the mask is clicked, so that when the page is next loaded it never shows.
this code with will work perfect for you and it is the standard way provided by jquery to bind events that you want to execute only once
$(document).ready(function(){
$("div#mask").one('click', function() {
$("div#intro").fadeToggle('slow');
$("div#container").fadeToggle('slow');
$("div#mask").css("z-index", "-99");
});
});

Categories

Resources