easyXDM form post - javascript

I'm in the process of converting my jquery ajax calls to use easyXDM. How might I go about doing something like this:
xhr.request({
url: "someurl",
method: "POST",
data: $("#formid").serialize(), // serializes the form's elements
}, function(rpcdata){
// do stuff
});
My issue is with serializing the form's content. It appears that easyXDM is expecting json. Is there a simple way to convert my form to json? Or is there a way to tell easyXDM to use a standard query string?

Here's one solution:
http://css-tricks.com/snippets/jquery/serialize-form-to-json/

Related

How to replicate the jQuery .load() method using jQuery’s .ajax() method

I can’t just use .load() because I’m building a custom loading bar that’s actually truthful about the percentage that has currently been loaded (yes that’s actually possible): http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
I’ve got the loading bar working now but I need to replicate the following jQuery functionality inside the .ajax() function so I can append the #ajaxContent stuff to the .ajaxContainer div once it’s finished loading:
$('.ajaxContainer').load('/path/to/file.php #ajaxContent')
The equivalent would be:
$.ajax('/path/to/file.php'/*,{extra: settings}*/).done(function (response) {
$('.ajaxContainer').html($("<div>").append( $.parseHTML( response ) ).find( '#ajaxContent' ));
});
I think is quite simple to provide a simple answer, I prefer to illustrate you the procedure for retrieve yourself.
If you read the docs of .load() on jQuery site you read:
This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success)
If you read the docs about .get() you read:
This is a shorthand Ajax function, which is equivalent to:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
Where dataType
dataType Type: String The type of data expected from the server.
Default: Intelligent Guess (xml, json, script, or html).
So in your case you must fill the html element with data from success callback like this:
$('.ajaxContainer').html(response);

jQuery AJAX: Posting serialized form data with $.post() does not achieve the same result as $.ajax()

I was trying post data into a source by sending form's data using the jQuery's shorthand method jQuery.post() but I am not capable to achieve the same result as using the full blue-print for posting with jQuery.ajax().
Please find below the scripts that I've used for my findings:
Using $.post():
jQuery.post(
"/full-path-to-service",
{ cache: false,
data: jQuery(submittingForm).serialize(),
_: jQuery.now() },
null,
"json"
).done(function(data) {
// Response handling
});
Using $.ajax():
jQuery.ajax({
type: "POST",
url: "/full-path-to-service",
data: jQuery(submittingForm).serialize(),
dataType: "json",
_: jQuery.now()
}).done(function(data) {
// Response handling
});
While I was able to receive a successful response from the server, the service seemed to be not being fired for not receiving the information previously sent serialized in the POST request.
Sniffing the information being sent to the service I was able to confirm that the information is parsed incorrectly while using jQuery.post.
Please find the differences below:
Is there any reasing for jQuery.post() not sending the information in the same way as using a blue-print for posting with jQuery.ajax()?
The second argument for post() is the data object (or string) you wish to pass. You are attempting to pass it the configuration object for ajax().
post() is not ajax() and doesn't support the same level of customisation. It is designed to be much simpler. Use ajax() if you want to set all the options.
Is there any reasing for jQuery.post() not sending the information in the same way as using a blue-print for posting with jQuery.ajax()?
Yes. It is a simple shorthand for common use cases.

Serialize and de-serialize array (without jquery?)

I have a method which sends an ajax request. When the reply from the server is received I need to serialize and later de-serialize
$.ajax({
//.....
done(function(data) {
//1 Need to serialize data (which is an array)
});
function myFunction() {
//2 Need to de-serialize data which has been serialized
}
I know I could use jquery#serializeArray() if I had a form to serialize:
$( "form" ).submit(function( event ) {
console.log( $( this ).serializeArray() );
event.preventDefault();
});
But I don't have a form and data from the server (I guess) has nothing to do with serializeArray function of jquery. So how can I do it? What's one of the best ways?
Preferably not to use any third-party libraries except jquery or even not to use jquery at all.
The common way to serialize JS-objects to JSON is via JSON.stringify().
The other way around is via JSON.parse().
o={"firstName":"john","lastName":"doe"};
console.log(JSON.stringify(o));
console.log(JSON.parse(JSON.stringify(o)));
See MDN for stringify and parse
Here is a Fiddle.
.serializeArray() from jQuery is only a neat helper function to serialize form-data.
It builds its objects from the ground up. Here is the source for that.
If you want to submit your data as JSON, you simply
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),
success: success,
dataType: dataType
});
Free after jQuery.post().

