CS Plugin Pages Load Everytime not from Cache?

[roaku 795]

6 minutes ago, mickle026 said:

I might have missed the meaning of this in your earlier explanation, trying it now

        function (loading) {
            return function (page) {

                var pluginUniqueId = "B19C4634-2C02-4DD9-8579-F950961EB219";

                page.addEventListener('viewshow',
                    () => {
                            ApiClient.getJSON(ApiClient.getUrl('CPP/MainHeader.html/LoadHTML')).then(response => {
                            var dat = response;
                            page.getElementById("header").innerHTML = dat.Text;
                            console.log(dat.Text);
                        }).catch(e => {
                            console.log(e);
                        });
                    }
                );
            }

        }

page.getElementById("header").innerHTML = dat.Text; - doesn't update anything, its like the element header cannot be found within the page array

document.getElementById("header").innerHTML = dat.Text; - document updates the label 1 in 3 times

view doesn't exist

 

This is still lost on me - lol !  I'll get there though the more i do the more will sink into this brainy thing of mine....

 

Try:

        function (loading) {
            return function (page) {

                var pluginUniqueId = "B19C4634-2C02-4DD9-8579-F950961EB219";
                //Assign outside of eventlistener scope
                let headerElement = page.getElementById("header");
                page.addEventListener('viewshow',
                    () => {
                            ApiClient.getJSON(ApiClient.getUrl('CPP/MainHeader.html/LoadHTML')).then(response => {
                            var dat = response;
                            headerElement.innerHTML = dat.Text;
                            console.log(dat.Text);
                        }).catch(e => {
                            console.log(e);
                        });
                    }
                );
            }

        }

 

[roaku 795]

@mickle026

I took a look at my code, and I'm not using getElementById *anywhere*. I'm using page.querySelector("#IDGoesHere") everywhere.

That probably means you need to switch to querySelector too, because I normally use getElementById in my javascript, so I'd only be using something different if Emby required me to.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

So, I think it's *both* that you need to select through page *and* that you need to use querySelector instead of getElementById.

Hopefully, that takes care of it.

[Luke 37066]

Also don't use the domcontentloaded event. Use the emby provided events related to the current view. 

[mickle026 400]

@roakuI tried your code and it caused the page to load ontop of other pages, the image data did not load either

However, A Massive THANK YOU!!!

You have pointed me in the right direction

 

        function (loading) {
            return function (page) {

                var pluginUniqueId = "B19C4634-2C02-4DD9-8579-F950961EB219";

                page.addEventListener('viewshow',
                    () => {

                        let headerElement = page.querySelector("#header");

                        ApiClient.getJSON(ApiClient.getUrl('CPP/MainHeader.html/LoadHTML')).then(response => {
                            var dat = response;
                            headerElement.innerHTML = dat.Text;

                            console.log(dat.Text);
                        }).catch(e => {
                            console.log(e);
                        });

                        // rest of page javascript
                    }
                );
            }
        }

A slight modification and its now working on every page view !!!

I cannot believe how much of a headache this was !!!

 

Thank you

Thank you

Thank you !!!

Edited September 19, 2022 by mickle026

[chef 3745]

24 minutes ago, Luke said:

Also don't use the domcontentloaded event. Use the emby provided events related to the current view. 

Yeah, that was a hail Mary... No need for that.

[mickle026 400]

OMG!

The images are now loading fine and everytime, but my collpasbile accordian html which is loaded in the same way from a file is now not working everytime!

[chef 3745]

19 hours ago, chef said:

Is all your code inside that API promise callback?

Don't use document.getElementById

Instead use:

page.getElementById

 

That way you are not querying the entire document.

It might just be that.

 

Oh my gosh... 

Edited September 19, 2022 by chef

[chef 3745]

2 minutes ago, mickle026 said:

OMG!

The images are now loading fine and everytime, but my collpasbile accordian html which is loaded in the same way from a file is now not working everytime!

Make sure you are targeting the element correctly when you are querying the view.

It is most likely the issue. 

Especially if you query an element, and then later do another query on that element to find a child. If that makes sense. 

[mickle026 400]

12 minutes ago, chef said:

Make sure you are targeting the element correctly when you are querying the view.

It is most likely the issue. 

Especially if you query an element, and then later do another query on that element to find a child. If that makes sense. 

Its not misbehaving in the same way, just to add to the issue !

If i page refresh, it works everytime

