Unable to use django-autocomplete-light in forms loaded using a javascript load event

[bk-test]

I have a several django forms using dal which are loaded onto the page using a JavaScript load event. None of the autocomplete light boxes are on the page during initial page load. These select boxes never get initiated once loaded onto the page. I followed the instructions for dynamic objects, but the dal-init-function event never gets sent as dal does not appear to load.

Any ideas on how to manually initiate after they are loaded?

I'm using the latest dal 3.8.2 and jQuery 3.x

[brainthee]

I'm seeing this too - I'm able to get it working by manually firing .select2(... but I'm having to re-load all the attributes etc.

[jpic]

Is it possible to reproduce ? This surely is working fine in the test_project example outside the admin.

On Tue, Mar 9, 2021 at 12:17 AM Adrian Lewis [email protected] wrote:

I'm seeing this too - I'm able to get it working by manually firing .select2(... but I'm having to re-load all the attributes etc.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/yourlabs/django-autocomplete-light/issues/1221#issuecomment-793160254, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAXDLBVJNDTUQCRVLVPMGTTCVLH3ANCNFSM4YGLC74A .

-- ∞

[bk-test]

It’s specific to using JQuery.load() to load the form with the DAL widget. It should be able to be reproduced by creating another template to load the outside admin form example using jquery.load(). I can try it later today.

On Mar 9, 2021, at 03:10, jpic ∞ [email protected] wrote:

 Is it possible to reproduce ? This surely is working fine in the test_project example outside the admin.

On Tue, Mar 9, 2021 at 12:17 AM Adrian Lewis [email protected] wrote:

I'm seeing this too - I'm able to get it working by manually firing .select2(... but I'm having to re-load all the attributes etc.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/yourlabs/django-autocomplete-light/issues/1221#issuecomment-793160254, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAXDLBVJNDTUQCRVLVPMGTTCVLH3ANCNFSM4YGLC74A .

-- ∞ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[bk-test]

Here is a sample project, using the select2_outside_admin as a base which displays the behavior. This worked fine in an older version of DAL. Not positive when it broke.

select2_outside_admin_load.zip

[jpic]

Elementary, the DOM watcher code that is in a window.load callback is not executed when the script is loaded after the window.load event which is this case.

This regression seems introduced in commit 99982326, @danielmorell any suggestion ?

Meanwhile, I found adding this code in your jQuery.load callback seems to fix your example code: window.dispatchEvent(new Event('load'))

[danielmorell]

I agree that is definatly a regression.

I can think of a few ways to fix this....

1. Create a custom event that dal also listens for in addition to window load.
2. Create a global dal (or some other name) object on the window that will accept inputs that need to be initialized. The implementation would probably need to look like if(!window.dal){window.dal = funciton() {window.dal.queue.push(/* inputs to init */)};. The reason is that we can't control which is loaded first.
3. Make the initialization function available globally so that it can be called at any time.

I think option 1 is the simplest to add and ship. However, 3 is probably the cleanest for the consumers of the project.

What are your thoughts?

[etiennepouliot]

Had this issue with version 3.8.2.

Upgrading to current master fixed it for me. Not sure where it was fixed.

[jpic]

Released 3.9.0! Does the problem persist for anyone?

[davmlaw]

This is still broken for me on master

window.dispatchEvent(new Event('load')) fixes it.

[tidenhub]

Elementary, the DOM watcher code that is in a window.load callback is not executed when the script is loaded after the window.load event which is this case.

We run into the same issue since our form and script is loaded after the window.load event. The latest version 3.9.4 (and the master) still shows the same behavior.

We used the idea of @davmlaw to fix the form.

if ($("[data-autocomplete-light-function]:not([aria-hidden=true])").length !== 0) {
        window.dispatchEvent(new Event('load'));
    }

1. Create a custom event that dal also listens for in addition to window load.
2. Create a global dal (or some other name) object on the window that will accept inputs that need to be initialized. The implementation would probably need to look like if(!window.dal){window.dal = funciton() {window.dal.queue.push(/* inputs to init */)};. The reason is that we can't control which is loaded first.
3. Make the initialization function

It would be nice to see one of @danielmorell suggestions implemented.

[ideesnoires]

I agree that is definatly a regression.

I can think of a few ways to fix this....

1. Create a custom event that dal also listens for in addition to window load.
2. Create a global dal (or some other name) object on the window that will accept inputs that need to be initialized. The implementation would probably need to look like if(!window.dal){window.dal = funciton() {window.dal.queue.push(/* inputs to init */)};. The reason is that we can't control which is loaded first.
3. Make the initialization function available globally so that it can be called at any time.

I think option 1 is the simplest to add and ship. However, 3 is probably the cleanest for the consumers of the project.

What are your thoughts?

I agree with @danielmorell suggestions. current state of triggering a load event is not nice.