select2 with ajax not displaying results - ruby-on-rails

I'm trying to retrieve suppliers with select2 and ajax.
So this is my js code,
$(document).ready(function(){
$('.supplier_suggestion').select2({
placeholder: 'Search for supplier',
ajax: {
type: 'GET',
url: '/search_supplier',
delay: 250,
data: function(params){
var query = {
q: params.term
}
return query;
},
dataType: 'json',
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.text,
id: item.id
}
})
};
}
}
});});
I got this in my haml (which called the js file above)
%b.tosca XXX
.input-field
= f.text_field :supplier_name, class: "supplier_suggestion browser-default"
= error_for #ro_nonreg, :supplier_name
and this ini search_controller.rb
def search_supplier
search = params[:q]
search_pattern = '%' + search.downcase + '%'
result_raw = Supplier.where('lower(supplier_name) LIKE ? OR lower(shadow_id) LIKE ?', search_pattern, search_pattern)
result = []
result_raw.each do |data|
data_hash = {}
data_hash[:id] = data.shadow_id
data_hash[:text] = data.supplier_name
result << data_hash
end
render_secure_json supplier: result
end
what am i missing here?

Related

ajax other parameter is null?

why my other paramter is null. "date" and "ids" is null while my "postedFile" and "amount" has a data. but when i try to removed "postedFile" parameter. the ids and date has a value. and it works fine. but i need the postedfile parameter
My Script
var ids = [];
function add(id, isChecked) {
if (isChecked) {
ids.push(id);
}
else {
var i = ids.indexOf(id);
ids.splice(i, 1);
}
}
function saveSelected() {
//var shipmentId = $('#c-shipment-id').val();
var date = $('#Date').val();
var amount = $('#Amount').val();
//var ImageFile = $('#imageUploadForm').val();
$('#imageUploadForm').on("change", function () {
var formdata = new FormData($('form').get(0));
CallService(formdata);
});
function CallService(postedFile) {
$.ajax({
url: '#Url.Action("index", "payment")',
type: 'POST',
data: { ids: ids, amount: amount, date: date, postedFile: postedFile },
cache: false,
processData: false,
contentType: false,
traditional: false,
dataType:"json",
success: function (data) {
alert("Success");
}
});
}
}
My Controller
public ActionResult Index(int?[] ids, decimal? amount, DateTime? date, HttpPostedFileBase postedFile)
{
return View();
}
As the comments above, I guess you could try to pass all the values with parameters, instead of the variables, like: CallService(formdata, ids, amount, date). It may works.
To answer your secondary question - Fetch all selected IDs in a table with a checkbox column:
Fisrt, add the ID into the checkbox's ID in the view, e.g.:
foreach (var m in Model.Data)
{
row++;
<tr class="#(row % 2 == 0 ? "alter" : "")">
<td class="first">
<input id="chk_#m.ID" type="checkbox" onclick="js_selone(this)" />
</td>
...
Then, Create a JS method getSelVal() to fetch all selected IDs and return an combined string with ,, e.g.: 1,2,3.
$.fn.getSelVal = function () {
for (var e = "", t = $("input[type=checkbox]", this), n = 0; n < t.length; n++) t[n].checked && (e += "," + js_getid(t[n].id));
return e.Trim(",");
}
Finally, you can call the method and pass the ids or ids.toString().split(',') to AJAX request:
ids = $('.table td').getSelVal().toString().split(',');
CallService(formdata, ids, amount, date)
function CallService(postedFile, ids, amount, date) {
$.ajax({
url: '#Url.Action("index", "payment")',
type: 'POST',
data: { ids: ids, amount: amount, date: date, postedFile: postedFile },
cache: false,
processData: false,
contentType: false,
traditional: false,
dataType:"json",
success: function (data) {
alert("Success");
}
});

Populate Select2 field in Edit form

I'm a hobbyist developer. I'm using basic Select2 ajax in a new/edit Rails form, and I can't figure out how to re-populate it in the edit form. song_creditor_1 is a string, but it's entered as an id of Fan model.
form:
<%= f.input :song_creditor_1, label: 'Song Creditor 1', as: :select, input_html: { id: "song_creditor_1", include_hidden: false } %>
script
function templateDropDownFormat (item) {
return item.text;
}
function templateSelectionFormat (item) {
return item.text;
}
$("#song_creditor_1").select2({
placeholder: "Search",
ajax: {
url: "/songs",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: $.map(data, function(cnut) {
return {
text: cnut.name + ", " + cnut.city + ", " + cnut.country + " (" + cnut.account_type + ")",
id: cnut.id,
};
}),
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: templateDropDownFormat, // omitted for brevity, see the source of this page
templateSelection: templateSelectionFormat// omitted for brevity, see the source of this page
});
Well, I'm just a hobbyist, and this is my first website, so this answer isn't pretty but it's how I resolved it. The issue was having to re-populate the data in the field if there was an error on the form, so I just pulled that particular attribute out during the 'create' and called it #creditor1.
var $select1 = $('#song_creditor_1');
function templateDropDownFormat (item) {
return item.text;
}
function templateSelectionFormat (item) {
return item.text;
}
$select1.select2({
ajax: {
url: "/songs",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: $.map(data, function(cnut) {
return {
text: cnut.name + ", " + cnut.city + ", " + cnut.country + " (" + cnut.account_type + ")",
id: cnut.id,
};
}),
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: templateDropDownFormat, // omitted for brevity, see the source of this page
templateSelection: templateSelectionFormat// omitted for brevity, see the source of this page
});
<% if params[:action] === "edit" && #creditor1_real || params[:action] === "update" && #creditor1_real %>
var $option1 = $('<option selected><%= #creditor1_real.name %>, <%= #creditor1_real.city %>, <%= #creditor1_real.country %></option>').val("<%= #creditor1_real.id %>");
$select1.append($option1).trigger('change');
<% elsif params[:action] === "create" && #creditor1 || params[:action] === "new" && #creditor1 %>
var $option1 = $('<option selected><%= #creditor1.name %>, <%= #creditor1.city %>, <%= #creditor1.country %></option>').val("<%= #creditor1.id %>");
$select1.append($option1).trigger('change');
<% else %>
var $option1 = $('<option selected>Search</option>');
$select1.append($option1).trigger('change');
<% end %>
for me, i found solution to just find and plucking model in select options, while keeping the ajax source on js side
<%= f.select :song_creditor_1, Song.where(song_id: song.id).pluck(:song_name, :id), {}, class: 'your-select-2-class' %>
you can select all from your model, but in my case it slowing page load

jquery select2 return json result name

I am new in jquery select2, in result return id, text and name where id is value I know how to get return id(value) with x$("inputBox").val();. but I want get return name in jquery-select2.
Is there any method to get the return name?
x$("#{id:city_combo_box}").select2({
placeholder:"Select City",
allowClear:true,
minimuminputLength:2,
templateResult: formatRepo,
escapeMarkup: function (markup) {return markup},
templateSelection: formatRepoSelection,
multiple:false,
ajax: {
url:ajaxurl,
dataType:"json",
data: function(params){
pp = params.term;
return{
startKey: pp,
page: params.page,
count: 10
};
},
processResults: function (data, params){
var k = data.viewentry;
console.log(k);
params.page = params.page;
return {
results: $.map(k, function(obj) {
return {id: (obj.entrydata[1].text[0]), text: obj.entrydata, name: (obj.entrydata[0].text[0])};
})
};
}
}
}).on("change", function(e){ x$("#{id:claim_limit_text}").val(x$("#{id:city_combo_box}").val(id));
}).trigger("change");
})
The only solution I came across is this:
html
<div id="ddWrapper1">
<select id="dd1"></select>
</div>
js
$(document).ready(function() {
var ddDate = [{
id: 1,
text: 'some item'
}, {
id: 2,
text: 'even more items'
}, {
id: 3,
text: 'oh no'
}, {
id: 4,
text: 'that is a realy long item name...'
}];
$('#dd1').select2({
data: ddDate,
allowClear: true,
multiple: true,
placeholder: '[dd1] select some items'
});
$('#dd1').on('change', function() {
console.log($('#dd1').data('select2').$selection[0].innerText);
})
});
But I have to admit that the result is not the nicest.

Select2 nested json parsing not working Rails3

I'm trying to make select2 working with my ajax loaded json data with nested attributes.
I wanna get something like this http://ivaynberg.github.io/select2/#multi.
eaxmple json:
[{
id: 1,
name: "GroupName",
users: [{id: 1, name: 'UserName'}, {id: 2, name: 'SecondUser}]
}]
On the site they use <optgroup label="GroupName"><option value="1">UserName</opyion></optgroup> and getting the right result.
In my case it displays nesting properly, but I can select only GroupName, but I need to select nested userName and make GrouoName unselectable, only gor informational purposes.
code:
$('#user_tokens').select2({
placeholder: "Search for a user",
minimumInputLength: 0,
tags: true,
multiple: true,
ajax: {
url: "messages/users_data.json",
dataType: 'json',
quietMillis: 100,
data: function(search, page) {
return {
q: search,
per: 3,
page: page
};
},
results: function(data, page) {
return {
results: data,
};
}
},
formatResult: formatResult,
formatSelection: formatSelection,
dropdownCssClass: "bigdrop"
});
formatResult:
var formatUserResult = function(data) {
var optgroup = "";
var users = "";
if (data.name !== undefined) {
data.users.forEach(function(e) {
users += "<li class='select2-results-dept-1 select2-result select2-result- selectable'>" +
"<div class='select2-result-label'>" +
"<span class='select2-match'></span>"+
e.firstname +
"</div>" +
"</li>";
});
optgroup += "<div class='select2-result-label'>" +
"<span class='select2-match'></span>" +
data.name + "</div>" +
'<ul class="select2-result-sub">' + users + '</ul>';
}
return optgroup;
}
The problem is that optgroup must have class: 'select2-result-unselectable'
Dunno what to do with it.

show records in Angularjs - newbie

This is a real newbie question:
I have a view for my index in Rails in erb:
<div ng-app="Donor">
<div ng-controller="DonorCtrl">
<ul>
<li ng-repeat="donor in donors">
{{donor}}
</li>
</ul>
</div>
</div>
my Donor json returned from Rails is:
class DonorSerializer < ActiveModel::Serializer
attributes :id, :tools_id, :first_name, :last_name
end
My javascript file has this;
var app;
app = angular.module("Donor", ["ngResource"]);
// separate view to Add new donors
$scope.addDonor = function() {
var donor;
donor = Entry.save($scope.newDonor);
$scope.donors.push(entry);
return $scope.newDonor = {};
};
$scope.showDonors = function() {
var Donor = $resource("/donors", {
update: {
method: "GET"
}
});
return $scope.donors = Donor;
}
this.DonorCtrl = function($scope, $resource) {
var Donor;
Donor = $resource("/donors/:id", {
id: "#id"
}, {
update: {
method: "PUT"
}
});
return $scope.donors = Donor.query();
};
How do I get a list of donors to in my index view?
I am missing something
One of your first issues was that you did not have the right code inside of the controller. I also turned your $resource's into factory's. I changed the Donors update method to 'PUT' since you have an 'addDonor' method.
Make sure you also have the proper libraries setup for angularjs. For this you will need:
angular.js
angular-resource.js
The altered Javascript:
var app;
app = angular.module("Donor", ["ngResource"]);
app.factory("Donors", [
"$resource", function($resource) {
return $resource("/donors", {}, {
update: {
method: "PUT"
}
});
}
]);
app.factory("Donor", [
"$resource", function($resource) {
return $resource("/donors/:id", {
id: "#id"
}, {
update: {
method: "GET"
}
});
}
]);
this.DonorCtrl = [
"$scope", "Donor", "Donors", function($scope, Donor, Donors) {
var donor;
$scope.donor = Donor.query();
$scope.donors = Donors.query();
$scope.addDonor = function() {};
donor = Donor.save($scope.newDonor)(function() {
return $scope.donors.push(donor);
});
return $scope.newDonor = {};
}
];
Since you are using rails, here is the coffeescript version (I find it elegant in combination with angularjs):
app = angular.module("Donor", ["ngResource"])
app.factory "Donors", ["$resource", ($resource) ->
$resource("/donors", {}, {update: {method: "PUT"}})
]
app.factory "Donor", ["$resource", ($resource) ->
$resource("/donors/:id", {id: "#id"}, {update: {method: "GET"}})
]
#DonorCtrl = ["$scope", "Donor", "Donors", ($scope, Donor, Donors) ->
$scope.donor = Donor.query()
$scope.donors = Donors.query()
$scope.addDonor = ->
donor = Donor.save($scope.newDonor) ->
$scope.donors.push donor
$scope.newDonor = {}
]
I would checkout EggHead.io for a better understanding of how to setup your angular javascript files.

Resources