Hi,
Here is my page - Builder.io: Drag and drop page builder and CMS
I have particular logic in my custom js, and I need it to be executed immediately after page open and rerender the page once my state change. However it’s not happening.
Please look at partnersData property in state. I got it dynamically via custom js, but page does not rerender when it done.
Moreover in editing mode inside builder javascript simply not run unless I change custom js manually. I’m very confuse… Please help
@Jediinspace We do run JS on initial page load, and I took a look at your page and was able to confirm that is the case here as well. I have added a console.log in the custom JS window, you can see that console.log is indeed being logged to the console on first load, so I don’t think that is the issue here. That being said, there does seem to be some timing issues that are preventing the state from being correctly set on first load within the Editor.
First, the async/await pattern you used seemed to be getting hung up and taking awhile or timing out. I updated to use the Promise that is returned as part of the fetch API and am getting a much more consistent response, please check it out and see if that change works for you.
I will continue to investigate any issues on our end to see if there is something preventing the content from being available on first load within Editor. In the meantime, the good news is that:
Let me know if this all makes sense and is helpful!
Hi @TimG
Thank you for answering.
I have viewed your changes. So you are saying that this is ok? Editor does not show dynamic title properly and does not show fetched data (partnersData variable).
@Jediinspace definitely not, apologies if my previous answer was unclear in that regard…I have created an internal ticket to investigate why some data doesn’t seem to be available initially on page load within the editor and will be sure to get back to you with any updates.
That being said, it could potentially be a complex and involved investigation, so with my previous response I was hoping to provide a few work arounds in the short term to help get the page working. I took another look at the page and noticed a few issues that resulted in the ‘undefined’ title that I have tried to clean up.
Firstly, in the JS window, it looks like you had set insuranceType, currentInsurance, partners to const variables, which aren’t globally available.
const insuranceType = ...
const currentInsurance = ...
const partners = ...
Instead, you should set those to state so that those values will be accessible within the page.
state.insuranceType = ...
state.currentInsurance = ...
state.partners = ...
For the title text itself, the data binding was set to state.insuranceCategories.results.find(i => i.data.slug === state.insuranceType)); which actually returns an insuranceCategory object, not the name I think you wanted. I updated that binding to:
state.insuranceCategories.results.find(i => i.data.slug === state.insuranceType).data.content.find(i => i.lang === state.lang).name);
and it is now returning correctly and consistently.
Hopefully that helps! I recommend checking out further resources on advanced data fetching:
and adding custom code:
To see if there is further helpful info there. I will keep you updated on any info as we investigate why data is sometimes slow to load on initial page in the editor, but hopefully this gives you some places to go as you set up your pages.
Lastly, not sure if you saw my response about including referenced models in your state: Can't get reference field data in state - #5 by TimG but I would recommend trying to implement that as well, it may further reduce reliance on any client-side logic.
Let me know if you have any other questions, always happy to help!
Hi @TimG
I really appreciate your help. But I still have questions.
Let’s take the partners variable I can see it in console when preview open (btw why console inside editor does not show any logs?) so the fetching is fine. But I can’t see it in the state inspector and I can’t properly interact with it (In preview mode I see the repeating data).
I guess you will return about this case after investigation. Thank you in advance
@TimG I kindly ask you to help me with another thing.
I have created the page for testing reasons
I put simple structure in state and I want to be able to render data in loop and then inside each item render in loop inner data.
[
{
id: 1,
innerData: ['text1', 'text2', 'text3']
},
{
id: 2,
innerData: ['text2.1', 'text2.2', 'text2.3']
},
]
So I need to have 2 boxes with 3 times repeated text inside
How can I achieve this? I had no success with it.
Edit:
I did it adding “Item” to the end of variable to get concrete item, is this a pattern I can use?
@Jediinspace yes that is correct. Also if you are just accessing a set value from state, you should be able to just select it from the dropdown, like below:
Using the code window for a data binding (like in the case of the page title earlier on this post) should only be necessary if you doing some more complex manipulation or mapping to the data.
@TimG Let me clarify why I’m asking, when I choose binding there is no needed suggestions, I guess it must be, so I just assumed to add Item, could you please drop the link to the doc describing that?
@Jediinspace there are a number of pages that could be helpful, check out:
and especially this walkthrough, which I think will be particularly interesting for you :
