Greasy Fork is available in English.

Обсуждения » Разработка

Execute code if dynamic innerText equal to

§
Создано: 16.12.2020
Отредактировано: 16.12.2020

I have a page on which I want to replace all thumbnail links prefixes.
The page adds these thumbnails on the page in an unknown number of seconds (can be 5 or 30).
There is a progress bar and a progress percent number, I want to replace the links after the page finish adding all the thumbnails.
I have tried to set an interval to check when the progress percent gets to 100, but it doesn't do anything.
When I tried the function without the interval in Chrome console, it worked, but when I ran the script, it didn't.
My second problem is that when I try to replace my links prefixes. The first one is replaced as it should, but then the rest of the links are replaced with the first link completely, not only the prefix.


$(document).ready(function(){
var prog = document.getElementById('progress-percent').innerText;
setInterval(function() {
if (prog == "100") {
$(".item-thumbnail").html( $(".item-thumbnail").html().replace( "http://cloud.mywebsite.com", "https://mywebsite.akamaihd.net" ) );
}
}, 1000);
});

hacker09Мод
§
Создано: 17.12.2020
Отредактировано: 17.12.2020

You could try to use the arrive library, and wait for the elements to start to appear, then use your timeout, if they usually are all done and displayed after the almost exact timing.

You could also use while, check for when the body/element doesn't display the text 100%,then when 100% is displayed do something,like run the script you posted here.

If you don't share the website here nobody can help you.

If the number of elements/thumbnails displayed after 100% is always the same you could use while,or setinterval to check the page until all the elements are displayed

You could try to use the arrive library, and wait for the elements to start to appear, then use your timeout, if they usually are all done and displayed after the almost exact timing.

You could also use while, check for when the body/element doesn't display the text 100%,then when 100% is displayed do something,like run the script you posted here.

If you don't share the website here nobody can help you.

If the number of elements/thumbnails displayed after 100% is always the same you could use while,or setinterval to check the page until all the elements are displayed

As I mentioned initially the time it takes is random, also the number of elements is different.

Using a while would have the same effect as the function I already showed (which is not working).

Unfortunately, I can't share the website since it's account based, but I don't think is necessary since I can use the element that gets my percentage, which looks like this <span id="progress-percent">100</span>

And if you want to see more of it :


Here it is
<div id="scan-progress-bar" style="">
	<div class="progress">
		<div class="progress-bar progress-bar-success" style="width: 4%;">
			<abbr title="Matches"><span id="pg-success">65</span></abbr>
		</div>
		<div class="progress-bar progress-bar-info" style="width: 96%;">
			<abbr title="No matches"><span id="pg-info">276</span></abbr>
		</div>
		<div class="progress-bar progress-bar-warning" style="width: 0%">
			<abbr title="Private"><span id="pg-warning">0</span></abbr>
		</div>
		<div class="progress-bar progress-bar-danger" style="width: 0%">
			<abbr title="Errors"><span id="pg-danger">0</span></abbr>
		</div>
	</div>
		<img id="loading-progress" src="res/img/ajax-loader.gif" style="margin-right: 6px; display: none;">Progress : <span id="progress-percent">100</span>% (<span id="progress-value">341</span>)
</div>


Use a setinterval of 0, add a if condition to check if the element
doesn't have the display none style, when the element doesn't have the display none css style it means that the of the thumbnails loaded, then inside the if condition add the function that you want to be executed when all of the thumbnails loaded.

Not being able to access the website doesn't help... This is all I could do for you.

Maybe if you share the whole website source code we could see how the loading process works

Use a setinterval of 0, add a if condition to check if the element
doesn't have the display none style, when the element doesn't have the display none css style it means that the of the thumbnails loaded, then inside the if condition add the function that you want to be executed when all of the thumbnails loaded.

Not being able to access the website doesn't help... This is all I could do for you.

Maybe if you share the whole website source code we could see how the loading process works

Please check your answer, I can barely understand anything.

I don't know what an image of a circle loading being hidden after it finished has anything to do with the code...

I have finally managed to make it work properly.

There were 2 major problems:
1. The interval was not assigned to a variable therefore you couldn't stop it.
2. The text of the element was called only once, therefore it was returning only the first value.

Here is the working code:


$(document).ready(function(){
  var id = setInterval(frame, 1000);
  function frame() {
    if (document.getElementById('progress-percent').innerText == 100) {
      clearInterval(id);
    } else {
       $(".item-thumbnail").html( $(".item-thumbnail").html().replace( "http://cloud.mywebsite.com", "https://mywebsite.akamaihd.net" ) );
    }
  }
});

@hacker09 As you can see, the solution had nothing to do with the "whole website source code".

hacker09Мод
§
Создано: 17.12.2020
Отредактировано: 17.12.2020

The image of a circle loading being hidden after it finished has everything to do with the code.
If you do what I said, you want to run some codes when the website finished loading everything right?
This image shows you when the website finished loading everything, so you could also make a script like I said, just keep checking or observe this image for when it appears or disappears, this is how you can know when the website finished loading everything... Then you could run the function you want

Your solution had everything to do with the whole website source code.
If you didn't see the website html how would you make the script you made?

If you didn't share the whole website source code with me I wouldn't be able to keep helping you at all

@hacker09 Checking if the image appears/disappears has the same effect as checking if the inner text of the span I posted earlier has reached to 100 or not.

My only problem was, how to run a function when a particular element is equal to something since it's dynamic. You don't need the whole website for this to figure out. You just need to check that element every x second until it meets your condition.

As you can see in my final code, I'm only using that element, nothing else from the website, that's how I made my script.

"Keep helping" presume the fact that you helped me before, which is not the case. But thanks for your time. Stay safe!

Ответить

Войдите, чтобы ответить.