Mod inside of mod is STILL not persistant

Questions
#1

Hey Tyler,

I am not sure if my yesterday’s Message got lost. ’
I might be posting this twice, I hope I don’t.

If this ticket is created twice , I am sorry for my duplicate :wink:

Okay:

On Pageload you will realize a Mod is loaded inside of another “parent”-Mod here:

https://skysails.info/marine_performance/news.html?artikel=MoneyOnTheTable

the parent mod is called rbada

the inherited mod is called raammd (see JS Section iin the parent mod)

The issue I am facing is the parent-Mod will sort of erase the inherited-Mod-content out of the DOM. The inherited Mod-content gets sort of “deleted”.

The inherited mod will be deleted at the very moment the NAV is used.

You can find the NAV at the bottom of the page. Click any other LI-Nav-Element and then click back to the NAV-Element called " YOU LEFT SOME MONEY ON THE TABLE" .
Again: this is the URL

https://skysails.info/marine_performance/news.html?artikel=MoneyOnTheTable

You will see the injected MOD has vanished out of that section.

Do you have any clue as to why this is happening?

https://anymod.com/projects/8P24PE/dashboard

#2

You could call a method each time the tab switches in the mod.

Here I’ve upgraded from the legacy Vue and defined injectForm and setActiveIndex:

I believe this will work. I changed the HTML, JS, and the version of Vue in the JS Assets.

#3

I cloned the latest mod version of yours and integrated it here :

https://skysails.info/marine_performance/news.html?artikel=MoneyOnTheTable

It does not work yet.

I looked into the new code and went through some realisation process :wink:

As it seems the injected Content gets lost once I click any NAV element. So the best solution would be to make sure the content does not get lost in the first place. But I dont know how to do that. At first I thought the root issue was caused inside of this line:

$(“div.replaceThis”).replaceWith( " < div id=anymod-raammd> " )

I realized the jQuery is searching for a class Element to replace. So I altered the code in such a way that the newly injected Element also has that class element again. Like so:

$(“div.replaceThis”).replaceWith( " < div id=anymod-raammd class=replaceThis>" )

Your attempt was to re-inject the anymod-content anew each time the NAV is clicked.

But I must admit this did not solve the riddle yet. But at least it made me understand the core issue a bit better.

The Mods-Javascript-Section seems to be run again each time any LI-Nav-Element is clicked? That seems to cause the issue with the injectForm() Function beeing run a second time unwantedly, I suppose. And running the function a second time caused the core issue, I supposed (wrongfully at the beginning).

So now I belive all it takes to solve the issue is to ensure the injection will take place only once.

Okay, I did even some more research and found out the situation is different .

Here we go: My assumption was wrong. What seems to REALLY happen here is that the injection of the entire HTML inside of our "parent"Mod takes place each time any nav-li element is clicked.

Let me illustrate this with a screenshot: (see below)

While the pageload happens for the first time, the Mods-JavaScript-section is Run succesfully, thus the desired replacement takes place.

But the FOLLOWING content will get loaded again!

(see screenshot!)

Thus , the html is rendered anew. But as it seems, the JS in the JS-Panel is not run again. Therefore neither the jquery function nor the Anymod.render() will be triggered again.

######################

######################

image
image.png3142×1598 561 KB

This content is loaded anew each time a nav-li element is clicked!!! I am suprized about that. Inside I dropped the internal Mod and loaded it via the JS-section succesfully on pageload.

Inside of this content we have our MOD , and we call it via Anymod.render() onpageload !!

Now: if any Nav-li element is clicked that entire content is rendered again BUT our JS is NOT run again. That is causing the issue here.

While the item(0).tabContent will get re-rendered = Neither the jquery replacement function nor the Anymod.render() will get re-triggered .

If the HTML is re-rendered on each LI-Elements click, then Anymod.render() must be run for a second time too.

Would it not be best if those LI Elements did not re-render the repeat-items at all?

Thank you very much.

I cloned Tylers result once over, and thus attach the latest version here.

This is the latest version of the page:

https://skysails.info/marine_performance/news.html?artikel=MoneyOnTheTable

#4

I created a test-Environment

http://skysails.info/marine_performance/mod_inside_mod.html

I found out the entire MOD-content is RE-RENDERED eac time any NAV-LI-Element is clicked. I cannot see why this should be nessesary, but that is what is happening inside of this Mod.

Okay, so in order to fix my issue, I merely had to apply a little workaround: I added a settimeout to make sure the replacement of my “MOD INSIDE OF THE MOD” will take place each time again after any LI-Element was clicked, AND ALSO I made sure it happens only after the rendering had finished.

I am aware settimeout is not a very elegant way to solve this issue. But at least I grasped what is happening here and where the issue actually came from.

If you can improove on the JS, I will be grateful for any advice you might be able to provide.

Also: IF the re-rendering (after each click on any LI Element) is NOT the desired behaviour for this mod, you might track this behaviour back to the original Template-Mod and improove that mod. For future-users :wink: .

1 Like
#5

Nice work! Vue has a built-in method called nextTick that accomplishes the same thing as the setTimeout, but without the delay. I updated the demo mod:

Docs on nextTick

1 Like
#6

This is now Live on https://skysails.info/marine_performance/index.html?artikel=MVP_Ready
it sometimes works and then again sometimes it does not. Or it happens to render some 80 seconds later for unknown reasons .

					Vue.nextTick(() => { 
			  console.log('replacement and AnyMod Re-Render is called'); 
			$("div.replaceThis").replaceWith( "<div id=anymod-raammd  class=replaceThis></div>" );  
						Anymod.render(); 
		})

image
image.png2594×1920 802 KB

#7

Okay, after some further investigation, I suspect the issue is reated to the fact that the page is loaded inside of an iframe:

https://skysails.info/marine_performance/news.html?artikel=MVP_Ready

When this page is called on its own, the “Mod inside of a Mod” can be rendered and displayed pretty stable.

But when called from the parent document (same origin!) the Nested mod will not render. Or it will render very very late .

https://skysails.info/marine_performance/index.html?artikel=MVP_Ready

#8

Hi Stefan, I don’t know if you solved it but we’re having difficulty replicating. Nothing seems to be slow or missing, but we’re not sure what to look for. Let us know if it’s still an issue.

#9

Hi Tyler,

I remained unable to get this going.

The nested mod remained an obstacle as long as it is injected into the HTML-Field-Content. I gave up on this.

Instead I added that nested-Mod directly into the HTML-section and run anymod.render() only once.

I nivested some time. But it was probably not worth the time. As usual, this only becomes apparent in hindsight.

1 Like