Accueil » Alloy UI » English

Vue combinée Vue Plate Arborescence
Sujets [ Précédent | Suivant ]
veggalam laxminarayana
ajax request with alloy ui
8 avril 2014 01:20

veggalam laxminarayana

Rang: New Member

Publications: 10

Date d'inscription: 10 avril 2012

Publications Récentes

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>

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



<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">

The script is not compiling.In Console it is showing that JavaScript Minifier failed.....
Is it right..?
Iliyan Peychev
RE: ajax request with alloy ui
8 avril 2014 01:36

Iliyan Peychev


Rang: New Member

Publications: 23

Date d'inscription: 17 novembre 2010

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:

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

Hope that helps
Sushil Patidar
RE: ajax request with alloy ui
8 avril 2014 01:50

Sushil Patidar

Rang: Expert

Publications: 337

Date d'inscription: 30 octobre 2011

Publications Récentes

You can get the more help on the link.

Bogdan Cerovac
ajax request with alloy ui - getting serialized values from form
15 août 2014 04:30

Bogdan Cerovac

Rang: New Member

Publications: 6

Date d'inscription: 7 juillet 2014

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:'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? is a great asset but missing exactly this info...

I looked in and 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?
Bogdan Cerovac
RE: ajax request with alloy ui - getting serialized values from form
18 août 2014 01:36

Bogdan Cerovac

Rang: New Member

Publications: 6

Date d'inscription: 7 juillet 2014

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 -

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...

Participate in the State of Liferay Community 2017. Help the community and even win some prizes!