Some dynamic content no longer working in v6.5.0

Are you sure you uploaded all the latest js files from the dmxAppConnect folder to your server, after they’ve been updated locally?

Well seems you have quite a few errors that needs to be solved first.

The event calendar was also updated a while ago with new includes, so make sure all files are uploaded as it seems you might be missing some.

Also you seem to have some illegal expressions as well.

I’m working locally so there shouldn’t be anything to upload if everything updated when I updated Wappler, correct?
Is there a way to force everything to update? Would downloading Wappler and installing over it help?

No.

Yes, set the channel to stable, click change channel, then enable Force Update - App Connect Components:

Screenshot 2024-04-18 at 16.40.03

And when previewing the page in your browser don’t forget to clear the cache.

I don’t seem to have that option, unless I’m looking in the wrong place.

You need to open the project assets updater …

Ah yea, forgot about that extension updater. Unfortunately that didn’t fix it. I also fixed all the console errors (except the .map ones) and that didn’t help either. :pensive:

Ok, it definitely appears to be an AppConnect 2 issue. Earlier when I switched from Stable to AppConnect 1 channel, I did it from the “Options” menu and that didn’t work. I just swtiched it from the Extensions Update Channel and now everything works as it should.

So when on App Connect 2 stable and you have this issue, there are no errors in the console at all?

When on App Connect 2 Stable, these are the only errors left (after I fixed the other ones I sent earlier) and it does not work as expected.

When on App Connect 1 these are the errors that appear, but everything works as expected.

If I take the code that is stored in the database and place it directly on the page, it renders fine in App Connect 2, but it doesn’t render correctly in App Connect 2 if pulled from the database in a query and rendered via dmx-html="" or using {{value}}

Thanks again for working on this with me.

Can you please explain more detailed what exactly are you doing? Code stored in the database? Please provide more details.

I’m basically storing html along with bindings in a column in a database table called ‘content’ in a column called ‘text_html’. Each page can have multiple content connected to it. So when the page loads, I get the content that is for that page in a server connect query, then I have a repeat that renders out the content.

Here is the code for the repeat.

<div dmx-repeat:repeatpagecontent="scAppSettings.data.qCurrentPage.content">

  <div dmx-html="text_html" dmx-bind:class="container_class" dmx-style:background-color.important="container_bg_color" dmx-style:color.important="container_text_color" dmx-style:background-image.important="bg_image?'url(/assets/img/'+scAppSettings.data.qAppSettings.id+'/content/'+bg_image+')':'none'" dmx-style:min-height.important="min_height" dmx-style:min-height.important="min_width"></div>

</div>

Here is an example of the copyright content stored in the database that is rendered using the query and the repeat above.

<span class="navbar-text p-2 d-none d-sm-block d-md-block small text-center">© Copyright {{varCurrentYear.value}} | <a style="text-decoration:none;" target="_self" dmx-bind:href="scAppSettings.data.qAppSettings.home_page">{{varAppName.value}}</a></span>

This all gets rendered inside of dmx-view which is in my main.ejs layout.

<div is="dmx-view" id="content" dmx-style:--theme-primary.important="varPrimaryColor.value" dmx-style:--theme-menu-bg-color="varMainMenuBGColor.value" dmx-style:--theme-menu-text-color="varMainMenuTextColor.value">
    <%- await include(content, locals); %>
  </div>

All that above works in App Connect 1, but does not in App Connect 2

Hope this helps.

Thanks as always,
Twitch

Can you check in the network tab from devtools if all js files are downloaded successful and check the downloaded dmxAppConnect.js which version it is (you can view the response in when clicking on it within the network tab, check the header comment for the version number).

1 Like

From what I can tell all the js files are downloaded.

The dmxAppConnect.js version is

/*!
 App Connect
 Version: 2.0.0
 (c) 2024 Wappler.io
 @build 2024-04-16 12:46:52
 */

Not sure if this helps or not, but issues don’t seem to just be with rendering the bindings of data coming from the database. I just put my CMS in “Maintenance Mode” while using “Stable” channel and it doesn’t redirect to the maintenance page as it should when user is not logged in. If I switch to App Connect 1 channel, the maintenance mode redirects properly.

I also viewed the count of js files that are downloaded in the console for each channel and they both download the same number of files. So I think all the same js files are loading.

So if I understand correctly you set html using the dmx-html attribute and that html contains App Connect components and expressions. The content inserted with the dmx-html attribute is not being parsed by App Connect, don’t think it was in App Connect 1 as well. Do you know the App Connect version from before the update?

I didn’t look before the updates, but when I switch to App Connect 1 channel this is the version as I’m sure you already know haha.

/*!
 App Connect
 Version: 1.14.12
 (c) 2023 Wappler.io
 @build 2023-03-14 12:22:18
 */

And this version seems to parse it fine. The only difference is the channel cause I don’t do anything different with the code on the page. Without it parsing I wouldn’t have even attempted to build a CMS cause I like being able to put the dmx bindings in the saved content.

Here’s the page with App Connect 1 and parsing fine.

And here it is with Stable, look at the form and the copyright at the bottom. Also just noticed the menu is not showing properly on this version and that is not coming from the database, it’s in a repeat in the header html.

FYI 6.5.1 unfortunately didn’t fix any of the issues above…guess I’ll have to look deeper into my code and see if it’s a similar thing that @mebeingken mentioned in another post:

I’ll add that the process of moving to AC2 has a way of exposing poor coding practices (at least it did for me!)

Mostly, it will highlight timing issues.

Here is a very simple example:

Previous code that worked under AC1 but (properly) failed under AC2

dmx-on:click="each_meal_type.remove($index);meal_type_ids_to_delete.addUniq(meal_type_id)"
As you can see it is 2 actions that are fired off together immediately since they are not in a flow. It removes an item from a form repeat, and also adds the id of the removed item to an array.

However with the improvements in AC2, things move much faster. In this case, the id needed from the form repeat item, is now gone (removed on the first action) by the time it attempts to add it to the array on the second action.

The solution here is to use a flow which will first add the item to the array, and then remove from the form repeat.

dmx-on:click="run([{run:{outputType:'text',action:`meal_type_ids_to_delete.addUniq(meal_type_id)`}},{run:{outputType:'text',action:`each_meal_type.remove($index)`}}])"
Given that my app is probably 5 years old now, I found several patterns I used like this that must now be cleaned up.

I’ll also add that I have AC2 in production for the last week, and I really appreciate the speed improvements…they are noticeable if you have heavy client side processing.

Unfortunately your case is very different.

You are using the dmx-html attribute to inject a full blown html with components and such, which is not the best practice if this content is also generated by the user as it might present a security risk.

So a better way might be the use much more controlled layouts based and views and not just store and display any user generated layouts without sanitizing them.

This was also not supposed to work in AC1 but it seems like it was a bug that you have misused as a feature.