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.

How to access data returned from an API using jQuery

I'm doing an AJAX GET request to an API that returns all stores in my area that offer express delivery. I need to check over the data to see if any store in the area offer express delivery but can't access the data properly to perform any check's and don't understand why.
A stripped back version of the data returned from the API is here:
{
"data": {
"service_eligibility": [
{
"accesspoint_list": [
{
"current_time": null,
"currency": null,
"accesspoint_id": "3242342-6dc1-43d8-b3d0-234234234234",
"service_info": {
"fulfillment_type": "DELIVERY",
"reservation_type": "SLOTS",
"dispense_type": "DELIVERY",
"priority": 0,
"carrier": "Owned",
"fulfillment_option": "DELIVERY",
"location_type": "Home",
"service_time": 0,
"is_recurring_slot": false,
"enable_express": false,
"is_unattended_slot": true,
"is_flex_slot": false
},
{
"current_time": null,
"currency": null,
"accesspoint_id": "234234242-3387-4e1d-9eaa-234234242",
"service_info": {
"fulfillment_type": "INSTORE_PICKUP",
"reservation_type": "SLOTS",
"dispense_type": "PICKUP_INSTORE",
"priority": 0,
"carrier": "NA",
"fulfillment_option": "PICKUP",
"location_type": "Store",
"service_time": 0,
"is_recurring_slot": false,
"enable_express": true,
"is_unattended_slot": false,
"is_flex_slot": false
},
"current_time": "2021-06-07T11:24:39Z",
"currency": "GBP"
},
"status_code": 200,
"status_message": "Requested input executed successfully."
}
The call I use to get my data:
$.ajax({
type: 'GET',
dataType: "json",
url: query,
data: "",
success: function(data)
{
//Check for express delivery
if(data.status_code == 200) {
console.log(data);
}
},
error: function(data)
{
//Check for API error
if(data.status == 400){
console.log(data.responseJSON.errors[0].message);
}
}
})
So far the data is being logged to the console. But when I try to access it or parts I want to use I get console errors.
I have tried copying the property path from the console and using it in the console.log:
console.log(data.service_eligibility[0].accesspoint_list)
but get the error message:
Cannot read property '0' of undefined
I have tried just data.service_eligibility but this just give me the error of undefined
In fact even if I just try to access data.currency I get undefined
Why can I not access the data being returned from the API?

type: 'GET',
dataType: "json",
url: query,
data: "",
success: function(data)
{
//Check for express delivery
if(data.status_code == 200) {
console.log(response.data.ervice_eligibility[0].accesspoint_list);
}
}
Looking at the above piece of code you have provided, it looks like, the data object that you are receiving in the success handler does not directly refer to the data object inside your received response. Given the names are same, it can be confusing.
I think if you try accessing the property inside the data object using data.data.service_eligibility, you will be able to access it. For some more clarity, see the code below:
type: 'GET',
dataType: "json",
url: query,
data: "",
success: function(response)
{
//Check for express delivery
if(response.status_code == 200) {
console.log(response.data.service_eligibility[0].accesspoint_list);
}
}
Just think about it, if your data is available inside the success handler, it means that the asynchronous action of fetching the data from the api has successfully completed. You can just debug the structure of your data object and find out what's missing or what's wrong in the way you are accessing a value. People can behave differently, code can never! :)

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

Impossible to create a new account on prestashop

I am currently developping a new website
When I am trying to create an account, I get an error like this :
Uncaught TypeError: Cannot read property 'hasError' of null.
And this is the code
function submitFunction()
{
$('#create_account_error').html('').hide();
//send the ajax request to the server
$.ajax({
type: 'POST',
url: baseUri,
async: true,
cache: false,
dataType : "json",
data: {
controller: 'authentication',
SubmitCreate: 1,
ajax: true,
email_create: $('#email_create').val(),
back: $('input[name=back]').val(),
token: token
},
success: function(jsonData)
{
if (jsonData.hasError())
{
var errors = '';
for(error in jsonData.errors)
//IE6 bug fix
if(error != 'indexOf')
errors += '<li>'+jsonData.errors[error]+'</li>';
$('#create_account_error').html('<ol>'+errors+'</ol>').show();
}
else
{
// adding a div to display a transition
$('#center_column').html('<div id="noSlide">'+$('#center_column').html()+'</div>');
$('#noSlide').fadeOut('slow', function(){
$('#noSlide').html(jsonData.page);
// update the state (when this file is called from AJAX you still need to update the state)
bindStateInputAndUpdate();
$(this).fadeIn('slow', function(){
document.location = '#account-creation';
});
});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("TECHNICAL ERROR: unable to load form.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
}
});
}
It seems to be the jsonData, on the function, which is not working as well. Any idea or suggestions?

The success handler will be passed the data returned from the ajax request.
It will not have a function called hasError() because it is just a json object it will not have any functions.
The error handler should be fired if there is an http error i.e. if the ajax call returns an http 500.
I'm not familiar with prestashop, but looking over the prestashop documentation hasError is returned as a bool (not a function), so instead try (without the parenthesis).
if (jsonData.hasError)
You may also want to check if any data is returned first.
if (jsonData)

JSTree JSON_DATA on IE7 and IE8

Having some problems getting JSTree to work with IE7 and 8. It works great on IE9, FF4 and Chrome.
It is loading data via the JSON_DATA plugin backed by an ASP.NET MVC3 controller action.
The problem is that the data is not getting loaded into the tree on IE7-8. I can verify the action is getting requested and no error is being thrown or at least caught in the error function.
$("#changeGroupTree")
.bind("select_node.jstree", function(event, data) {
// `data.rslt.obj` is the jquery extended node that was clicked
var id = data.rslt.obj.attr("id");
$("input[name='changeGroup_GroupId']").val(id)
.siblings("span")
.addClass("field-validation-valid")
.removeClass("field-validation-error");
$.ajax({
type: "GET",
url: "/api/group/gettree",
data: { groupId: id },
dataType: "JSON",
success: function(data, status, jqXHR) {
$("#changeGroup_SelectedGroup").html(data[0]);
},
error: function(jqXHR, textStatus, errorThrown) {
var data = $.parseJSON(jqXHR.responseText);
$().toastmessage("showErrorToast", data.ErrorMessage);
}
}); // end ajax
}) // end bind
.bind("loaded.jstree", function(event, data) {
})
.jstree({
core: {
animation: 200
},
plugins: ["themes", "json_data", "ui"],
themes: {
theme: "default",
dots: "true",
icons: "true"
},
ui: {
select_limit: 1
},
json_data: {
ajax: {
url: "/api/group/getgroups",
data: function(node) {
return { customerId: CUSTOMER_ID, parentId: (node.attr) ? node.attr("id") : "00000000-0000-0000-0000-000000000000" };
},
error: function(jqXHR, textStatus, errorThrown) {
alert("JSTree Error when getting Group data");
}
}
}
}); // end jstree
Here is the json that is returned from the server
[{"attr":{"id":"d9cc2cb9-fbc4-4726-a9b1-9eee00f1e2b8"},"data":"MTM","state":"closed","icon":"Group"}]
Am I missing something to get the data bound in the older IEs?
Thanks,

Turns out I had a self closing span tag in the html aka
<span class="field-validation-valid" />
Make this in to a well formed tag aka
And everything works perfectly.
Sigh, a whole day fighting this