CODEWITHSUNDEEP
javascriptajaxweb2pyjquery-chosen
Eggcellentos
Eggcellentos

Reputation: 1758

Web2py - How to determine end of load control after ajax

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:

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!

Upvotes: 0

Views: 133

Answers (1)

Anthony
Anthony

Reputation: 25536

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.

Upvotes: 1

Related Questions