3 Replies Latest reply on Sep 4, 2009 10:34 AM by BrendonKoz

    how to do simple Ajax POST

    Mahen23

      Hi

       

      Am new to AIR and i have been  trying to so simple Ajax tricks to submit forms data with AIR but in vain. It simply is not working.

       

      Can  someone tell me how can i use Jquery with AIR so that i can use its simple Ajax and Dom calls.

       

      The documentation is so difficult to undersatand. is there even a chatroom where i can ask questions?

       

      thanks

        • 1. Re: how to do simple Ajax POST
          JasonMH

          Of course the "J" in AJAX stands for JavaScript so that term only applies if you are coding in JavaScript.  Flex actually has nice remote call functionality, though.  If you are just making a simple POST call, look at the HTTPService class: http://www.adobe.com/devnet/flex/quickstart/httpservice/

           

          The example on that page is hard to understand if you are new because the sadistic person who wrote it threw in about every Flex trick in the book :-).  But to follow the logic of the example, look the HTTPService "photoFeed".  onCreationComplete fires "photoFeed.send()"  This triggers the HTTPService to make the call and when the result comes back from the server, it fires the method photoResultHandler().  In this case event.results is the XML sent back from the photo feed service.  Flex automatically converted XML into an object w/ properties in this case because photoFeed.resultFormat setting is "ex4" and then that is bound to the repeater, so that is actually very clean code, but if you are new to Flex it probably blows your mind with all the magic that is happening.  If your service does not send back XML, you can change that setting to "text" and then just parse the results however you like.

           

          good luck!

          • 3. Re: how to do simple Ajax POST
            BrendonKoz Level 1

            Here's a simple example directly from something I'm working on right now.

             

            var id = 1;

            $('#main a[rel='+id+']').click(function(){
                var reference = $(this);
                var postData = 'field1=' + 2 + '&field2=' + reference.attr('rel');
                $.ajax({
                    type: 'POST',
                    url: 'http://test.com/question_tallies/add',
                    data: postData,
                    timeout: (5 * 1000),    //wait 5 seconds for the server to respond before going to FAIL state
                    success: function(msg){
                        alert('The save APPEARS to have been successful.');
                    },
                    error: function(msg){
                        alert('there was an error saving the data - save to internal database')
                        //do asynchronous internal database backup
                    }
                });
            });

             

            I've removed (most) code that was specific to my project to make it a bit easier to understand.  As you mentioned, you asked specifically for jQuery...

            Here I'm preparing an event trigger of "click" on one of my anchor tags (which in this instance is a button in the AIR's GUI) that has a "rel" attribute whose value is equivalent to the variable "id".  My code looped through some variables, so this might not make a huge amount of sense by itself as to WHY, but follow along anyway, the AJAX post still works the same.

             

            Adobe AIR is an event oriented language, for the most part.  You need to code around events occurring, and a lot of events will be fired asynchronously, which was why I chose to use the long form of the AJAX call, instead of the jQuery $.post() method.  (For further help, you might want to use the following link: http://www.visualjquery.com/)  It gives me a finer amount of control, as setting a fail state on the $.post() method didn't seem so easy to figure out, if it's possible at all - and in an AIR app, you're going to want to have access to that.  So let's example the $.ajax() call.

             

            All parameters of the $.ajax() method are sent as an object, which is why it starts with an open parenthesis, and then an open curly brace.

            TYPE: defines the type of call we will be using, can be either 'GET' or 'POST'

            URL: the URL we will be GETting or POSTing to.

            DATA: the URL encoded data string that will we be posting from our form.  In my simple example here, our form had two fields that are being saved, named "field1" and "field2", we'll assume they're textarea fields just for the heck of it.  When I declare my postData variable, I set field1's value to 2, and field2's value to whatever value my id variable is set to (in this case, 1).  The DATA must be an URL encoded string like you see here; separated with ampersands, and values assigned to the form field names with equal symbols.  (You can technically name the variables whatever you'd like so long as the URL receives the expected variable names and values).

            TIMEOUT: It took me awhile to find this one.  I don't want my application waiting around forever to try to make a proper save. This is set in milliseconds.

            SUCCESS: a function to run when it thinks you have successfully saved the data (might still report success on failure, debug well)

            ERROR: a function to run when an error occurs