I am trying to use typeahed twitter for bootstrap
https://github.com/twitter/typeahead.js
I need to change the remote dynamically according to what user types in and ANOTHER parameter.
(The goal is to retrieve the cities of a country)
trying with country="en"; does not affect it
trying with autocompleter.remote=".."; does not work.
Any idea ?
<script>
var country="fr";
var autocompleter = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: 'ajax.php?action=getVilles&country='+country+'&ville=%QUERY'
});
autocompleter.initialize();
$('#city').typeahead(null, {
name: 'city',
displayKey: 'city',
source: autocompleter.ttAdapter()
});
</script>
This is what I've done:
var tagStudies = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "autocomplete/study",
replace: function(url, uriEncodedQuery) {
study = $('#study').val();
ssp = $("#social-security").val();
return url + '?q=' + uriEncodedQuery + '&s=' + study + '&ssp=' + ssp
},
filter: function (parsedResponse) {
return parsedResponse.studies;
}
}
});
Take a look at the replace function. The first parameter is the url, and the second is what the user is typing. I made a concatenation to pass the query and 2 extra params.
If you copy the code, make sure you replace 'text' for 'value' in datumTokenizer. Hope it helps
Related
hello in vuejs I want to separate the amount of money with a comma and a period, how can I do it with filter?
I want the currency to be like this.
<p>1.000<span>,00</span></p>
I want the part separated by comma to be gray like in the image
Vue.filter('toTL', function (value) {
return new Intl.NumberFormat('tr-TR', { currency: 'TRY', minimumFractionDigits: 2}).format(value);
});
An easy solution would be to let the filter output the HTML:
<p class="amount" v-html="$options.filters.toTL(attributes.gross_total)" />
The filter can be written like so:
Vue.filter('toTL', function (value) {
let formatted = new Intl.NumberFormat('tr-TR', { currency: 'TRY', minimumFractionDigits: 2}).format(value);
let arr = formatted.split(',');
return arr[0] + '<span>,' + arr[1] + '</span>';
});
Links:
String.prototype.split documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
Also see this StackOverflow question:
VueJS2 v-html with filter
I am trying something very simple in Vue and can't get it to work.. I want my API url to update with 2 new values (valueFrom and valueTwo). I am using fetch for this.
When I console log the values, they work (2021-06-17 etc). But as soon as I put them in the url, it just comes up empty.
Here are my input fields:
<label for="dateFrom" class="mr-sm-2">From</label>
<b-form-datepicker id="dateFrom" v-model="valueFrom" class="mb-2 mr-sm-4 mb-sm-0 w-25" :min="min" :max="max"></b-form-datepicker>
<label for="dateTo" class="mr-sm-2">To</label>
<b-form-datepicker id="dateTo" v-model="valueTo" class="mb-2 mr-sm-4 mb-sm-0 w-25" :min="min" :max="max"></b-form-datepicker>
Here is the button that calls the fetch:
<b-button variant="primary" #click="$fetch()">Search</b-button>
Here is my Vue code:
data() {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const minDate = new Date(today);
const maxDate = new Date(today);
maxDate.setMonth(maxDate.getMonth() + 6);
return {
items: {},
valueFrom: '',
valueTo: '',
min: minDate,
max: maxDate
}
},
async fetch() {
const api = 'https://apiurl.com/ajax/locationSearchJSON/?location=Edinburgh&arrival=${this.valueFrom}&arrivalTime=12%3A00&departure={$this.valueTo}&departureTime=12%3A00
this.items = await fetch(api).then(res => res.json())
}
I also tried concating them in the javascript way (' + this.valueFrom + ') but that just rendered an empty string as well...
You can try using the backticks/backquotes (``) in place of the apostrophes. So your url will end up as below:
`https://apiurl.com/ajax/locationSearchJSON/?location=Edinburgh&arrival=${this.valueFrom}&arrivalTime=12%3A00&departure=${this.valueTo}&departureTime=12%3A00`
Also check the second variable this.valueTo has been added to the url correctly. In your case above this is how you've added it:
{$this.valueTo}
It should be:
${this.valueTo}
I am trying to get multi-table with pagination, sorting, filtering in a single component.
I can get pagination for one table, unable to get pagination for multiple tables in a single component.
I also received the data from all tables. I am receiving the data from the backend so it takes a few seconds.
I Couldn't find any multi-data table example in angular7 material
This is my code
displayedColumns: string[] = ['name', 'id', 'products_count', 'domain'];
public dataSource = new MatTableDataSource<PeriodicElement>(this.ELEMENT_DATA);
public NONAR_ELEMENT_DATA: NonARElement[];
displayedColumns1: string[] = ['pro_id', 'name', 'd_image'];
public dataSource1 = new MatTableDataSource<NonARElement>(this.NONAR_ELEMENT_DATA);
#ViewChild('paginator') paginator: MatPaginator;
#ViewChild('paginator1', { read: MatPaginator }) paginator1: MatPaginator;
_setDataSource(indexNumber) {
console.log("indexNumber", indexNumber)
setTimeout(() => {
switch (indexNumber) {
case 0:
!this.dataSource1.paginator ? this.dataSource1.paginator = this.paginator1 : null;
console.log("this.dataSource-NON AR.paginator", this.dataSource.paginator)
break;
case 1:
!this.dataSource.paginator ? this.dataSource.paginator = this.paginator : null;
console.log("this.dataSource-Storelist.paginator", this.dataSource1.paginator)
}
},1000);
}```
Can you share your html page. Have you used this #name in your paginator?
<mat-paginator #paginator length="100"
pageSize="20"
pageSizeOptions="[10,20,30]"
(page)="pageChanged($event)">
</mat-paginator>
#ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
I'm trying to create dropzones programmatically through a function but I receive a element.dropzone is not a function error and I'm not quite sure why. I'm using Vue.js with Element UI
HTML
<div class="toUpload">
<div class="el-upload el-upload--text">
JS
submitMessage (){
return api.createMessage( messageToSend, ( message ) => {
// some code
this.insertAttachments( "toUpload", message.id );
} )
},
insertAttachments ( element, messageId ) {
element.dropzone( {
url: '/messages/' + messageId + '/attachments',
paramName: 'attachment',
previewsContainer: false,
uploadedMultiple: true,
maxfiles: 10,
parallelUploads: 10
} )
The value of element is a String ("toUpload") at the point where you are calling element.dropzone(). To use the dropzone method like that, you need to call it on a jQuery element.
You probably meant something like this:
$('.' + element).dropzone( ...
I'm writing a backup job, and need to fetch all classes in Parse-server, so I can then query all rows and export them.
How do I fetch all classes?
Thanks
Query the schemas collection.
GET /parse/schemas
Probably need to use the masterkey on the query. Not sure what language you're writing your job in but should be simple for you to create a REST query or create a node.js script and use the javascript/node api
--Added after comment below --
var Parse = require('parse/node').Parse;
Parse.serverURL = "http://localhost:23740/parse";
Parse.initialize('APP_ID', 'RESTKEY', 'MASTERKEY');
var Schema = Parse.Object.extend("_SCHEMA");
var query = new Parse.Query(Schema);
query.find({
success : (results) => {
console.log(JSON.stringify(results));
},
error : (err) => {
console.log("err : " + JSON.stringify(err));
}});