[ 7 posts ]

Marc

YUI Contributor

  • Offline
  • Profile
Tags:

Serializing form to json

Post Posted: Sat Apr 24, 2010 3:44 am
+0-
Hi,

I was looking around YUI 2 for a way to auto serialize a form to a json object and send it. I figured this might be a good time to try YUI 3.

I tried it using

Code:
      YUI().use("io-form", "json", function(Y) {
         var cfg = {
            method: 'POST',
            form: {id: formId,useDisabled: false},
            headers: {
               'Content-Type': 'application/json',
               }
            };
         
         function onSuccess(transactionid, response, arguments) {
            if(response.responseText)
               panel.showStatus(response.responseText);
            if(callbackSuccess)
               callbackSuccess();
         }
         
         function onFail(transactionid, response, arguments) {
            if(response.responseText)
               panel.showStatus(response.responseText);
            if(callbackFail)
               callbackFail();
         }
         
         Y.on('io:success', onSuccess, Y);
         Y.on('io:failure', onFail, Y);
         var request = Y.io(uri, cfg);
      });


But the server is giving me all sorts of parsing errors, so I'm assuming that it is just sending name-value pairs. Is this the case? How do I configure it to convert to a json object and stringify that automatically before sending.
How can I see the value that is being sent to the server?

Kind regards,

Marc

Nate Koechley

YUI Contributor

  • Username: natekoechley
  • Joined: Wed Oct 15, 2008 9:55 am
  • Posts: 28
  • Location: san francisco
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: Serializing form to json

Post Posted: Thu Jul 15, 2010 12:25 pm
+0-
Marc, did you ever figure this out? I'm trying to do the same thing...

Thanks,
Nate

Marc

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Serializing form to json

Post Posted: Thu Jul 15, 2010 1:14 pm
+0-
Yes, there a few ways to go about this. You can reference a form directly
cfg = {
method: 'POST',
form: {id: formId,useDisabled: false}
};
or send a data object
cfg = {
method: 'POST',
data:myDataObject
}

If you're referring to the server side I think my issue was that the server was expecting a JSON object, but the way I configure it now, YUI is just sending a regular name-value pair just like a normal form would.

So, that's prob good to realize.
I think by specifying the json header type, it will send an actual json object, but I'm not sure of that. You'll have to refer to the manual.

It's just a question of making sure you're sending to the server what you configured/programmed it to expect.

Tiyi Alum

  • Username: tiyilon
  • Joined: Wed Jul 14, 2010 7:41 pm
  • Posts: 4
  • Offline
  • Profile

Re: Serializing form to json

Post Posted: Thu Jul 15, 2010 8:51 pm
+0-
I didn't find the reference of json module take any effects in your code .

Inactivist

  • Username: Inactivist
  • Joined: Tue Apr 03, 2012 8:40 pm
  • Posts: 12
  • GitHub: inactivist
  • Gists: inactivist
  • Offline
  • Profile

Re: Serializing form to json

Post Posted: Thu Jun 07, 2012 8:02 am
+0-
Quote:
How do I configure it to convert to a json object and stringify that automatically before sending.

Yes, that's what I want to know, too. No answer so far.

I'm puzzled as to why it's so tough to find a simple documentary example demonstrating the correct (supported) method of POSTing data in JSON format (automatically from a JavaScript object as the data: element) using YUI.io. This has got to be a very common use case, and yet, I can't find a simple example demonstrating how to do this specific thing using YUI3.
Quote:
How can I see the value that is being sent to the server?

You can see the data using your browser's debugger/inspector (Chrome for example) - and yes, it's sending name=value pairs rather than JSON data.

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 638
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: Serializing form to json

Post Posted: Thu Jun 07, 2012 3:51 pm
+0-
Talk about raising the dead :P

I've been thinking a lot about this use case lately. Forms are a real necessity and YUI doesn't have nice utilities to deal with them. I thought about writing a Form widget or building on top of what's already in the Gallery, but I just think that Widgets are not very good for forms because of the amount of nodes that get accumulated so parent-child relationships can out of control. I'm thinking Model+View is a much better fit for forms. Just set up a template as convoluted as you want it, match <input> values to Model attributes, update them in the relevant DOM events using delegation and sync to the server on submit. I'm thinking about writing a Widget extension using this approach so that you can add a form to a Panel and have a Dialog as an experiment to better understand this.

Idea

Click here to see the revision history on this Gist.

What do you think?

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2016
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: Serializing form to json

Post Posted: Thu Jun 07, 2012 10:55 pm
+0-
inputEx used to be somewhat popular in YUI2, I see they have a YUI3 version, though admittedly it is a very primitive port of the previous version:

http://neyric.github.com/inputex/
  [ 7 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum