jQuery Ajax request in Grails - ajax

How to use jQuery to make Ajax request in Grails pages?
How to setup a URL hitting a method on Grails Controller? Let's say controller:'airport', action:'getJson' and input to the action is 'iata'.
I am able to set static url as http://localhost:8080/trip/airport/getJson but not able to figure out how to pass input for iata specifically.
I am fairly new to Grails and following IBM's 'Mastering the Grails' tutorial series. Do suggest me some good tutorial on using jQuery with Grails.

use the $.ajax method in jquery
$.ajax({
url:"${g.createLink(controller:'airport',action:'getJson')}",
dataType: 'json',
data: {
iata: '.............',
},
success: function(data) {
alert(data)
},
error: function(request, status, error) {
alert(error)
},
complete: function() {
}
});

It's:
$.ajax({
url: '/trip/airport/getJson',
data: {paramName: 'iata'}
});
use your parameter name, that you're expecting in action, intead of paramName, that i've used.

Related

AJAX working in jQuery 1.8.3, but not in 1.9.1

As described by the title, I have this AJAX function, that work perfectly in jQuery 1.8.3
$.ajax({
type: "GET",
url: "bee.php",
success: function(msg) {
$("#bee-section").ajaxComplete(function() {
$(this).html(msg);
});
}
});
But not working in jQuery 1.9.1 and doesn't show anything at all. Any help? Thanks. :)
From the documentation :
As of jQuery 1.8, however, the .ajaxComplete() method should only be
attached to document.
You should use
$(document).ajaxComplete
instead of
$("#bee-section").ajaxComplete
But you don't need ajaxComplete here as you're already in the success callback.
Simply use
$.ajax({
type: "GET",
url: "bee.php",
success: function(msg) {
$("#bee-section").html(msg);
}
});
or even simpler :
$("#bee-section").load("bee.php");

How can I extend jquery's .ajax() and create custom .ajax2() for my use

I want to extend the Ajax functionality of JQuery for having advanced options and features.
For example i could pass an argument named logElement and pass a selector to find the element to place log.
like
$.ajax({
type: "GET",
url: "ajax/get_countries.php",
dataType: 'json',
logElement:"#logDiv",
success: function(data){
//code
}
});
This should function like jquery's Ajax request and also print log information in the specified logElement on success and error
(function($) {
$.ajax2 = function(settings) {
// do what you want...
$.ajax(settings);
};
})(jQuery);

Calling Restful service through jQuery Ajax

I am trying to access a restful web service using jQuery Ajax but getting following error:
XML Parsing Error: no element found Location: moz-nullprincipal:{cefa3a59-2437-454f-b39a-384cf1fdf072} Line Number 1, Column 1:
This how I am making the call:
function getResponse(){
$.ajax( {
type:'Get',
dataType:'xml',
url:'http://localhost:8080/RestTest/restservice/number',
success:function(data) {
alert(data);
}
} );
}
Here my response data type is xml. I understand that there is some cross domain issue but not sure how to resolve it. Please help me on this.
Use getJSON
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});

jQuery AJAX form how to get data

I have a form in my ASP.NET MVC 3 application that will use jquery to send it's data to the controller action instead of doing a normal postback:
$('.AjaxForm').live("submit", function (event) {
event.preventDefault();
$.validator.unobtrusive.parseDynamicContent('.uiModalContent input');
console.log($(this).attr('action'));
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: data,
success: function (responseHtml) {
alert(responseHtml);
},
error: function (responseHtml) {
alert('error');
},
statusCode:
{
404: function (responseHtml) {
alert('404');
},
500: function (responseHtml) {
alert('500');
}
}
});
});
However I get an error saying data is undefined... How do I get the data from the form and send it? Also does the built-in validation in ASP.NET MVC 3 work with my code or will I have issues? Thanks
You should use form.serialize() to make data value. Your code should be changed to:
url: $(this).attr('action'),
data: $('.AjaxForm').serialize(),
you can use the serialize or serializeArray method with form to pass all parameters with the ajax call.
data: $('.AjaxForm').serialize(),
http://api.jquery.com/serialize/
http://api.jquery.com/serializeArray/

How use Facebook Javascript SDK response in Ajax request?

Supposing I have the following code which returns a Javascript object which I can read in Firebug's console:
FB.api('/me',function(apiresponse){
console.log(apiresponse);
});
How can I then use the data from apiresponse in an Ajax request on the same page?
Currently my Ajax request looks as follows:
$.ajax({
// CodeIgniter URL
url: "<?=site_url?>('login/add_fb_users'); ?>",
type: 'POST',
data: apiresponse,
success: function(data) {
alert(data);
}
});
I know very little about Javascript, but reading around the subject leads me to think I have to convert the Javascript object to a JSON string. Is that correct? Am I on the right track?
You could put your AJAX call inside the handler for the API call like below..
FB.api('/me', function(apiresponse){
console.log(apiresponse);
$.ajax({
// CodeIgniter URL
url: "<?=site_url?>('login/add_fb_users'); ?>",
type: 'POST',
data: apiresponse,
success: function(data) {
alert(data);
}
});
});
one possible way:
define a global variable in your javascript, e.g. var myVar1;
set apireponse to the global variable in your FB.api callback (i.e. where u call console.log)
reference the var myVar1 in your ajax fcn.

Resources