Hi Jim,
Are there any errors being thrown?
Also, are you including jQuery onto your page? Your code is relying on it, and we don't include it by default anymore in 6.0.5 (you would use the Node package for that), but that might be one possibility.
One other possibility is that you're defining functions inside of the same block as you're doing a "use" statement.
Everything inside of an aui:script block that contains a "use" attribute is called asynchronously, so it could fire right away (if the resources are on the page) or if the network resolution is taking a long time, it could execute later on.
So if you're defining a function inside of there, but then in another piece of code, you're calling one of you're functions before that code has returned, you have a race condition where the function you're trying to execute is defined after the point you call it.
Does that make sense?
I can show you the difference quickly:
So we make sure never to define a function inside of an aui-script block that has a "use" attribute, unless we're creating another module to be used.
But then how do you define a function that uses a module?
Luckily, we've already solved this problem, and created Liferay.provide.
Here's how your code would look:
You would still call the code blocks the same way:
setupUploader() and uploadFile(), but this method definition basically guarantees that your function is always available and will fire only when the modules have been loaded.
I hope that's enough info (but not too much that it's overwhelming
, but please let me know if that helps.
Thanks Jim,
Are there any errors being thrown?
Also, are you including jQuery onto your page? Your code is relying on it, and we don't include it by default anymore in 6.0.5 (you would use the Node package for that), but that might be one possibility.
One other possibility is that you're defining functions inside of the same block as you're doing a "use" statement.
Everything inside of an aui:script block that contains a "use" attribute is called asynchronously, so it could fire right away (if the resources are on the page) or if the network resolution is taking a long time, it could execute later on.
So if you're defining a function inside of there, but then in another piece of code, you're calling one of you're functions before that code has returned, you have a race condition where the function you're trying to execute is defined after the point you call it.
Does that make sense?
I can show you the difference quickly:
<aui:script>alert('not "using" any modules, Im fired right away');</aui:script>
<aui:script use="aui-io">alert('"using" aui-io, Im fired when its ready');</aui:script>So we make sure never to define a function inside of an aui-script block that has a "use" attribute, unless we're creating another module to be used.
But then how do you define a function that uses a module?
Luckily, we've already solved this problem, and created Liferay.provide.
Here's how your code would look:
<aui:script>
Liferay.provide(window, 'setupUploader',
function() {
var A = AUI();
A.on('io:start', function(id, args) {
jQuery('.expandable').css("cursor", "default");
jQuery('.submission form').hide();
document.getElementById('loading').style.display='block';
});
A.on('io:complete', function (id, o, args) {
if (o && o.responseText) {
response = A.JSON.parse(o.responseText);
}
if (response && response.success == true) {
appSubmitSuccess();
} else if (response && response.success == false) {
appSubmitError(response);
}
});
},
['aui-io']
);
Liferay.provide(window, 'uploadFile',
function() {
var A = AUI();
var cfg = {
method: "POST",
form: {
id: "<portlet:namespace />upload_form",
upload: true
}
};
A.io('<%= ajaxFileSubmit %>', cfg);
},
['aui-io']
);
</aui:script>You would still call the code blocks the same way:
setupUploader() and uploadFile(), but this method definition basically guarantees that your function is always available and will fire only when the modules have been loaded.
I hope that's enough info (but not too much that it's overwhelming
, but please let me know if that helps.Thanks Jim,
Nate, unfortunately this doesn't seem to solve the problem.
Let me clarify a little bit more:
My script code, seems to work fine when using the <aui:script> with 'use' attribute or define the functions using the Liferay.provide(...). However when I do, Liferay's out of the box "Look & Feel" dialog no longer function. All I get is a dialog with spinning loading wheel. If I remove the use or Liferay.provide(...), the "Look & Feel" dialog begins to work again, however my methods which depend on the aui-io no longer work (which would be expected).
Unfortunately I need both working.
Let me clarify a little bit more:
My script code, seems to work fine when using the <aui:script> with 'use' attribute or define the functions using the Liferay.provide(...). However when I do, Liferay's out of the box "Look & Feel" dialog no longer function. All I get is a dialog with spinning loading wheel. If I remove the use or Liferay.provide(...), the "Look & Feel" dialog begins to work again, however my methods which depend on the aui-io no longer work (which would be expected).
Unfortunately I need both working.
Nate Cavanaugh:
Hi Jim,
Are there any errors being thrown?
Also, are you including jQuery onto your page? Your code is relying on it, and we don't include it by default anymore in 6.0.5 (you would use the Node package for that), but that might be one possibility.
One other possibility is that you're defining functions inside of the same block as you're doing a "use" statement.
Everything inside of an aui:script block that contains a "use" attribute is called asynchronously, so it could fire right away (if the resources are on the page) or if the network resolution is taking a long time, it could execute later on.
So if you're defining a function inside of there, but then in another piece of code, you're calling one of you're functions before that code has returned, you have a race condition where the function you're trying to execute is defined after the point you call it.
Does that make sense?
I can show you the difference quickly:<aui:script>alert('not "using" any modules, Im fired right away');</aui:script> <aui:script use="aui-io">alert('"using" aui-io, Im fired when its ready');</aui:script>
So we make sure never to define a function inside of an aui-script block that has a "use" attribute, unless we're creating another module to be used.
But then how do you define a function that uses a module?
Luckily, we've already solved this problem, and created Liferay.provide.
Here's how your code would look:<aui:script> Liferay.provide(window, 'setupUploader', function() { var A = AUI(); A.on('io:start', function(id, args) { jQuery('.expandable').css("cursor", "default"); jQuery('.submission form').hide(); document.getElementById('loading').style.display='block'; }); A.on('io:complete', function (id, o, args) { if (o && o.responseText) { response = A.JSON.parse(o.responseText); } if (response && response.success == true) { appSubmitSuccess(); } else if (response && response.success == false) { appSubmitError(response); } }); }, ['aui-io'] ); Liferay.provide(window, 'uploadFile', function() { var A = AUI(); var cfg = { method: "POST", form: { id: "<portlet:namespace />upload_form", upload: true } }; A.io('<%= ajaxFileSubmit %>', cfg); }, ['aui-io'] ); </aui:script>
You would still call the code blocks the same way:
setupUploader() and uploadFile(), but this method definition basically guarantees that your function is always available and will fire only when the modules have been loaded.
I hope that's enough info (but not too much that it's overwhelming
Thanks Jim,
Hi Nate Cavanaugh
can u tell me more use attribute "USE" in tag "<AUI:SCRIPT>" or link or document? i down't know more it, i don't know how use it.
I really don't understand what's wrong,
if I go like this :
everything's fine, but If I do it like this :
I'm getting these "R is null" "J is null" errors... and the ajax request doesn't start. The "J" errors goes from here
YUI.add("
io - form ", function (
{
....
Uncaught exception: TypeError: Cannot convert 'J' to object
Error thrown at line 197, column 4234 in <anonymous function: _serialize>(M, R):
H=0,O=J.elements.length
called from line 120, column 5085 in a(h, w, p):
q=D.io._serialize(w.form,w.data);
called from line 1, column 5477 in <anonymous function>() in http://localhost:8080/web/guest/home:
a.io("http://localhost:8080/web/guest/home?p_p_id=1_WAR_brokerageportlet&p_p_lifecycle=2&p_p_state=normal&p_p_mode=view&p_p_resource_id=example3&p_p_cacheability=cacheLevelPage&p_p_col_id=column-1&p_p_col_count=2",{method:"POST",form:{id:"fm",upload:false}})
called from line 3, column 140481 in <anonymous function: _proxy>(j, n, g, m, f, e):
g.apply(j,l)
called via Function.prototype.apply() from line 3, column 102934 in <anonymous function: h.bind>():
return m.apply(k||m,l)
called via Function.prototype.apply() from line 1, column 9214 in <anonymous function: _notify>(z, w, x):
z(this,w)
called from line 1, column 9075 in <anonymous function: use>(C,:
C._notify(z,B,w)
called from line 1, column 9214 in <anonymous function: _notify>(z, w, x):
z(this,w)
called from line 1, column 10585 in <anonymous function: _use>(W):
x._notify(B,U,y)
called from line 3, column 64635 in <anonymous function: _finish>(y, x):
w.call(this.context,{msg:y,data:this.data,success:x})
if I go like this :
Liferay.provide(window, 'post',
function() {
var A = AUI();
A.io("<liferay-portlet:resourceurl id="example3" />", {
method: 'POST',
data: {
<portlet:namespace />description: 'value'
}
});
},
['aui-io']
);everything's fine, but If I do it like this :
Liferay.provide(window, 'uploadFile1',
function() {
var A = AUI();
A.io("<liferay-portlet:resourceurl id="example3" />", {
method: "POST",
form: {
id: "<portlet:namespace />fm2",
upload: false
}
});
}
['aui-io']
);I'm getting these "R is null" "J is null" errors... and the ajax request doesn't start. The "J" errors goes from here
YUI.add("
io - form ", function (
{....
Uncaught exception: TypeError: Cannot convert 'J' to object
Error thrown at line 197, column 4234 in <anonymous function: _serialize>(M, R):
H=0,O=J.elements.length
called from line 120, column 5085 in a(h, w, p):
q=D.io._serialize(w.form,w.data);
called from line 1, column 5477 in <anonymous function>() in http://localhost:8080/web/guest/home:
a.io("http://localhost:8080/web/guest/home?p_p_id=1_WAR_brokerageportlet&p_p_lifecycle=2&p_p_state=normal&p_p_mode=view&p_p_resource_id=example3&p_p_cacheability=cacheLevelPage&p_p_col_id=column-1&p_p_col_count=2",{method:"POST",form:{id:"fm",upload:false}})
called from line 3, column 140481 in <anonymous function: _proxy>(j, n, g, m, f, e):
g.apply(j,l)
called via Function.prototype.apply() from line 3, column 102934 in <anonymous function: h.bind>():
return m.apply(k||m,l)
called via Function.prototype.apply() from line 1, column 9214 in <anonymous function: _notify>(z, w, x):
z(this,w)
called from line 1, column 9075 in <anonymous function: use>(C,
:C._notify(z,B,w)
called from line 1, column 9214 in <anonymous function: _notify>(z, w, x):
z(this,w)
called from line 1, column 10585 in <anonymous function: _use>(W):
x._notify(B,U,y)
called from line 3, column 64635 in <anonymous function: _finish>(y, x):
w.call(this.context,{msg:y,data:this.data,success:x})