TB.render component confusion

App Development
1

This might be better as a support ticket, but the response seems pretty good here from @Chem & @moe

On my parent page I have a table with an edit link that is set to open in a pop-up modal.
In the javascript on the edit page I am using TB.render on component 3 (this is the edit form component). This form has the submit rule set to “show a confirmation message” so that the users can do additional work within the pop-up before closing. Everything in the TB.render function block works fine when the window is first opened, but after the form is submitted I get some unexpected behavior. I did some digging it looks like the TB.render is pulling data from component 3 on the parent page (which is a detail component vs a form). Screen shots from logging 'data' are below:

After pop-up opens:

Screen Shot 2022-11-04 at 1.26.16 PM
Screen Shot 2022-11-04 at 1.26.16 PM927×103 20.6 KB

After the form is submitted:

Screen Shot 2022-11-04 at 1.26.22 PM
Screen Shot 2022-11-04 at 1.26.22 PM932×106 21.1 KB

This appears to be a bug, but I’m wondering is there is someway to be more specific with TB.render than just the component number?

2

Hey @Marty

It might be helpful to see the page structure you’re working with here but to clarify, you’re saying that after a form (component_3) is submitted, the javascript API then outputs the data from a detail component on the edit page?

What is the end goal you are looking to achieve by using the javascript API?

3

Hi @tim.young

Agree, its hard to explain this one.

Both my parent page and child page have a component numbered 3.
On the child have I have the following javascript API

TB.render('component_3', function(data) {
        console.log(data);

When the pop-up first loads, the correct data is shown (component 3, the form on the child page)
When the form is submitted, the pop-up stays open (due to the submit rule) but the data logged is from the component 3 on the parent page (which happens to be a detail component)

I’m only logging the data on the child page. I have a number of additional tasks running under the javascript API on both pages such as setting class visibility, input masking, and injecting a URL into an iframe.

4

Understood, thank you for clarifying.

This is indeed an issue that can be corrected. I’ll speak to our engineers about this issue and let you know :smile:

In the meantime, the only workaround I have to suggest here is to delete one of the components that share the same ID, and recreate it. Once the components have different IDs, you should not see this issue anymore.

5

OK, as expected after replacing the component 3 on the parent page I’m no longer receiving the data from the parent page. The bad news is the TB.render event doesn’t fire after the form submission. Is there a way to get the updated data after the form is submitted?

1 Like