We Keep Coding

Twitter typeahead.js not initializing / working as expected using remote data source

Twitter typeahead not working as expected, when I comment out code in the library I do get a non-styled drop down of suggestions.
jQuery('input#test').typeahead(
{
hint: true,
highlight: true,
limit:25, //still using 5 which is default in the library
minLength: 3
},
{
name: 'customLookup',
source: function(query, result) {
return jQuery.ajax({
url: url, //my dynamic url, returns custom json array that needs to be mapped
data: 'shop_name=' + query + "&limit=25", //custom limit against backend api
dataType: "json",
type: "post",
success: function(data, textStatus, xhr) {
var suggestions = [];
jQuery.map(data.data, function(item){
suggestions.push(item.name + " - " + item.address);
});
result(suggestions); //stepping in, it just skips because syncCalled already = true? Then remove that code and it gives me back a list of 5 that isn't styled...
console.log(suggestions); //has array of strings as expected
},
error: function (request, status, error) {
alert(error);
}
});
}
});
So are there options or updates I've missed capturing when configuring? Using a back end custom data source that needs JSON mapped to an array for typeahead.

Just ended up modifying the library directly and having our own copy, not sure the issue but seems to work fine with that approach and using custom CSS to style.

Ag-Grid 9 server side pagination

I would like to do server side pagination with Ag-Grid, but I can't make next button enabled. I used the same method in a previous project and there it worked well, but with the new grid version it doesn't work.
My grid options look like this:
gridOptions = {
columnDefs: columnDefs,
datasource: datasource,
pagination: true,
paginationPageSize: 8,
rowModelType: 'pagination'
};
And my datasource is this:
datasource = {
rowCount: -1,
getRows: function (params) {
var request = $.ajax({
url: apiUrl,
type: "post",
data: params
});
request.done(function (response, textStatus, jqXHR) {
params.successCallback(response.Values, response.Count);
});
request.fail(function (jqXHR, textStatus, errorThrown) {
params.failCallback();
});
}
};
I debugged my code many times, response.Count is 15 (I even tried to hardcode it, but it didn't help either) right now but I can't navigate to the 2nd page.
By the way if I comment out line rowModelType: 'pagination' then even the first page doesn't appear.
I read through the new documentation, but I couldn't find any solution for this.
Ps.: I just tried with version 7.2.2 and there this code works like a charm

Issue in displaying events in Fullcalendar.js

Hi I am trying to implement FullCalendar.js with Asp.Net MVC. I am abl to show empty calendar but my events are not getting loaded in the Calendar.
$.ajax({
type: 'Get',
url: "/Matter/GetMatterEventsSummary",
data: data,
datatype: "Json",
contentType: "application/json",
success: function (doc) {
debugger;
$('#calendar').fullCalendar();
var events = [];
$(doc).find('[object Object],[object Object]').each(function () {
debugger;
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
// });
$('#calendar').fullCalendar('refetchEvents');
// callback(events);
}
});
it comes to success method and it has two events in it . but dont know why theseevents are not loaded into FullCalendar and also after this Calendar is not comingg automatically.
I guess it is not going in events.push. When I do hover on doc it shows "[object Object],[object Object]" and in this it has two records on [0] and [1].
Please help me in this.

Try using
$('#calendar').fullCalendar( 'rerenderEvents' )
after your events have been pulled.
Also, make sure to use the code from the official documentation properly. Try the following (untested):
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
type: 'Get',
url: "/Matter/GetMatterEventsSummary",
data: data,
datatype: "Json",
contentType: "application/json",,
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
});
If you now want to refetch your events, call :
$('#calendar').fullCalendar('refetchEvents');
where necessary.
EDIT:
Since your are actually pulling data from a JSON feed, the following code may even be enough:
$('#calendar').fullCalendar({
events: '/Matter/GetMatterEventsSummary'
});
Check the documentation here:
EDIT2:
To dynamically modify the request you send to the backend (depending on a dropdown or something else), may be achieved as follows:
var myValue = 10;
$('#calendar').fullCalendar({
events: '/Matter/GetMatterEventsSummary',
data: function() { // a function that returns an object
return {
dynamic_value: myValue
};
}
});

When should the selectize.js function selectize() be called?

I am trying to use selectize.js to populate a combo-box on a form in my application.
I am trying to follow the "Rotten Tomatoes" model on the selectize web page. But I am a little puzzled about the timing of this call. The author prefers to initialize the select with a little <script> immediately following the specification of the <select> in the html file, but I would rather keep all my script in a separate js file.
Anyway I do the following
function loadSelect()
{
var myAPI = "my/api/";
var count = 0;
console.log('in loadSelect()');
$('#myselect').empty();
$('#myselect').selectize({
valueField: 'id',
labelField: 'name',
searchField: 'name',
options: [],
create: true,
load: function(query, callback) {
console.log("loading data");
if (!query.length) {
console.log("no data loaded");
return callback();
}
$.ajax({
url: myAPI,
type: 'GET',
dataType: 'json',
data: {
q: query,
},
error: function() {
console.log("failure");
callback();
},
success: function(res) {
console.log("success");
count = res.data.length;
callback(res.data);
}
});
}
});
}
No matter when I call this loadSelect() function, whether it be from the $(document).ready(function(){ or directly from the html page after the declaration of the select as the selectize author does, I find that the load() method never gets called. Note the console.log statements. The first one, 'in loadSelect()' always fires but any logs inside the load() function never fire.
Project documentation describes the load callback as follows:
Invoked when new options should be loaded from the server.
but this begs the question when should new options be loaded from the server.
In any event, what can I do to insure that load callback fires?

add the option preload:true to the array of options passed to the selectize call.

dhtmlx scheduler wont render when page load asychronously (ajax page)

Im using this cool javascript scheduler. At first I load it in my page by
function get_dependencies() {
//event calendar
$(".myscheduler").dhx_scheduler({
xml_date: "%Y-%m-%d %H:%i",
date: new Date(2014, 4, 25),
mode: "month"
});
scheduler.load($("body").attr("data-link") + "/core/plugins/dhtmlcalendar/events.xml");
}
and then call the function
$(window).load(function(){
get_dependencies();
});
and then when any of navs is click (navs associated with the ajax page stuff) call the page and render the scheduler again
$.ajax({
url: '/ajax-page',
type: 'post',
dataType: 'html',
beforeSend: function () {
$("#loading").show();
},
data: {
page: this_tab_content_link,
_token: $("body").attr("data-token")
},
success: function (data) {
$(".active_tab_content").html(data);
if ($(this).hasClass("reload_dependencies")) {
get_dependencies();
}
$("#loading").hide();
}
});
but sadly the scheduler, didn't render (no calendar scheduler is showing) after the html data (the ajax page response) is put in to the specified container. Any ideas, help, suggestions, recommendations, help?

Set relevant context to ajax callback, this in your code is jqXHR option object. Set ajax option context to this:
$.ajax({
context: this,
/*...*/
});