Server connect refreshing too often

Wappler General Bugs
22

I think this is the narrowest view of the issue .

This is a fresh page load, followed by a browser goto (starts at “Event pushstate triggered browser…”)

The trouble seems to lie in the query update to null, which then reverts to its proper values triggering the sc update.

app.js:79 query was updated {challenge_slug: 'should-be', project_id: '1016', project_document_id: '55'}
appConnect.js:320 update components Set(154) {'query', 'app', 'running', 'flow_page_load', 'log', …}
appConnect.js:320 update components Set(15) {'value', 'hidden_project_id', 'hidden_project_status', 'selectedIndex', 'select_project', …}
appConnect.js:320 update components Set(11) {'state', 'get_projects', 'get_workspace_posts', 'get_all_hashtags', 'get_globals', …}
appConnect.js:320 update components Set(4) {'id', 'socket_messaging', 'connected', 'disconnected'}
appConnect.js:320 update components Set(3) {'running', 'flow_page_load', 'data'}
appConnect.js:320 update components Set(2) {'state', 'log_page_view'}
appConnect.js:320 update components Set(8) {'state', 'get_globals', 'downloadProgress', 'sa', 'headers', …}
appConnect.js:320 update components Set(7) {'state', 'get_globals', 'downloadProgress', 'headers', 'paging', …}
appConnect.js:320 update components Set(4) {'status', 'get_workspace_posts', 'data', 'state'}
appConnect.js:320 update components Set(4) {'status', 'get_all_hashtags', 'data', 'state'}
appConnect.js:320 update components Set(8) {'state', 'get_user_organisations', 'downloadProgress', 'headers', 'paging', …}
appConnect.js:320 update components Set(4) {'state', 'get_users', 'downloadProgress', 'current_user'}
appConnect.js:320 update components Set(10) {'state', 'get_users', 'downloadProgress', 'headers', 'paging', …}
appConnect.js:320 update components Set(13) {'btn10', 'conditional1', 'btn3', 'btn4', 'button', …}
appConnect.js:320 update components Set(4) {'link', 'repeat', 'repeat1', 'items'}
appConnect.js:320 update components Set(8) {'status', 'get_challenges', 'data', 'state', 'log_page_view', …}
appConnect.js:320 update components Set(4) {'items', 'challenges_published', 'data', 'challenges_all'}
appConnect.js:320 update components Set(8) {'data', 'current_challenge', 'state', 'get_projects', 'downloadProgress', …}
appConnect.js:320 update components Set(18) {'select_role', 'conditional3', 'conditional5', '*', 'input1', …}
appConnect.js:320 update components Set(13) {'comment_edit_mode', 'repeat', 'each_project_document_comment', 'dropdown1b', 'link', …}
browser.js:173 Event pushstate triggered browser component update
browser.js:173 Event pushstate triggered browser component update
appConnect.js:320 update components Set(5) {'location', 'browser1', 'scrollY', 'document', '*'}
app.js:79 query was updated {}
appConnect.js:320 update components Set(11) {'query', 'app', 'data', 'current_project', 'current_project_document', …}
appConnect.js:320 update components Set(8) {'select_role', 'conditional3', 'conditional5', 'input1', 'conditional2', …}
appConnect.js:320 update components Set(38) {'value', 'hidden_challenge_id_2', 'input_project_title', 'input_project_summary', 'hidden_challenge_id_3', …}
app.js:79 query was updated {challenge_slug: 'should-be', project_id: '1016'}
appConnect.js:320 update components Set(2) {'query', 'app'}
appConnect.js:320 update components Set(5) {'data', 'current_project', 'current_challenge', 'value', 'hidden_project_id'}
appConnect.js:320 update components Set(7) {'select_role', 'conditional3', 'conditional5', '*', 'input1', …}
appConnect.js:320 update components Set(18) {'status', 'get_projects', 'headers', 'state', 'get_project_document_stats', …}
appConnect.js:320 update components Set(4) {'status', 'get_project_document_stats', 'data', 'state'}
appConnect.js:320 update components Set(5) {'state', 'get_projects', 'downloadProgress', 'headers', 'status'}
23

I’ve updated the browser to have a debounce on the event handlers to prevent it from being called to fast and often. Also updated the logging in App Connect to get extra information about the url parsing.

dmxAppConnect.zip (26.7 KB)
dmxBrowser.zip (1.6 KB)

24 
app.js:69 route: /challenge/:challenge_slug/p/:project_id/d/:project_document_id
app.js:70 pathname: /challenge/should-be/p/1016/d/55
app.js:74 query was updated {challenge_slug: 'should-be', project_id: '1016', project_document_id: '55'}
browser.js:174 Event pushstate triggered browser component update
app.js:69 route: /challenge/:challenge_slug/p/:project_id/d/:project_document_id
app.js:70 pathname: /challenge/should-be/p/1016/d
app.js:74 query was updated {}
app.js:69 route: /challenge/:challenge_slug/p/:project_id/d
app.js:70 pathname: /challenge/should-be/p/1016/d
app.js:74 query was updated {challenge_slug: 'should-be', project_id: '1016'}
25

It seems that it is the route meta tag didn’t match the pathname and that causes the query to be empty. The query uses the router meta tag for parsing the url and after navigation it was still having the old tag in the dom since the content wasn’t loaded yet.

You can try following on the server connect:

dmx-param:challenge_slug="browser1.location.pathparts[0] == 'challenge' ? browser1.location.pathparts[1] : ''"
26

Okay, I’ll try that a bit later. However, this also happens with Back button of browser, so would this still be the case?

27

The back button has the same issue, the problem is the route meta tag. After navigating the content is loaded via ajax from the server and then updated in the dom. So there is a short period after navigation that it still has the old html while already having the updated url, that is when it goes wrong due to the wrong route meta tag that was being used for parsing the url.

28

Got it.

Your change to the dmx-param appears to be solving the issue. I’ll keep testing. I’m assuming I can revert to the original dmxBrowser and dmxAppConnect files?

Thanks for all the time on this Patrick.

29

Yes, the updated files do not fix the problem.