sheltermanager / asm3

Animal Shelter Manager
GNU General Public License v3.0
105 stars 65 forks source link

service: online_form_js to embed online forms in the current page #1447

Open bobintetley opened 4 months ago

bobintetley commented 4 months ago

As an alternative to online_form_html, have an online_form_js method. This returns javascript code that injects the form (as generated by onlineform.py/get_onlineform_html) into the current page at a provided div, a little like adoptable_js.

It would still need to add script tags for jquery and onlineform_extra.js for validation. adoptable_js never used jquery for that reason. Could investigate how hard it would be to write jquery out of onlineform_extra.js but I suspect it might be difficult.

Unless we're going to pull in jQuery UI as well, the signature widgets and multiselect lookup aren't going to work with this new method. That may be acceptable to some people.

bobintetley commented 4 months ago

The page would have to completely provide its own styles as well, so it would be worth including the documentation info on using display: block for td elements in order to stack, etc.

bobintetley commented 2 months ago

This is not quite as bad as it seems - the script returned by online_form_js should insert all of the necessary elements into the portion of the page, including jquery etc. It can contain what the page content normally returned by online_form_html as a string literal for injecting. This should mean we can reuse all of the same code.

bobintetley commented 2 months ago

use the modern await import syntax for including javascript files - it's available in pretty much all browsers except IE (which we don't care about). It means we can pull in jquery and jqueryui synchronously, but I am worried about conflicts as jquery is so ubiquitous.

Could jquery be written out of onlineform_extra.js ? Or perhaps we declare our own $ function for DOM manipulation using standard js functions querySelector/querySelectorAll instead of jquery? (make the datepicker fields use html5 date type instead of the jqueryui datepicker, but we're kind of screwed on the multiselect dropdown widget)

At least one of our customers is using pym.js, which seems to solve most of the problems of iframes.

bobintetley commented 2 months ago

https://dev.to/rfornal/-replacing-jquery-with-vanilla-javascript-1k2g

bobintetley commented 2 months ago

Dynamic module import landed in Firefox 67+.

(async () => { await import('./synth/BubbleSynth.js') })()

With error handling:

(async () => { await import('./synth/BubbleSynth.js').catch((error) => console.log('Loading failed' + error)) })()