{"id":2860,"date":"2014-02-27T11:24:18","date_gmt":"2014-02-27T11:24:18","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/02\/27\/integrating-select2-with-laravel-4-app-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:45:33","modified_gmt":"2022-08-30T15:45:33","slug":"integrating-select2-with-laravel-4-app-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/02\/27\/integrating-select2-with-laravel-4-app-collection-of-common-programming-errors\/","title":{"rendered":"Integrating Select2 with Laravel 4 App-Collection of common programming errors"},"content":{"rendered":"

I’ve decided to implement select2 in my multiselect search filter and I could do with some help integrating it.<\/p>\n

I have the following method:<\/p>\n

public function getContactByName($name)\n{\n    return Contact::select(array('id', DB::raw('concat(first_name,\" \",last_name) as name')))->where(DB::raw('concat(first_name,\" \",last_name)'), 'like', \"%$name%\")->get();\n}\n<\/code><\/pre>\n
This method returns any records where ‘first_name’ and ‘last_name’ are like the term entered in the URL, for example http:\/\/www.example.com\/admin\/get-contact-name\/{name}.<\/p>\n
The following route handles the request:<\/p>\n
Route::get('admin\/get-contact-name\/{name}', 'AdminContactListController@getContactByName');\n<\/code><\/pre>\n
This all works great. I just need some help setting it up with select2 and AJAX. I’m not really sure what to put in the options for the JS.<\/p>\n
I have the following form field setup:<\/p>\n
\n<\/code><\/pre>\n
Can anyone point me in the right direction. Cheers.<\/p>\n
EDIT<\/strong>: I’m sort of playing about here and shooting in the dark, as I’m not sure what each of these elements mean, such as page etc but this is the code I have so far, suffice to say it’s not working:<\/p>\n
var name = $('#contact_names_value').val();\n$('#contact_names_value').select2({\n    placeholder: 'Search contacts',\n    minimumInputLength: 3,\n    ajax: {\n        url: '\/admin\/get-contact-name' + name,\n        dataType: 'json',\n        data: function (term, page) {\n            return {\n                q: term,\n                page_limit: 10\n            };\n        },\n        results: function (data, page) {\n            return {results: data};\n        }\n    },\n});\n<\/code><\/pre>\n
EDIT<\/strong>: OK guys, I think I’m much closer, and I think I’m getting results via select2 now but I’m getting a JavaScript error. Here’s what I have so far.<\/p>\n
Method:<\/p>\n
public function getContactByName()\n{\n    $name = Input::get('name');\n    return Contact::select(array('id', DB::raw('concat(first_name,\" \",last_name) as name')))->where(DB::raw('concat(first_name,\" \",last_name)'), 'like', \"%$name%\")->get();\n}\n<\/code><\/pre>\n
Route:<\/p>\n
Route::get('admin\/get-contact', 'AdminContactListController@getContactByName');\n<\/code><\/pre>\n
Select2 JavaScript:<\/p>\n
$('#contact_names_value').select2({\n    name: $('.select2-input').val(),\n    placeholder: 'Search contacts',\n    minimumInputLength: 3,\n    ajax: {\n        url: '\/admin\/get-contact' + name,\n        dataType: 'json',\n        data: function (term) {\n            return {\n                name: term\n            };\n        },\n        results: function (data) {\n            return {results: data};\n        },\n        dropdownCssClass: 'bigdrop'\n    },\n});\n<\/code><\/pre>\n
Select2 JS Error:<\/p>\n
Uncaught TypeError: Cannot call method 'toUpperCase' of undefined plugins.js:1549\nC plugins.js:1549\na.fn.select2.defaults.formatResult plugins.js:1550\ng plugins.js:1549\na.extend.populateResults plugins.js:1549\nf.query.callback plugins.js:1549\n(anonymous function) plugins.js:1549\na.extend.success plugins.js:1549\nc jquery-1.9.1.min.js:3\np.fireWith jquery-1.9.1.min.js:3\nk jquery-1.9.1.min.js:5\nr\n<\/code><\/pre>\n
Any advice guys?<\/p>\n
    \n
  1. \n
    OK, I have this working like a charm now.<\/p>\n
    Here’s my JS code:<\/p>\n
    $('#contact_names_value').select2({\n    placeholder: 'Search contacts',\n    minimumInputLength: 3,\n    ajax: {\n        url: '\/admin\/get-contact',\n        dataType: 'json',\n        data: function (term, page) {\n            return {\n                contact_names_value: term\n            };\n        },\n        results: function (data, page) {\n            return {results: data};\n        }\n    },\n    tags: true\n});\n<\/code><\/pre>\n
    I did not need the ‘name’ variable reference, as the plugin handles this and appends the value of the select\/input to the query string.<\/p>\n
    Secondly, in my form, I needed to set the type to ‘hidden’, as previously it was text.<\/p>\n
    You’ll also notice above that I added ‘page’ to both the results and data functions. Not sure if this made a difference.<\/p>\n
    I also added ‘tags: true’ to make it work like a multiselect.<\/p>\n
    Here’s my method code:<\/p>\n
    public function getContactByName()\n{\n    $name = Input::get('contact_names_value');\n    return Contact::select(array('id', DB::raw('concat(first_name,\" \",last_name) as text')))->where(DB::raw('concat(first_name,\" \",last_name)'), 'like', \"%$name%\")->get();\n}\n<\/code><\/pre>\n
    Notice during my select statement, I do a DB::raw and set the ‘first_name’ and ‘last_name’ fields to be selected as ‘text’. I think this was one of the major issues, as the plugin requires ‘id’ and ‘text’ to function.<\/p>\n
    My route was simply:<\/p>\n
    Route::get('admin\/get-contact', 'AdminContactsController@getContactByName');\n<\/code><\/pre>\n<\/li>\n
  2. \n
    You simply grab the input box (e.g. using jQuery you can do $(‘#contact_names_value’) or javascript is document.getElementById(‘contact_names_value’).)<\/p>\n
    An example that should work:<\/p>\n
    $('#contact_names_value').select2(your_value_from_getContactByName_method_here);\n<\/code><\/pre>\n
    Hope that helps.<\/p>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    I’ve decided to implement select2 in my multiselect search filter and I could do with some help integrating it. I have the following method: public function getContactByName($name) { return Contact::select(array(‘id’, DB::raw(‘concat(first_name,” “,last_name) as name’)))->where(DB::raw(‘concat(first_name,” “,last_name)’), ‘like’, “%$name%”)->get(); } This method returns any records where ‘first_name’ and ‘last_name’ are like the term entered in the URL, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,1],"tags":[],"class_list":["post-2860","post","type-post","status-publish","format-standard","hentry","category-laravel","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2860"}],"version-history":[{"count":1,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2860\/revisions"}],"predecessor-version":[{"id":8845,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2860\/revisions\/8845"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}