Question

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/autocompleteBooks",
            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/autocompleteBooks",
            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/autocompleteBooks",
            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/autocompleteBooks"

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

I’d rather use shorthand functions to make to code to be simplier to read and basically for aesthetics 🙂

Answer 1

Structure of $.get() is like:

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

and $.getJSON() is:

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

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