If i click to go off the page its working 2 times in every 3.  So its a similar problem, but its working 2 of the 3 times .. ffs! (as opposed to 1 in every 3)

Its the 3rd instance its not working in, however it is loading!

The according is loading everytime, like the images, just not working in the 3rd page instance. (expanding when i click it)

Im going for a cuppa, jeez no wonder developers are stress heads!

Edited September 19, 2022 by mickle026

[mickle026 400]

My accordian code, so to be clear the accorian is loading and showing in a collapsed state, its the expand thats not working in the 3rd page instance.

	<style>
	.hidecontent {
    	display: none;
	}
	
	#myaccordion label {
		box-shadow:0 0 20px #d4d4d4;
		display: block;    
		padding: 8px 22px;
		margin: 20px 0px 1px 0px;
		cursor: pointer;
		background: #5f75a4;
		color: #FFF;
		transition: ease .5s;
	}
	#myaccordion label:hover {
		background: #5f75ff;
	}
	.content {
		box-shadow:0 0 20px #d4d4d4;
		background: #ffff;
		padding: 10px 25px;
		border: 1px solid #d4d4d4;
		margin: -1 0 0 0;
	}
	#myaccordion input:checked + label + .content {
		display: block;
		webkit-animation: fadeIn 0.5s ease-out;
		-moz-animation: fadeIn 0.5s ease-out;
		-o-animation: fadeIn 0.5s ease-out;
		animation: fadeIn 0.5s ease-out;
	}
	@-webkit-keyframes fadeIn {
		0% {
			display: none;
			opacity: 0;
		}
		1% {
			display: block;
			opacity: 0;
		}
		100% {
			display: block;
			opacity: 1;
		}
	}
	</style>

	<div id="myaccordion">
	<input type="checkbox" id="accordion2" class="hidecontent"/>
	<label for="accordion2">Extra Information +</label>
	<div class="content hidecontent">
      
  <p>
  
  content here
  
  </p>
</div>

 

Its greyed out in the inspector, so the input (essentially a styled checkbox) is unavaliable.

This is similar behaviour to before with the images

 

[roaku 795]

2 minutes ago, mickle026 said:

My accordian code, so to be clear the accorian is loading and showing in a collapsed state, its the expand thats not working in the 3rd page instance.

	<style>
	.hidecontent {
    	display: none;
	}
	
	#myaccordion label {
		box-shadow:0 0 20px #d4d4d4;
		display: block;    
		padding: 8px 22px;
		margin: 20px 0px 1px 0px;
		cursor: pointer;
		background: #5f75a4;
		color: #FFF;
		transition: ease .5s;
	}
	#myaccordion label:hover {
		background: #5f75ff;
	}
	.content {
		box-shadow:0 0 20px #d4d4d4;
		background: #ffff;
		padding: 10px 25px;
		border: 1px solid #d4d4d4;
		margin: -1 0 0 0;
	}
	#myaccordion input:checked + label + .content {
		display: block;
		webkit-animation: fadeIn 0.5s ease-out;
		-moz-animation: fadeIn 0.5s ease-out;
		-o-animation: fadeIn 0.5s ease-out;
		animation: fadeIn 0.5s ease-out;
	}
	@-webkit-keyframes fadeIn {
		0% {
			display: none;
			opacity: 0;
		}
		1% {
			display: block;
			opacity: 0;
		}
		100% {
			display: block;
			opacity: 1;
		}
	}
	</style>

	<div id="myaccordion">
	<input type="checkbox" id="accordion2" class="hidecontent"/>
	<label for="accordion2">Extra Information +</label>
	<div class="content hidecontent">
      
  <p>
  
  content here
  
  </p>
</div>

 

Its greyed out in the inspector, so the input (essentially a styled checkbox) is unavaliable.

This is similar behaviour to before with the images

 

You're missing a closing div in this example html.

[mickle026 400]

The closing div doesn't fix the issue for the 3rd page instance, however now the images and html are loading from external files, I'll find a workaround that works eventually.  Probably using a button to fire an API call to replace a div with response text/html.

 

Thanks for your help @Luke,@roaku and @chef it is appreciated.

[Luke 37066]

22 minutes ago, mickle026 said:

The closing div doesn't fix the issue for the 3rd page instance, however now the images and html are loading from external files, I'll find a workaround that works eventually.  Probably using a button to fire an API call to replace a div with response text/html.

 

That sounds like a good approach.