My first question here.

Has anybody had any problem with using shorthand functions for ajax requests?

This works:

('#book').typeahead({
    source: function(typeahead, query){
        return $.ajax({
            url: "/book/autopleteBooks",
            type: "GET",
            dataType: "JSON",
            data: {queryString: query},
            success: function(results){
                typeahead.process(results);
            }
        });
    },
    property: "title",
    onselect: onSelectBook
});

But none of these two works:

('#book').typeahead({
    source: function(typeahead, query){
        return $.get({
            url: "/book/autopleteBooks",
            dataType: "JSON",
            data: {queryString: query},
            success: function(results){
                typeahead.process(results);
            }
        });
    },
    property: "title",
    onselect: onSelectBook
});

('#book').typeahead({
    source: function(typeahead, query){
        return $.getJSON({
            url: "/book/autopleteBooks",
            data: {queryString: query},
            success: function(results){
                typeahead.process(results);
            }
        });
    },
    property : "title",
    onselect: onSelectBook
});

The other thing is that replacing url with createLink does not work also.

url: "/book/autopleteBooks"

url: "${createLink(controller: 'book', action: 'autopleteBooks')}"

I'd rather use shorthand functions to make to code to be simplier to read and basically for aesthetics :)

My first question here.

Has anybody had any problem with using shorthand functions for ajax requests?

This works:

('#book').typeahead({
    source: function(typeahead, query){
        return $.ajax({
            url: "/book/autopleteBooks",
            type: "GET",
            dataType: "JSON",
            data: {queryString: query},
            success: function(results){
                typeahead.process(results);
            }
        });
    },
    property: "title",
    onselect: onSelectBook
});

But none of these two works:

('#book').typeahead({
    source: function(typeahead, query){
        return $.get({
            url: "/book/autopleteBooks",
            dataType: "JSON",
            data: {queryString: query},
            success: function(results){
                typeahead.process(results);
            }
        });
    },
    property: "title",
    onselect: onSelectBook
});

('#book').typeahead({
    source: function(typeahead, query){
        return $.getJSON({
            url: "/book/autopleteBooks",
            data: {queryString: query},
            success: function(results){
                typeahead.process(results);
            }
        });
    },
    property : "title",
    onselect: onSelectBook
});

The other thing is that replacing url with createLink does not work also.

url: "/book/autopleteBooks"

url: "${createLink(controller: 'book', action: 'autopleteBooks')}"

I'd rather use shorthand functions to make to code to be simplier to read and basically for aesthetics :)

• javascript
• jquery
• grails
• twitter-bootstrap
• grails-2.0

• What exactly doesn't work? Any error messages? Is the request actually being made? Is there a response? etc... – Ayman Safadi Commented Sep 15, 2012 at 8:10

3 Answers 3

Structure of $.get() is like:

$.get(
  "/book/autopleteBooks",     // url
  {queryString: query},          // data
  function(data) {               // success
    // code
  },
  'json'                         // dataType
);

and $.getJSON() is:

$.getJSON(
     "/book/autopleteBooks",   // url
     {queryString: query},        // data
     function(results){           // success
       // code
     }
);

Read more about $.get() and $.getJSON()

Please read the documentation of the two shorthand methods you are trying to use. They don't accept an object of options as first parameter.

$.get() id shorthand for $.ajax() method. But actually the syantaxfor $.get is like this

$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.'); });

where a $.ajax() is called as

$.ajax({
url: url,
data: data,
success: success, dataType:dataType });

for more info on $.get() refer http://api.jquery./jQuery.get/