I am using select2 plugin. All are working well. but pagination is not working. Showing "Loading more results" at the end & it's disabled. I am confused what I am missing. Please guide. I have the file like:
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js, https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css, https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js.
Here is my code:
$('.itemName').select2({
placeholder : 'Select an item',
ajax : {
url : 'search_ajax.php',
dataType : 'json',
delay : 250,
data : function (params) {
return {
term : params.term || '',
page : params.page || 1
}
},
processResults : function (data, params) {
params.page = params.page || 1;
return {
results : data.results,
pagination : {
more : (params.page * 5) < data.total_count
}
};
},
cache : true
}
});
Here is the json response:
{
"total_count" : "10",
"results" : [{
"id" : "200",
"text" : "Australian National University"
}
]
}
What am I doing wrong? Am I missing some file to include?
Related
I am using select2 dropdown. It's working fine for smaller number of items.
But when the list is huge (more than 40000 items) it really slows down. It's slowest in IE.
Otherwise simple Dropdownlist works very fast, till 1000 records. Are there any workarounds for this situation?
///////////////**** Jquery Code *******///////////////
var CompanypageSize = 10;
function initCompanies() {
var defaultTxtOnInit = 'a';
$("#DefaultCompanyId").select2({
allowClear: true,
ajax: {
url: "/SignUpTemplate/GetCompanies",
dataType: 'json',
delay: 250,
global: false,
data: function (params) {
params.page = params.page || 1;
return {
keyword: params.term ? params.term : defaultTxtOnInit,
pageSize: CompanypageSize,
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.result,
pagination: {
more: (params.page * CompanypageSize) < data.Counts
}
};
},
cache: true
},
placeholder: {
id: '0', // the value of the option
text: '--Select Company--'
},
width: '100%',
//minimumInputLength: 3,
});
}
//////////******* Have to initialise in .ready *******///////////////
$(document).ready(function () {
initCompanies();
});
//////////******* C# code :: Controller is : SignUpTemplateController************/////
public JsonResult GetCompanies(string keyword, int? pageSize, int? page)
{
int totalCount = 0;
if (!string.IsNullOrWhiteSpace(keyword))
{
List<Companies> listCompanies = Companies.GetAll(this.CurrentTenant, (keyword ?? string.Empty).Trim(), false, 11, page.Value, pageSize.Value, ref totalCount, null, null, null, null, null).ToList();
var list = listCompanies.Select(x => new { text = x.CompanyName, id = x.CompanyId }).ToList();
return Json(new { result = list, Counts = totalCount }, JsonRequestBehavior.AllowGet);
}
return Json(null, JsonRequestBehavior.AllowGet);
}
I wanted to create a dynamic context menu based on my server response. The static menu works fine without any issues. The below is my jstree content and it calls customMenu method
$("#myList").jstree({
"core" : {
"animation" : 0,
"check_callback" : true,
//"themes" : "default" ,
'data': {
"data": function (node) {
return { "id": node.id };
}
}
},
"plugins" : [ "search", "contextmenu"],
"contextmenu" : { "items" : customMenu }
});
My customMenu function
function customMenu(node) {
var menuitems=[];
$.ajax({
url : "DynamicMenu",
dataType : 'json',
data: {menu: node.id, node: node.children.length},
error : function() {
alert("Error Occured");
},
success : function(data) {
$.each(data, function(index, value) {
//Want to populate my menu here
});
}
});
// The default set of all items. This works fine
menuitems = {
restartItem: {
label: "Restart",
action: function () {
}
},
stopItem: {
label: "Stop",
action: function () {}
}
};
return menuitems;
}
I tried creating a dynamic menu by using below 2 options, but it didnt help.
menuitems.push()
menuitems.push({restartItem: {
label: "Restart",
action: function () {
}
}});
menuitems[index]={mydata}
menuitems[0] = {restartItem: {
label: "Restart",
action: function () {
}
}};
Both the above options didn't help ? I will replace the values dynamically based on my ajax response. But first I need one this option to work
I am new to elasticsearch. I have a filtered query which gives me correct results using console:
GET _search
{
"query": {
"filtered": {
"query": {
"bool" : {
"should" : [
{
"match" : { "name" : "necklace" }
},
{
"match" : { "skuCode" : "necklace" }
}
]
}
},
"filter": {
"bool" : {
"must" : [
{
"term" : { "enabled" : true }
},
{
"term" : { "type" : "SIMPLE" }
},
{
"term" : { "tenantCode" : "Triveni" }
}
]
}
}
}
}
}
I am unable to get the corresponding spring-data version going. Here is what I tried:
SearchQuery searchQuery = new NativeSearchQueryBuilder().withQuery(boolQuery().should(matchQuery("skuCode", keyword)).should(matchQuery("name", keyword))).withFilter(
boolFilter().must(termFilter("enabled", true), termFilter("type", "SIMPLE"), termFilter("tenantCode", "Triveni"))).build();
This query gives me no results.
Can somebody please help me with this?
NativeSearchQueryBuilder.withFilter is converted to so called post_filter. See Post Filter for more details. So the query you have done on the console differs from the one that is generated by spring-data elasticsearch. To mimic the query from the console you have to use the FilteredQuery instead.
Change your query building to this:
QueryBuilder boolQueryBuilder = boolQuery().should(matchQuery("skuCode", keyword)).should(matchQuery("name", keyword));
FilterBuilder filterBuilder = boolFilter().must(termFilter("enabled", true), termFilter("type", "SIMPLE"), termFilter("tenantCode", "Triveni"));
NativeSearchQueryBuilder().withQuery(QueryBuilders.filteredQuery(boolQueryBuilder, filterBuilder).build();
Although as long as you do not use aggregations, this should not affect the (hits) results.
This is my first post. stackoverflow is a wonderful place for developers. Here is my issue.
I am trying to use Autocomplete in JqGrid Edit Form. i successfully retrieved data from server using ajax call but dont know how to display it in the view. below is my code.
FrontEnd Code:
colModel :[
{name:'prf_articlename', index:'prf_articlename', width:90, editable:true, edittype:'text',
editoptions: {
dataInit:function(e){
$(e).autocomplete({
source: function(request, response,term) {
var param = request.term;
$.ajax({
url: '/Myelclass/AutoCompleteServlet.do?term='+param+"&action="+"artname",
success: function (data) {
response($.map(data, function(item) {
return {
label: item.label,
};
}));//END Success
},
});//END AJAX
},
minLength: 2,
});//END AUOTOCOMPLETE
}//END Dataint
}//END Dataint
},
BackEnd Code:
String term = request.getParameter("term");
List<AutoComplete> articlelist = prfbo.getArticleNameinEditGrid(term);
System.out.println("List Value " +articlelist.size());
JSONArray jsonOrdertanArray = JSONArray.fromObject(articlelist);
System.out.println(jsonOrdertanArray);
out.println(jsonOrdertanArray);
Any one help on this???
This is what I personally use in my project:
Inside colModel:
dataInit: function (elem) { NameSearch(elem) }},
The function:
function NameSearch(elem) {
$(elem).autocomplete({ source: '/Controller/NameSearch',
minLength: 2, autosearch: true,
select: function (event, ui) {
$(elem).val(ui.item.value);
$(elem).focus().trigger({ type: 'keypress', charCode: 13 });
}
})//$(elem).autocomplete
$(elem).keypress(function (e) {
if (!e) e = window.event;
if (e.keyCode == '13') {
setTimeout(function () { $(elem).autocomplete('close'); }, 500);
return false;
}
})//$(elem).keypress(function (e){
} //function NameSearch(elem) {
I'm also dealing with an Enter key press as well in the above function.
here is the complete code for my Autocomplete in jqgrid Edit form..
colModel :[
{name:'name', index:'name', width:90, align:'center', editable:true, hidden: false, edittype:'text',
editoptions:{
dataInit:function (elem) {
$(elem).autocomplete({
minLength: 2,
source: function(request, response,term) {
var param = request.term; //values we enter to filter autocomplete
$.ajax({
url: "myurl",
dataType: "json",
type:"GET",
success: function (data) {
response($.map(data, function(item) {
return {
//can add number of attributes here
id: item.id,
shform: item.shortform,
value: item.name,
clr : item.color, //here apart from name and id i am adding other values too
size: item.size,
remar:item.remarks,
subs: item.subs,
selec:item.selec ,
};
}));//END Response
},//END Success
});//END AJAX
},
select: function( event, ui ) {
// setting values to textbox in jqgrid edit form based on selected values
$('#textbox1').val(ui.item.id);
$('#textbox2').val(ui.item.shform);
$('#textbox3').val(ui.item.clr);
$('#textbox4').val(ui.item.size);
$('#textbox5').val(ui.item.sizeremar);
$('#textbox6').val(ui.item.subs);
$('#textbox7').val(ui.item.selec);
$('#textbox8').val(ui.item.selp);
}
});
$('.ui-autocomplete').css('zIndex',1000); // if autocomplete has misalignment so we are manually setting it
}
}, editrules :{required : true},
formoptions:{rowpos: 1, colpos: 2}
},
........
]
server code :
String term = request.getParameter("term");
List<ArticleDetails> articlelist = prfbo.getPrfArticleName(term); //DB call via BO and DAO class
System.out.println("List Value " +articlelist.size());
JSONArray jsonOrdertanArray = JSONArray.fromObject(articlelist);
System.out.println(jsonOrdertanArray);
out.println(jsonOrdertanArray);
hope some one find it useful.
I need to limit the row numbers with 10 while autocomplete. Data is from db. Is there any attribute like 'maxrows' or something?. I don't want to add the scroll.
please suggest method thanks in advance.
my code is:
$("#iIdlbl").autocomplete({
source : function(request, response) {
var value = jQuery("#iIdlbl").val();
$.ajax( {
url : 'getiId.html',
dataType : 'json',
data : {
filter : value
},
success : function(data) {
response(jQuery.map(data.iList,function(item) {
return {
value : item.iId,
key : item.iId
};
}));
},
error : function(XMLHttpRequest,textStatus,errorThrown) {
$.loader('close');
}
});
},
minLength : 0,
open : function() {
$(this).removeClass(
"ui-corner-all").addClass(
"ui-corner-top");
},
close : function() {
$(this).removeClass(
"ui-corner-top").addClass(
"ui-corner-all");
},
select : function(event, ui) {
searchById(ui.item.value);
}
});
The easiest way is to limit the number of returned results in your source.
so, in getiId.html, limit the number of items to 10
You could always just stop looping after 10 results in your success function:
success : function(data) {
var results = [], i,
length = 10 < data.iList.length ? 10 : data.iList.length;
for (i = 0; i < length; i++) {
results.push({
value: item.iId,
key: item.iId
});
}
response(results);
},