Forums de discussion

ajax request with alloy ui

thumbnail
veggalam laxminarayana, modifié il y a 9 années.

ajax request with alloy ui

New Member Publications: 10 Date d'inscription: 10/04/12 Publications récentes
Hi,
Can anyone please explain me how to make a ajax request with alloy ui.
Following is my code.Here I am written the ajax request in submitForm() function and i am calling this submitForm() on clicking the submit button.

<portlet:resourceURL id="insert" var="saverecord"></portlet:resourceURL>


<script>
function submitForm(){
var id = $("#id").val();
var uname = $("#username").val();
var fname = $("#firstname").val();
var lname = $("#lastname").val();
var pwd = $("#password").val();
var dataString ='id='+id+ '&username='+ uname + '&firstname=' + fname + '&lastname=' + lname + '&password=' + pwd;
YUI().use('aui-io-request','node',function(Y) {

Y.io.request('<%=saverecord %>',
{
type: "POST",
dataType: 'json',
data: dataString,
on: {
success: function() {
// gets the result of this asynchronous request
var data = this.get('responseData');

}
}
}
);
}


</script>

<form method="post" id="myform">
<input type="hidden" name="id" id="id">
UserName: <input type="text" name="userame" id="username"><br><br>
FirstName: <input type="text" name="firstame" id="firstname"><br><br>
LastName: <input type="text" name="lastame" id="lastname"><br><br>
Password: <input type="password" name="password" id="password"><br><br>
<input id="submit" type="submit" value="submit" onclick="submitForm()" >
<input class="reset" type="reset" value="reset">
</form>

The script is not compiling.In Console it is showing that JavaScript Minifier failed.....
Is it right..?
thumbnail
Iliyan Peychev, modifié il y a 9 années.

RE: ajax request with alloy ui

New Member Publications: 19 Date d'inscription: 17/11/10 Publications récentes
In Liferay it would be better to use Alloy, not YUI directly.

Also, AlloyUI/YUI can submit a form via Ajax, there is no need to do this by yourself (to do var dataString ='id='+id+ '&username='+ uname + '&firstname=' + fname + '&lastname=' + lname + '&password=' + pwd;). You have to:
1. Be sure you have "io-form" (and "io-upload-iframe" if you are uploading file).
2. Put this in IO config object:

form: {
id: //the id of your form,
useDisabled: true or false here,
upload: true // put this to true if you want to upload files
},

3. Subscribe to form submit event, then prevent the default action and then submit the form via IO

See here:
http://yuilibrary.com/yui/docs/io/#the-configuration-object

Again, this is direct usage of YUI. You may also use Alloy, it is the same, you will have to do A.io.request(....)

Hope that helps
thumbnail
Bogdan Cerovac, modifié il y a 9 années.

ajax request with alloy ui - getting serialized values from form

New Member Publications: 6 Date d'inscription: 07/07/14 Publications récentes
Hi after reading the AlloyUI and YUI documentation, forums, Stackoverflow etc. I wasn't able to find a solution for getting serialized POST variables in JavaScript and this post seemed the best place to ask a question, so that it could also be available to other AlloyUI / YUI noobs like me emoticon

So, using:


Y.io.request('resp.html',{
method: 'POST',
cache: false,
form: { id: 'fm2', useDisabled: true },


how can I get serialized data that is then sent via AJAX to a JavaScript variable?

http://yuilibrary.com/yui/docs/io/#configuration is a great asset but missing exactly this info...

I looked in http://alloyui.com/api/files/alloy-ui_src_aui-io_js_aui-io-request.js.html and http://alloyui.com/api/files/yui3_src_io_js_io-form.js.html and wasn't able to figure out where can I retrieve serialized POST.

OK, I could re-loop the form and get it's values but I believe it's better to have consistent source and so avoid discrepancies...

Can somebody please help?
thumbnail
Bogdan Cerovac, modifié il y a 9 années.

RE: ajax request with alloy ui - getting serialized values from form

New Member Publications: 6 Date d'inscription: 07/07/14 Publications récentes
Ok, found a way, if there is some better, please give a hint emoticon

For reference:

Solution lies in JS function Y.IO.stringify's return - http://alloyui.com/api/files/yui3_src_io_js_io-form.js.html#23

So for my example I just used:

var data = Y.IO.stringify('fm2', {'useDisabled': true});

where fm2 is my form id attr. and useDisabled parameter used for serializing disabled elements too...

Probably there is a better way (variable directly from AJAX call???) but this is re-using same function and so avoiding any discrepancies manual loops could cause...
thumbnail
sushil patidar, modifié il y a 9 années.

RE: ajax request with alloy ui

Expert Publications: 467 Date d'inscription: 31/10/11 Publications récentes
Hi,
You can get the more help on the link.

Regards