The list is being filtered properly but the label is showing as undefined. When I select the item, the value is binded.
Below is my code along with the screenshots:
$(document).on('ready',function(){
$('#search').autocomplete({
source: function(req,res) {
$.ajax({
url: "/search",
dataType: "json",
type: "GET",
data: {
term: req.term
},
success: function(data) {
res($.map(data, function(item) {
return {
label: item.name,
value: item.id
};
}));
},
error: function(xhr) {
alert(xhr.status + ' : ' + xhr.statusText);
}
});
},
select: function(event, ui) {
}
});
});
Before Selection
After selection
I tried debugging the label and value using alert function. The values are perfect. I'm unable to figure out the error.
item.name
item.id
Here is the callback response:
[
{
"id":"1",
"name":"Android"
},
{
"id":"2",
"name":"Akira"
},
{
"id":"3",
"name":"Andy"
},
....
]
You are returning different property names in ajax success function.
Can you try to use these property names instead.
[
{
"label":"1",
"value":"Android"
},
....
]
$.ajax({
url: "url",
type: 'POST',
data: {
},
success: function (res) {
//console.log(res);
var obj = JSON.parse(res);
$('#od').html('<option value=""> Select</option>');
for (var i = 0, len = obj.length; i < len; i++){
$('#id').append('<option value='+ obj[i].item_id +'> '+ obj[i].item_name +'</option>');
}
}
});
here is my code for get all option you can try this
Related
I was trying to reuse an object property in a loop. Is this the right way? I'm always getting an undefined error. The properties I want to use are 'field_id' and 'field_text'. I'm not sure if it should be defined as a variable or a string.
Below is my full code:
var client_id = '', company_name = '', vacancy_category_id = '', category_name = '', user_id = '', full_name = '';
let select2El = {
params: [{
'id': '#client_id',
'url': '/consultant/vacancy/get-clients',
'field_id': client_id,
'field_text': company_name,
'success_response': $scope.clients
}, {
'id': '#clone_client_id',
'url': '/consultant/vacancy/get-clients',
'field_id': client_id,
'field_text': company_name,
'success_response': $scope.clients
}, {
'id': '#category_id',
'url': '/consultant/vacancy/get-categories',
'field_id': vacancy_category_id,
'field_text': category_name,
'success_response': $scope.categories
}, {
'id': '#owner_id',
'url': '/consultant/vacancy/get-users-by-type',
'field_id': user_id,
'field_text': full_name,
'success_response': $scope.users
}]
}
for (var key in select2El.params) {
var sel = select2El.params[key];
angular.element(sel['id']).select2({
width: '100%',
placeholder: '--Select--',
ajax: {
url: sel['url'],
dataType: 'json',
data: function (params) {
return {
search: params.term,
page: params.page || 1
}
},
processResults: function (response, params) {
params.page = params.page || 1;
return {
results: response.data.map(function (res) {
console.log(res);
return { id: res.sel['field_id'], 'text': res.sel['field_text'] }
}),
pagination: {
more: (params.page * 10) < response.total
}
};
},
success: function (response) {
sel['success_response'] = response.data;
}
}
});
}
The line where the object property has been looped over is this:
return { id: res.sel['field_id'], 'text': res.sel['field_text']
When I console.log(res), I get this data.
This is happening because your res.sel field is undefined. From what I understand you want the value field_id and field_text from the object stored in select2El.params.
Try the following code -
var client_id = '', company_name = '', vacancy_category_id = '', category_name = '', user_id = '', full_name = '';
let select2El = {
params: [{
'id': '#client_id',
'url': '/consultant/vacancy/get-clients',
'field_id': client_id,
'field_text': company_name,
'success_response': $scope.clients
}, {
'id': '#clone_client_id',
'url': '/consultant/vacancy/get-clients',
'field_id': client_id,
'field_text': company_name,
'success_response': $scope.clients
}, {
'id': '#category_id',
'url': '/consultant/vacancy/get-categories',
'field_id': vacancy_category_id,
'field_text': category_name,
'success_response': $scope.categories
}, {
'id': '#owner_id',
'url': '/consultant/vacancy/get-users-by-type',
'field_id': user_id,
'field_text': full_name,
'success_response': $scope.users
}]
}
for (let key in select2El.params) {
let sel = select2El.params[key];
angular.element(sel['id']).select2({
width: '100%',
placeholder: '--Select--',
ajax: {
url: sel['url'],
dataType: 'json',
data: function (params) {
return {
search: params.term,
page: params.page || 1
}
},
processResults: function (response, params) {
params.page = params.page || 1;
return {
results: response.data.map(function (res, index) {
console.log(res);
return { id: sel['field_id'], 'text': sel['field_text'] }
}),
pagination: {
more: (params.page * 10) < response.total
}
};
},
success: function (response) {
sel['success_response'] = response.data;
}
}
});
}
I used index inside .map to fetch the values of field_text and field_id from the original object
First I want to create a simple array with data from input
And I want to do a loop and create an array with the line from the table.
some code here.
var first_array = {
"warehouse": $("#warehouse").val(),
"pricelist": $("#pricelist").val(),
"date": $("#date").val(),
"docstatus": "DR",
"paymentterm": $("#paymentterm").val()
}
var second_array = []; //Thanks to sagar1025 help create the second array
$("#table_main tbody > tr").each(function() {
var celdas = $(this).find('td');
second_array.push({
"line": $(celdas[0]).html(),
"code": $(celdas[1]).html()
});
});
/*Here my ajax*/
$.ajax({
data: {
array1: first_array,
array2: second_array
},
url: "<?php echo base_url() ?>main/save_data",
type: 'POST',
async: false,
cache: false,
success: function(response) {
},
error: function() {
toastr.error('ERROR', '', {
progressBar: true,
closeButton: true
});
}
});
Now I need to loop the second array in my php file
Here is how I declare one var from the first_array
$docstatus = trim($this->input->post('array1[docstatus]', TRUE));
$array = $this->input->post('array2[]', TRUE);
Im using codeigniter
This is how you push or add multiple objects to an array
var second_array = [];
$("#table_main tbody > tr").each(function() {
var celdas = $(this).find('td');
second_array.push({
"line": $(celdas[0]).html(),
"code": $(celdas[1]).html()
});
});
The Ajax call should be like something like this:
$.ajax({
data: {
array1: first_array,
array2: second_array
},
url: "<?php echo base_url() ?>main/save_data",
type: 'POST',
async: false,
cache: false,
success: function(response) {
},
error: function() {
toastr.error('ERROR', '', {
progressBar: true,
closeButton: true
});
}
});
I think you are confusing between arrays and object, arrays are denoted with [] example var array=[1,2,3,4] objects are denoted with {} ex: var Obj={color:"red"}
you could send an object in your ajax call that contains both arrays or both objects depending on what you want so for instance you could do something like:
var globobj={}
var first_object= {
"warehouse": $("#warehouse").val(),
"pricelist": $("#pricelist").val(),
"date": $("#date").val(),
"docstatus": "DR",
"paymentterm": $("#paymentterm").val()
}
var second_object= {
"line": $(celdas[0]).html(),
"code": $(celdas[1]).html()
}
globobj.first_object=first_object
globobj.second_object=second_object
so now that your objects are both combined you could use the globobjto make you ajax call
In order to load some data from the server after the page has loaded I have the following script:
<script>
export default {
data() {
return {
imageDirectory: "../../images/",
fileName: "img",
extension: ".png",
products:
[
{
name: 'loading data',
imageUrl: require("../../assets/t1.png")
}
]
}
},
name: "ProductList",
created: function () {
this.fetchData();
},
methods: {
fetchData: function () {
$.ajax({
type: "GET",
timeout: 1200000,
url: 'api/test',
contentType: "application/json",
dataType: "text",
success: function (data) {
window.alert(data);
this.products = [{
name: 'success' + 'test',
imageUrl: require("../../assets/t1.png")
}] },
error: function (data) {
this.products = [{
name: 'failed' + 'test',
imageUrl: require("../../assets/t1.png")
}]
}
});
}
}
}
</script>
Now when I run this I do get the alert window showing me that it did indeed fetch the data, however, it does not actually manage to update the object in question (product name remains loading data and not success test). If I move the code
this.products = [{
name: 'success' + 'test',
imageUrl: require("../../assets/t1.png")
}]
into the created: function() like so:
created: function () {
this.products = [{
name: 'success' + 'test',
imageUrl: require("../../assets/t1.png")
}]
this.fetchData();
}
it does actually update the data. So this means that both the code to fetch the data is accurate and the placeholder to update the data is functional, so why is the data not getting updated?
(note that the code to update the data is a placeholder).
in your fetchData function you have used 'this' keyword inside $.ajax() which can confuse compiler to which object you are referring so why not try this:
fetchData: function () {
let app = this;
$.ajax({
type: "GET",
timeout: 1200000,
url: 'api/test',
contentType: "application/json",
dataType: "text",
success: function (data) {
window.alert(data);
app.products = [{
name: 'success' + 'test',
imageUrl: require("../../assets/t1.png")
}] },
error: function (data) {
app.products = [{
name: 'failed' + 'test',
imageUrl: require("../../assets/t1.png")
}]
}
});
}
I am trying to achieve this following scenario :
As file Object are getting posted through but in string format, how can i get file objects into php file.
Passed data:
Array (7)
0 {name: "title", value: "ABC"}
1 {name: "lat", value: "4.627044746156027"}
2 {name: "lng", value: "3.724853515625"}
3 {name: "area_id", value: "1"}
4 {name: "_token", value: "7G643pPBJxxEkfaXrYkZq7e3sBcdQjcmekoPVRAB"}
5 {name: "file[]", value: File}
6 {name: "file[]", value: File}
Returned data:
["[object File]", "[object File]"]
I need to parse the files into laravel but unable to get the file object values.
note: i want to achieve this without FormData.
following is the code to pass data:
function ajaxRequest(postUrl, method, postData) {
postData.push({name: '_token', value: $('meta[name="csrf-token"]').attr('content')});
if(files !== undefined) {
$.each(files, function(i, file) {
postData.push({name: 'file[]', value: file});
});
}
console.log(postData);
$.ajax({
url: dataUrl + postUrl,
method: method,
data: postData,
success: function(data) {
console.log(data);
// eval('toastr.' + data.class + '("' + data.message + '")');
// window.setTimeout(function() { location.reload(); }, 2000)
},
error: function() {
toastr.error("An error occured, please try again.");
}
});
}
I am trying to create a real-time filter on a table using knockoutjs.
I have managed to get everything to work when I statically create the observable array like this:
$(function() {
var assets = [
{id: "1", poster: "Pic010.jpg", name: "Asset1", category: "category1", type: "Movie", popup: "1" },
{id: "2", poster: "Pic06.jpg", name: "Asset2", category: "category2", type: "Movie", popup: "2" },
{id: "3", poster: "Pic04.jpg", name: "Asset3", category: "category1", type: "Pop-up", popup: "3" },
{id: "4", poster: "Pic07.jpg", name: "Asset4", category: "category2", type: "Pop-up", popup: "4" },
{id: "5", poster: "Pic011.jpg", name: "Asset1", category: "category3", type: "Promo", popup: "5" }
];
var viewModel = {
assets: ko.observableArray(assets),
query: ko.observable(''),
search: function(value) {
viewModel.assets.removeAll();
for(var x in assets) {
if(assets[x].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
viewModel.assets.push(assets[x]);
}
}
}
};
viewModel.query.subscribe(viewModel.search);
ko.applyBindings(viewModel);
});
JSFiddle of working code: http://jsfiddle.net/7ZLdk/1/
Now when I try to load the observable array data via ajax like this:
var assets = [];
$.ajax({
url: '/Assets/getJson/',
type: "GET",
dataType: 'json',
success: function (data) {
console.log(data);
viewModel.assets(data);
}
});
the data is displayed correctly in the table when the page is loaded, but when I start typing in the search input, all the data disappears.
I would appreciate it if someone could explain what I am doing incorrectly in the AJAX load? TIA
You are better off creating a ViewModel function, so the viewmodel only accesses data within itself:
$(function() {
$.ajax({
url: '/Assets/getJson/',
type: "GET",
dataType: 'json',
contentType: "application/json",
success: function (data) {
console.log(data);
var viewModel = new ViewModel(data);
ko.applyBindings(viewModel);
}
});
});
function ViewModel(assets) {
var self = this;
self.assets = ko.observableArray(assets);
self.allAssets = assets;
self.query = ko.observable('');
self.search = function(value) {
self.assets.removeAll();
for(var x in self.allAssets) {
if(self.allAssets[x].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
self.assets.push(self.allAssets[x]);
}
}
};
self.query.subscribe(self.search);
}
I have resolved the problem.
I was not populating the assets array. This is the updated ajax call:
$.ajax({
url: '/Assets/getJson/',
type: "GET",
dataType: 'json',
contentType: "application/json",
success: function (data) {
console.log(data);
viewModel.assets(data);
assets = data; // THIS WAS MISSING
}
});