Has anyone succeeded in getting x-editable to work with select2, using ajax?
I have succeeded in populating the autocomplete using an ajax request, but when the user selects an option, the x-editable link reads "empty" onblur.
My code is as follows:
<a id='elem' data-type='select2'></a>
<script>
$('#elem').editable({
select2: {
placeholder:'provide a name',
allowClear: true,
minimumInputLength: 1,
query: function(query){
$.ajax({
url: '/usage/users',
dataType: 'json',
data: {
full_name: query.term,
select: ['id', 'first_name', 'last_name', 'middle_name']
}
}).done(function(data){
results = []
for (i in data)
results.push({
text: data[i].full_name,
id: data[i].id
});
query.callback({results:results});
});
}
}
});
</script>
Related
I need to pass value from select2 to javscript. But its not working.
this is my html code
<select class="txtTeamAddDelete form-control" name="itemName"></select>
</div>
<button type="button" class="btnrowAddDelete">Add New Row</button>
This is my javascript select2
<script type="text/javascript">
$('.txtTeamAddDelete').select2({
placeholder: 'Select an item',
ajax: {
url: "{{route('meeting.list-meeting.dataAjax')}}",
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.name,
id: item.id,
email: item.email
}
})
};
},
cache: true
}
});
</script>
this is js for display select2 data
$(document).ready(function(){
$('.btnrowAddDelete').click(function(){
var txtTeamAddDelete = $('.txtTeamAddDelete').find(':selected').text();
$('.TableAddDelete tbody').append("<tr><td>"+txtTeamAddDelete+"</td><td>"+email+"</td></tr>");
});
});
its working to fetch name data but not email. I want to fetch two data: email & name. i already tried this
var txtTeamAddDelete = $('.txtTeamAddDelete').select2('val',["name", "email"]);
but it return undefined
i want to show it like this. can someone help me. Thanks!
I am using the select2 library.
My select2 element can search the database for each tag via the ajax and that works fine.
My issue is, I want the user to also be able to create a new tag. Looking at their documentation I should use the createTag option; however, this fires as soon as I click into the element and on each key press.
Can anyone offer any guidance on how I can achieve my goal?
here is my code thus far
I am using ajax top search for tags but I would also like to create new tags to the database. I have tried doing this via createTag but this seems to be firing as soon as I click in the HTML element and on each key press.
Here is my code:
$('.tags').select2({
tags: true,
placeholder: "These tags will apply to all lines",
tokenSeparators: [','],
ajax: {
url: '/api/tags/find',
dataType: 'json',
data: function (params) {
return {
q: $.trim(params.term)
};
},
processResults: function (data) {
return {
results: data
}
},
cache: true,
},
createTag: function(params) {
alert('tag created') // This is were I would put my ajax POST.
}
});
After reading the documentation again, I can see I should have been using the events https://select2.org/programmatic-control/events
I used the createTag option to assign newTag: true to newly created tags and used the select2:selected event which checked if a new tag had been selected and, if it was, sent an ajax request to the server to create that tag.
$('.tags').select2({
tags: true,
placeholder: "These tags will apply to all lines",
minimumInputLength: 3,
tokenSeparators: [','],
ajax: {
url: '/api/tags/find',
dataType: 'json',
data: function (params) {
return {
q: $.trim(params.term)
};
},
processResults: function (data) {
return {
results: data
}
},
// cache: true,
},
createTag: function(params) {
let term = $.trim(params.term);
if (term.length < 3)
{
return null
}
return {
id: term,
text: term,
newTag: true,
}
},
});
$('.tags').on('select2:select', function (e) {
let tag = e.params.data;
if (tag.newTag === true)
{
axios.post('/api/newtag', {
name: tag.text,
type: 'default',
})
}
});
I am trying to write a test for a Javascript select2 control and I would like to automatically select the first item. Since it's using ajax I do not know what the first item is. All the examples I have seen create <option> however they assume knowledge of the value. How can I select the first item without knowledge? (Note this example only runs the ajax command after 3 items are entered).
var $selector = $("#foo");
$selector.show().select2({
allowClear: true,
placeholder: "--------",
minimumInputLength: 3,
ajax: {
url: "...",
type: 'GET',
dataType: 'json',
delay: 250,
data: function(term, page) {
return {
number__icontains: term
};
},
results: function(data) {
return {
results: $.map(data.objects, function(option) {
return {
'id': option.id,
'text': option.desc
};
})
};
},
cache: false
},
initSelection: function(element, callback) {
...
}
});
I'm using Select2 Ajax to apply autocomplete on my html select
this is the select2 code :
<script>
$(function(){
$(".marques-multi").select2({
minimumInputLength: 3,
tags: [],
ajax: {
url: "user/marques",
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return term;
},
processResults: function (data) {
return {
results: data
};
},
transport: function (params, success, failure) {
var $request = $.ajax(params);
$request.then(success);
$request.fail(failure);
return $request;
}
}
});
});
</script>
and this is my html :
<select class="form-control input-sm marques-multi" name="marque"></select>
and this is what the URL : "user/marques" with the data (www.mywebsite.com/user/marques/marques?term=nike) returns :
[
{"id_marque":"50670","marque_name":"NIK HUBER GUITARS"},{"id_marque":"50671","marque_name":"NIKALAS CATLOW"},{"id_marque":"1","marque_name":"NIKE"},{"id_marque":"50672","marque_name":"NIKE"},
{"id_marque":"50673","marque_name":"NIKE"},{"id_marque":"50674","marque_name":"NIKE 6.0"},{"id_marque":"50675","marque_name":"NIKE ACCESSORIES"},{"id_marque":"50676","marque_name":"NIKE ACG"},{"id_marque":"50677","marque_name":"NIKE ACTION SPORTS"},{"id_marque":"50678","marque_name":"NIKE AIR MAX"},{"id_marque":"50679","marque_name":"NIKE BAIN"}
]
when I write as example nik in the select input i see in the console that the requests returns this json bellow with no errors but the select doesn't get fill with this data it stays blank.
If possible, change your data properties on JSON from id_marque and marque_name to id and text instead.
So from:
[
{"id_marque":"50670","marque_name":"NIK HUBER GUITARS"},{"id_marque":"50671","marque_name":"NIKALAS CATLOW"},{"id_marque":"1","marque_name":"NIKE"},{"id_marque":"50672","marque_name":"NIKE"},
{"id_marque":"50673","marque_name":"NIKE"},{"id_marque":"50674","marque_name":"NIKE 6.0"},{"id_marque":"50675","marque_name":"NIKE ACCESSORIES"},{"id_marque":"50676","marque_name":"NIKE ACG"},{"id_marque":"50677","marque_name":"NIKE ACTION SPORTS"},{"id_marque":"50678","marque_name":"NIKE AIR MAX"},{"id_marque":"50679","marque_name":"NIKE BAIN"}
]
To:
[{"id":"50670","text":"NIK HUBER GUITARS"},{"id":"50671","text":"NIKALAS CATLOW"},{"id":"1","text":"NIKE"},{"id":"50672","text":"NIKE"},
{"id":"50673","text":"NIKE"},{"id":"50674","text":"NIKE 6.0"},{"id":"50675","text":"NIKE ACCESSORIES"},{"id":"50676","text":"NIKE ACG"},{"id":"50677","text":"NIKE ACTION SPORTS"},{"id":"50678","text":"NIKE AIR MAX"},{"id":"50679","text":"NIKE BAIN"}];
Fiddle
My requirement is exactly as shown by this jQuery plugin:
But the only problem is I want to do it in Alloy-UI 2.5 in Liferay 6.2. I am able to have single input with the following script:
<aui:script>
AUI().use('autocomplete-list','aui-base','aui-io-request','autocomplete-filters','autocomplete-highlighters',function (A) {
A.io.request('<%= serveResourceTestURL %>',{
dataType: 'json',
method: 'GET',
on: {
success: function() {
new A.AutoCompleteList(
{
allowBrowserAutocomplete: 'false',
activateFirstItem: 'true',
inputNode: '#<portlet:namespace/>testNode',
resultTextLocator: 'name',
resultHighlighter:'phraseMatch',
resultFilters: ['startsWith'],
minQueryLength: 2,
maxResults: 10,
render: 'true',
source:this.get('responseData'),
});
}
}
});
});
</aui:script>
with alloy-ui 1.7 we used to have 2 more attributes delimChar: ',', & typeAhead: true, for multiple input fields. Are there any equivalents to these?
It would be a great help if somebody can modify the above script to have multiple inputs or some ideas in the correct direction.
Thanks!
In Alloy 2.X delimChar: ',' is changed with queryDelimiter : ','
and following attributes have been removed:
typeAhead
schema
schemaType
Using it as follows will work:
AUI().use('autocomplete-list','aui-base','aui-io-request','autocomplete-filters','autocomplete-highlighters',function (A) {
A.io.request('<%= serveResourceTestURL %>',{
dataType: 'json',
method: 'GET',
on: {
success: function() {
new A.AutoCompleteList(
{
allowBrowserAutocomplete: 'false',
activateFirstItem: 'true',
inputNode: '#<portlet:namespace/>to',
resultTextLocator: 'name',
resultHighlighter:'phraseMatch',
resultFilters: ['startsWith'],
minQueryLength: 2,
maxResults: 10,
queryDelimiter : ',',
render: 'true',
source:this.get('responseData')
});
}
}
});
});