Sequential AUI modules execution

[Selva kumar, modificado hace 7 años.]

Hi

I want to execute the script using AUI modules sequentially. is it possible? Below is the example, I except the variable "formObject" should be defined with form instance, but getting undefined as script executed using AUI modules are not sequential. Can anyone advise?

Var formObject = getFormObj();
console.log(formObject)

function getFormObj(){
var formObj;

AUI().use('aui-base', 'liferay-form', function(A) {
formObj = Liferay.Form.get('......');
});

return formObj;
}

[Kyle Joseph Stiemann, modificado hace 7 años.]

Hi Selva,
AUI is a simple wrapper around YUI, so the code will behave as the YUI docs describe here:

The callback function passed to use() is executed asynchronously, which means that it doesn't block subsequent code while modules are being loaded.

Any code within an AUI or YUI use() callback is executed asynchronously, so code within the callback is not guaranteed to executed before code after the callback. In your case, it seems like the best and simplest solution would be to include all your code within the AUI().use() callback.

- Kyle

[Selva kumar, modificado hace 7 años.]

Thanks for the swift reply.

The one i posted is a simple example to make people clear about the context. In real case the code is complex, in some case the function would be in a function in another Javascript file. how to handle those situations?

[Kyle Joseph Stiemann, modificado hace 7 años.]

Hi Selva,

...in some case the function would be in a function in another Javascript file. how to handle those situations?

Hmm, I'm not sure I understand why it would be problematic to simply call the function inside an AUI().use() callback. Could you provide a simple example which demonstrates your issue? I don't think there is a simple way to make AUI().use() callback execute synchronously, and even if there was, it would be a code smell.

EDIT: After thinking about it, I've realized that the below suggestions won't work consistently (because the AUI().use() callback is still executed asynchronously and may execute after $(document).ready()/$(window).load() code):

If you did find some code which was required to be run after the AUI().use() callback but couldn't be included in the callback itself, you would probably need to explore options for running the code after all the JS has been run. For example, in jQuery you could do this:

$(document).ready(function() {
$(window).load(function() {
/* ...your code here... */
});
});

However, that code would still be smelly to me since it might fail if a similar technique were used with YUI's domready event.

Ultimately, I think it's best to include any code that should execute after some AUI code inside the AUI().use() callback.

- Kyle

[Selva kumar, modificado hace 7 años.]

Hi Kyle

Let me try your suggestions.
Just a small clarification. Please check the below example, i just modified the example i posted

Script_1.js

function validateForm(){
AUI().use('aui-base', 'liferay-form', function(A) {
Var formObject = getFormObj();
formObject.validate();
});
}

Script_2.js

function getFormObj(){
AUI().use('aui-base', 'liferay-form', function(A) {
var formObj;
formObj = Liferay.Form.get('......');
return formObj;
});
}

Will the above code work as expected?

[Kyle Joseph Stiemann, modificado hace 7 años.]

No because both of those sandboxes will be executed asynchronously. Why couldn't you do this?

AUI().use('aui-base', 'liferay-form', function(A) {

function validateForm(){
Var formObject = Liferay.Form.get('......');
formObject.validate();
}

A.one('#formValidationTrigger')
.on('click' /* or whatever event you want */,
function() {
validateForm();
});

});

- Kyle

[Selva kumar, modificado hace 7 años.]

Thanks Kyle.

Let me try out.