Return String from Cross-domain AJAX Request

I'm looking for a way to return a single JSON/JSONP string from a cross-domain "AJAX" request. Rather than request the string and have JQuery return it as a generic object automatically, I want to get a hold of the string BEFORE that conversion happens. The goal here is to parse it myself so I can turn it straight into new objects of a certain type (e.g. a Person object).
So, just to make this clear, I don't want any string-to-generic-object conversion going on behind the scenes and this must work using a different domain.
Here's a non-working example of what I would like to do:
$.ajax({
type: 'GET',
url: 'http://www.someOtherDomain.com/GetPerson',
dataType: 'text',
success: parseToPerson
});
function parseToPerson( textToParse ) {
// I think I can do this part, I just want to get it working up to this point
}
I'm perfectly happy if JQuery isn't involved in the solution, as long as it works. I would prefer to use JQuery, though. From what I've read, the javascript techniques used to get JSONP data (dynamically creating a script element) would probably work, but I can't seem to get that to work for me. I control the domain that I am requesting data from and I can get the data if I change the dataType in the AJAX call to 'JSONP', so I know that is working.
If your data is being retrieved from another domain, you will need to use JSONP (there are other options, but JSONP is by far the easiest if you control the service). The jQuery call will look like this:
$.ajax({
// type: 'GET', --> this is the default, you don't need this line
url: 'http://www.someOtherDomain.com/GetPerson',
dataType: 'jsonp',
success: parseToPerson
});
The actual request that goes to your service will be http://www.someOtherDomain.com/GetPerson?callback=arbitrary_function_name. On the service side, you will need to return data like this:
arbitrary_function_name("the string (or JSON data) that I want to return");
So you'll need to inspect the querystring parameters, get the value of the callback parameter, and echo it out as if you're calling a Javascript function with that name (which you are), passing in the value you want to provide through the service. Your success function will then get called with the data your service provided.
If you're deserializing the returned data into a Javascript object, you might be better off returning JSON data than a string, so the data your service returns might look like this:
arbitrary_function_name({
"name":"Bob Person",
"age":27,
"etc":"More data"
});
That way you don't have to worry about parsing the string - it'll already be in a Javascript object that's easy to use to initialize your object.
Not sure how this will work in conjuction with jsonp, but maybe converters is what you're looking for?
$.ajax(url, {
dataType: "person",
converters: {
"text person": function(textValue) {
return parseToPerson(textValue);
}
}
});

Is there a name for a pre-loaded AJAX object?

Is there a name for a pre-loaded AJAX object stored in memory?
If I wanted to use this code:
function GetXML() {
$.ajax({
type: "GET",
url: "questions.xml",
dataType: "xml",
success: function(xml) {
} //close success
});//close AJAX
}; //close function GetXML
to load some XML, how would I store this data on an object? Would I have to create a new variable on the object to store this XML? That's what I've found. If so, what would the type would the variable be? (e.g. String, Int, something of that nature)
Would it be 'Object XML' or something of that sort?
Thanks, Elliot Bonneville
Since you are setting dataType: 'xml' in the AJAX request, jQuery will parse the response into an XMLDocument object.
Note that there are certain circumstances where you will need to do this manually. (Related to an IE bug, of course)
You'll have to use a JavaScript XML parser to convert it to an object. There are a lot of pre-made ones, but if you want it for something simple check: http://www.w3schools.com/Xml/xml_parser.asp
Since you're using jQuery already, parse the data like you parse the elements of an html document with regular $() calls on elements in the xml.
you could use jQuery('example

Categories