I am having trouble displaying results as suggestions on entering text in input box.
<input type="text" id="search_country" class="form-control" placeholder="Add country">
Below is my typeahead code:
$('#search_country').typeahead({
name: 'countries',
valueKey: 'name',
remote: {
url: '/user/countries/%QUERY',
filter: function (parsedResponse) {
return parsedResponse;
}
}
});
I am getting json response in the below format:
[{"image": "india.jpeg", "name": "India"},
{"image": "germany.jpeg", "name": "Germany"}]
However the results are not showing up as suggestions below input box.
Rather in console I am finding an error similar to error given below:
Uncaught TypeError: Cannot use 'in' operator to search for '14771' in
[{"image": "india.jpeg", "name": "India"},
{"image": "germany.jpeg", "name": "Germany"}]
Where am I going wrong?
I want the result to contain a list of countries with each list item having image at left and name at right.
In your example the filter is doing nothing, I would remove it.
Related
Good day,
I have a datatable with the jQuery plugin that makes it editable and transform to text all the table rows.
Need to create a dropdown menu to select and store on database what is selected.
Everything is fine, since the plugin have an option to create a row with select options, the problem here is that the field that i have on the database is based on VARCHAR and the plugin only stores data with ENUM on the selected dropdown field.
So i cannot change the database field to ENUM because its going to delete or alter the already exixting data and could be a problem.
Example of what i see when i click on EDIT and see the dropdown options:
When i hit on SAVE button it shows this on the database:
This happens because the column type on the database is VARCHAR and the plugin needs it to be ENUM to read the data as text.
This is the code to draw the table and the edit plugin data:
$(document).ready(function(){
var dataTable = $('#tabla_clientes').DataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
},
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fectch.php",
type:"POST"
}
});
$('#tabla_clientes').on('draw.dt', function(){
$('#tabla_clientes').Tabledit({
url:'action.php',
deleteButton: false,
autoFocus: false,
buttons: {
edit: {
class: 'btn btn-sm btn-primary',
html: '<span class="glyphicon glyphicon-pencil"></span>   Editar',
action: 'edit'
}
},
dataType:'json',
columns:{
identifier : [0, 'id_customer'],
editable:[[1, 'customerID'], [2, 'RFC'], [3, 'firstname'], [4,'lastname'],[5,'email'],[6, 'tipo_cliente','{"1":"CONTADO","2":"CREDITO"}']]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
}
});
});
I already did some research on the internet but i cannot find anyone with a solution or with this problem.
Like i said, i cannot simply change the field to ENUM because there is a LOT of information that may be changed or deleted because of the type change.
Does anyone know a solution to store the value as text with the VARCHAR type when selecting the dropdown info?
Thanks for the time and patience. Have a excelent day.
I already found a workaround very simple for this.
Instead of adding directly the value as number on database.
Added an IF to compare the number and store text on a variable.
$tipo_cliente = $_POST['tipo_cliente'];
$sitio = $_POST['sitio']
if ($tipo_cliente == 1) {
$tipo_cliente = 'CONTADO';
} else
{
$tipo_cliente = 'CREDITO';
}
I am using vuetify and an I'm trying to populate a select box...
...using this JSON Object:
[
{
"configurator": {
"group": {
"property": [
{
"id": "STATUS",
"value": [
{
"id": "OK",
"text": "OK"
},
{
"id": "NOK",
"text": "not OK",
"selected": "true"
}
]
}
]
}
}
}
]
...and I'm trying to render this component:
<v-list v-for="(item, i) in jsonObjPruef.configurator.group.property" :key="i">
<v-select
v-model="item.value"
:items="item.value"
:label="item.text"
/>
</v-list>
Page loads without warnings and errors and I can select from the expected values ("OK", "not OK").
While choosing e.g. "OK" the following warning is displayed:
[Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got String with value "OK".
And now if I'm trying to select again I only can pick the value I chose before ("OK").
The select option entries are only shown on the first select attempt.
Any idea what I'm missing here?
tl;dr: v-model means: "where user selection is saved". If you save it over the same exact property which holds your options, the options are gone and the <v-select> is broken.
v-model replaces jsonObjPruef.configurator.group.property with the selected option, when you select it. Which makes the <v-select> no longer have items.
You should specify a different v-model - a model property in which you store the selection, (i.e: results):
<v-list v-for="(item, i) in jsonObjPruef.configurator.group.property" :key="i">
<v-select
v-model="results[i]"
:items="item.value"
:label="item.text"
/>
</v-list>
In data, you need to initialize results : {}.
Now results will hold the selected results and you can place a watcher on it to trigger additional functionality when it changes. It doesn't have to be an object, it could be an array. It depends on what you currently have.
Obviously, you can rename results to something less generic, which makes more sense in your specific example.
If you need more help, please add a mcve.
I'm building a small application in vuejs 2 where I'm using v-select package for select box, Problem I'm facing is:
I've declared v-select in my component something like this:
<div class="form-group"><label class="col-sm-2 control-label">Company name:</label>
<div class="col-sm-6">
<v-select :options="companyOptions" v-model="company_name" :on-search="getOptions" placeholder="Company name"></v-select>
</div>
</div>
So accordingly I'm having data defined as company_name, and I'm calling an axios event to get the searchable data, while the component is being loaded I'm calling index data of first 50 set for initial selection and if anybody types then I'm calling a function getOptions to get data related to the input, now suppose if somebody selects any data and then removes it again from the selection and again search with key press event the searchable data is not displayed, I can see that my axios call is working fine and I'm able to get the relevant data. but it is not displaying in dropdown as it says:
Error in render function: "TypeError: Cannot read property 'label' of null"
Which is coming from the company_name model which was selected. Following is my code in codepen
In this my axios is not working as it says mixed content:
https://codepen.io/anon/pen/Bdeqam?editors=1011' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://connect.stellar-ir.com/api/companies'. This request has been blocked; the content must be served over HTTPS.
So I'm unable to explain properly in this code set. But my code looks same as declared in codepen.
Help me out in this.
The error is because your computed values are undefined and undefined is not a string, so no string methods (toLowerCase()) are available. The response.data.model.data must look like this:
[
{
id: 1234,
name: 'example'
}, {
id: 12345,
name: 'example2'
}
]
if you get an object instead of an array push it to the array: this.serverData.push(response.data.model.data)
Replace your axios call with:
this.serverData = [
{
id: 1234,
name: 'example'
}, {
id: 12345,
name: 'example2'
}
]
to test it.
In your getOptions() method you calling loading(true or false), but your fetchIndexData() method has an asynchronous axios call. Use async/await, a callback function or a promise chain to wait for the data and show the loading indicator correctly.
On every keypress an request is send to the server i would recommend to use a debounce function.
Tipp
Line 42: https://stackoverflow.com/a/42028776/6429774
axios.post('http://connect.stellar-ir.com/api/companies', searchData).then(response => {
if(response.status === 200)
{
this.serverData = response.data.model.data
}
}).catch(error => {
console.log(error)
});
I am trying to search details when i give a category or task in drop down.
The name of the particular form using dijit/form/Form that does the searching is searchForm.
I have converted the entries into json and trying to post these details using dojo ajax. When I try this,I am not getting the dropdown and I am getting a text box instead.
dojo.xhrPost({
url: "/filter.q4",
postData: dojo.formToJson("searchForm");
headers : {
"Content-Type" : "application/json,charset=utf-8"
},
load: function(response,ioargs) {
alert('success');
},
error : function(response,ioargs) {
alert('error');
}
});
How can I solve this problem?
Your obvious error is here:
postData: dojo.formToJson("searchForm");
Note the trailing semicolon? That's your problem. You want a comma, instead:
postData: dojo.formToJson("searchForm"),
This should get you past your immediate issue.
I get the message when trying to populate my table. Here's the simplified code.
$("#showUsers").on("click", function() {
$.ajax({
url: "/showUsers",
contentType: "application/json",
processData: false,
complete: function(data) {
$("#output").html(data.responseText);
$("#example").dataTable({
"aaData": data,
"aoColumns": [{
"sTitle": "Name",
"mDataProp": "name",
"sDefaultContent": ""
}, {
"sTitle": "Movie",
"mDataProp": "movie",
"sDefaultContent": ""
}]
});
}
});
});
And
<table id="example">
<thead>
<th>name</th>
<th>movie</th>
</thead>
</table>
The data is assigned valid json:
[{
"name": "Dan",
"movie": "Amelie"
}, {
"name": "Rob",
"movie": "Dungeon"
}]
I've read that sometimes it messes with the table itself and the headers and stuff so I tried removing the <thead> from my table definition but it results with the same issue.
Funny thing is that, if I replace "aaData":data with "aaData": plus the json itself, it works. But I can't make data fill the requirements needed by DT.
The ajax data comes from a node-mysql module which is working properly.
If I change data to data.responseText (this is the json as shown before) I get the warning requested unknown parameter 'name' from the data source for row 0.
I know this should be fairly simple for any not-so experienced DataTables user so thanks in advance. Somehow I'm being unable to sort it out.
SOLVED
The MySQL response comes with a data.responseJSON which is a working format to give to aaData. Thanks.
For the sake of flagging the question as awnsered.
SOLVED.
The mysql response comes with a data.responseJSON which is a working format to give to aaData. Thanks.
Just got wondering why my dataTable was not filling.
In addition to the correct json format needed with aaData, iTotalRecords and iTotalDisplayRecord, aaData needs to be an array (['a', 'b', ...]) and not an object ({'a': 'b', ...}).