Executing javascript code upon the load (and inside) of a javascript Modalbox

Question

Hi,

What i'm exactly trying to do is make my script.aculo.us Autocompleter work for my form when it is loaded inside a Modalbox object.

Of course, i've tried my Autocompleter when loading the form as standalone and it works just as expected. For reference, here is my JS code loading the feature:

Event.observe(window, 'load', function() { 
new Ajax.Autocompleter("gl_name", "autocomplete_choices", "<? echo WEB_ROOT . $page_name; ?>?action=ajax_autocomplete", {
 paramName: "value",
 minChars: 2,
 indicator: 'indicator1',
 afterUpdateElement: getSelectionIdGL
    });
});

Then I have my Autocompleter div and indicator which appear at the end of my html's body:

<span id="indicator1" style="display: none">
    <img src="/images/spinner.gif" alt="Working..." />
</span>
<div id="autocomplete_choices" class="autocomplete"></div>

I also called the Modalbox() with evalScripts: true.

So I basically know where my problem is: I want my autocompleters to be created a the load of the form, but the "window" object is already loaded when the script is written since it's basically the same window as the calling page.

That said, I honestly don't see to which event it could ever be actually triggered. I don't even know if it's actually possible, but I certainly hope it is.

So.. that's about it. I don't know what else to add. Don't hesitate if you need any clarifications on my issue.

Thanks a bunch!

Mathieu

Answer 1

OK, seems like I was able to answer my own question after all.

I enclosed my Autocompleter creation in a function:

makeAutocompleters = function() {

new Ajax.Autocompleter("ass_name", "autocomplete_choices", "<? echo WEB_ROOT . $page_name; ?>?action=ajax_autocomplete", {
 paramName: "value",
 minChars: 2,
 indicator: 'indicator1',
 afterUpdateElement: getSelectionIdAss
    });
}

Then on my ModalBox() call, I added the 'afterLoad' callback parameter:

onclick="Modalbox.show(this.href, {title: this.title, width: 470, evalScripts: true, afterLoad: function() { makeAutocompleters(); }}); return false;"

Then it worked :D

So here it is, for anyone else who ever runs into the same issue.

Mathieu

Answer 2

Are you aware of modalbox's callback functions? You can use the afterLoad one to create the autocompleter.