Web2py - 如何在 ajax 之后确定负载控制的结束

Question

I run a ajax call that updates interpolated value as a fully built selectbox element.

I would like to transform the created/returned selectbox into a chosen selectbox once it has finished fully loading otherwise it reverts back to a regular selectbox.

I have tried:

• Listening to 'DOMSubtreeModified'(and other similar events) and then activating chosen lines but, these run too often and I have to know when the selectbox with all options are fully initiated . I can force initiation on each change, it's terrible - resource consuming and just plain wrong.
• Initiate some callback on ajax return('ajax:complete' event) but, again - this does not guarantee the html controls are fully initiated as stated in this answer (and tested).
• I've tried to set a onload event for the select control.

Main lines of code:

JavaScript call:

ajax('{{=URL('controller_name', 'func_name')}}', ['param1'], 'target_div');

Python controller returns(this returns a select control with option objects initiated in it and overrides the target_div inner html):

return SELECT(distinct_values, _id = 'selectbox_id' , _multiple = 'true' , _class='SelectBoxSingleDisabled');

Looking for a web2py oriented solution. No brute force/hacky stuff if possible. thanks!

Answer 1

There are several options (the first two are suggested here ):

1. In the controller, add the Chosen initialization code to response.js -- this will be executed after the returned HTML is added to the DOM.

2. Add the Chosen initialization code to a script element after the select element:

    CAT(SELECT(distinct_values, _id = 'manual_group_selectbox' , _multiple = 'true' , _class='SelectBoxSingleDisabled'), SCRIPT('[Chosen code]'))

3. The third argument to the ajax() function can be a Javascript function that takes the data returned by the server. So, you could write a function that adds the returned HTML to the DOM and then initializes Chosen:

    ajax( '{{=URL('controller_name', 'func_name')}}', ['param1'], function(html) { [add html to DOM] [initialize Chosen] } );

4. Set up a jQuery .ajaxSuccess() event handler, which should run after the ajax() function updates the DOM.