Jquery and cookie - Update of the first start but not after - js-cookie

Please,
I don't know upgrading one existing cookie.
I tryed with the code in below but don't worked.
He isn't upgrading array length but $.listImages.length return correct number.
My Jquery version is 1.12.
var list = [];
for (var i = 12; i >= 0; i--) {
var image = {
id:"f6183197-7925-45a8-bafb-7e13c69686a9",
name:"CACHOEIRO WHITE 2CM Block 01000775 Bundle Slab 005",
path:"FOTOS - 2016\\02 - FEVEREIRO\\CACHOEIRO WHITE\\CACHOEIRO WHITE01000775-2CM\\",
thumbnail:null,
dateIndex:"2016-04-28T14:42:39",
file:"CACHOEIRO WHITE 2CM Block 01000775 Bundle Slab 005.JPG"
};
list.push(image);
}
Cookies.set('imagesSelected', list);
var listSaved = Cookies.get('imagesSelected');
//Returned number 13?
alert(listSaved);
//Save and get again but new quantity
list = listSaved;
for (var i = 3; i >= 0; i--) {
var image = {
id:"f6183197-7925-45a8-bafb-7e13c69686a9",
name:"CACHOEIRO WHITE 2CM Block 01000775 Bundle Slab 005",
path:"FOTOS - 2016\\02 - FEVEREIRO\\CACHOEIRO WHITE\\CACHOEIRO WHITE01000775-2CM\\",
thumbnail:null,
dateIndex:"2016-04-28T14:42:39",
file:"CACHOEIRO WHITE 2CM Block 01000775 Bundle Slab 005.JPG"
};
list.push(image);
}
listJSON = JSON.stringify(list);
Cookies.set('imagesSelected', listJSON);
listSaved = Cookies.getJSON('imagesSelected');
//Returned number 16?
alert(listSaved.length);

I think it was the same character limit. I solved my problem using StorageAPI. github.com/julien-maurel/jQuery-Storage-API
Not is possible send big data in the cookies but the major problem was didn't any exception return.
It was hard to find out.

Related

Cannot red property 'getText' protractor

I am trying to do a loop into a loop and a get the Cannot red property 'getText' of undefined error.
Here is my code:
element.all(by.className('col-md-4 ng-scope')).then(function(content) {
element.all(by.className('chart-small-titles dashboard-alignment ng-binding'))
.then(function(items) {
for(var i = 0; i<=content.length; i++) {
items[i].getText().then(function(text) {
expect(text).toBe(arrayTitle[i]);
});
}
});
element.all(by.className('mf-btn-invisible col-md-12 ng-scope'))
.then(function(itemsText) {
for(var i=0; i<=content.length; i++) {
for(var x = 0; x<=arrayContent.length; x++) {
itemsText[i].getText().then(function(textContent) {
expect(textContent).toBe(arrayContent[x]);
});
}
}
});
});
I am using the .then in the .getText() so i don't know what happens.
Your main problem now is you wrote 30 lines of code and you debug all of them at once. There maybe 1000 on possible issues. For this reason noone will help you, because I don't want to waste my time and make blind guesses myself. But if you reorgonize your code so you can debug them 1 by 1 line, then every line may have only a few issues.
With that said, stop using callbacks, I can see you don't completely understand what they do. Instead start using async/await. See how easy it is... Your code from question will look like this
// define elementFinders
let content = element.all(by.className('col-md-4 ng-scope'));
let items = element.all(by.className('chart-small-titles dashboard-alignment ng-binding'));
let itemsText = element.all(by.className('mf-btn-invisible col-md-12 ng-scope'));
// get element quantity
let contentCount = await content.count();
let itemsTextCount = await itemsText.count();
// iterate
for(var i = 0; i<contentCount; i++) {
// get text
let text = await items.get(i).getText();
// assert
expect(text).toBe(arrayTitle[i]);
}
// iterate
for(var i=0; i<contentCount; i++) {
for(var x = 0; x<itemsTextCount; x++) {
// get text
let text = await itemsText.get(i).getText();
// assert
expect(text).toBe(arrayContent[x]);
}
}
This way you can console.log any variable and see where your code breaks

References in axis using chart.js (or another library)

Im trying to make a graph like this:
https://www.google.com/finance?q=BCBA:PAMP
I have a line chart in chart.js, now I want to add labels (like the letters A, B, C) for certain dates.
Can't find a doc/example to start from. Any idea?
If its more simple to do with another library a recommendation is more than welcome.
Thanks!
Unfortunately, there is no native support in chart.js for what you are wanting. However, you can certainly add this capability using the plugin interface. This requires that you implement your own logic to draw the canvas pixels at the locations that you want them. It might sound challenging, but its easier than it sounds.
Here is an example plugin that will add a value above specific points in the chart (based upon configuration).
Chart.plugins.register({
afterDraw: function(chartInstance) {
if (chartInstance.config.options.showDatapoints || chartInstance.config.options.showDatapoints.display) {
var showOnly = chartInstance.config.options.showDatapoints.showOnly || [];
var helpers = Chart.helpers;
var ctx = chartInstance.chart.ctx;
var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize + 5, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = fontColor;
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
if (showOnly.includes(dataset.data[i])) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
ctx.fillText(dataset.data[i], model.x, yPos);
}
}
});
}
}
});
It allows you to configure which points you want to annotate using this new configuration. The showOnly option contains the points that you want to label.
options: {
showDatapoints: {
display: true,
showOnly: [3, 10, 9]
},
}
Obviously, this only adds the datapoint value at the specified points, but you can just change the plugin to paint whatever you want to show instead. Simply replace ctx.fillText(dataset.data[i], model.x, yPos) with different code to render something different on the canvas.
Here is a codepen example to show you want it looks like.

How to remove L.rectangle(boxes[i])

I few days ago I implement a routingControl = L.Routing.control({...}) which works perfect for my needs. However I need for one of my customer also the RouteBoxer which I was also able to implement it. Now following my code I wants to remove the boxes from my map in order to draw new ones. However after 2 days trying to find a solution I've given up.
wideroad is a param that comes from a dropdown list 10,20,30 km etc.
function routeBoxer(wideroad) {
this.route = [];
this.waypoints = []; //Array for drawBoxes
this.wideroad = parseInt(wideroad); //Distance in km
this.routeArray = routingControl.getWaypoints();
for (var i=0; i<routeArray.length; i++) {
waypoints.push(routeArray[i].latLng.lng + ',' + routeArray[i].latLng.lat);
}
this.route = loadRoute(waypoints, this.drawRoute);
}; //End routeBoxer()
drawroute = function (route) {
route = new L.Polyline(L.PolylineUtil.decode(route)); // OSRM polyline decoding
boxes = L.RouteBoxer.box(route, this.wideroad);
var bounds = new L.LatLngBounds([]);
for (var i = 0; i < boxes.length; i++) {
**L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);**
bounds.extend(boxes[i]);
}
console.log('drawRoute:',boxes);
this.map.fitBounds(bounds);
return route;
}; //End drawRoute()
loadRoute = function (waypoints) {
var url = '//router.project-osrm.org/route/v1/driving/';
var _this = this;
url += waypoints.join(';');
var jqxhr = $.ajax({
url: url,
data: {
overview: 'full',
steps: false,
//compression: false,
alternatives: false
},
dataType: 'json'
})
.done(function(data) {
_this.drawRoute(data.routes[0].geometry);
//console.log("loadRoute.done:",data);
})
.fail(function(data) {
//console.log("loadRoute.fail:",data);
});
}; //End loadRoute()
Well, my problem is now how to remove previously drawn boxes in order to draw new ones because of changing the wideroad using a dropdown list. Most of this code I got from the leaflet-routeboxer application.
Thanks in advance for your help...
You have to keep a reference to the rectangles so you can manipulate them (remove them) later. Note that neither Leaflet nor Leaflet-routeboxer will do this for you.
e.g.:
if (this._currentlyDisplayedRectangles) {
for (var i = 0; i < this._currentlyDisplayedRectangles.length; i++) {
this._currentlyDisplayedRectangles[i].remove();
}
} else {
this._currentlyDisplayedRectangles = [];
}
for (var i = 0; i < boxes.length; i++) {
var displayedRectangle = L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);
bounds.extend(boxes[i]);
this._currentlyDisplayedRectangles.push(displayedRectangle);
}
If you don't store a reference to the L.rectangle() instance, you obviously won't be able to manipulate it later. This applies to other Leaflet layers as well - not storing explicit references to Leaflet layers is a usual pattern in Leaflet examples.

Dynamically Generated Telerik MVC3 Grid - Add Checkboxes

I have a grid that is dynamically generated based on search criteria. I render the grid in a partial view using Ajax. That all works fine.
I now need to add a checkbox column as the first column.
Also, how do I get filtering, sorting paging etc. to work now since it is in a partial view.
When i click on a header to sort I get a Page not found error and the filter Icon doesnt do anything.
And one more thing. When I try to add a GridCommandColumnSettings to the grid I get the error
"Invalid initializer member declarator"
Code is below for the gridcolumnsettings
public GridColumnSettings[] NewColumns(DataTable fullDT)
{
GridColumnSettings[] newColumns = new GridColumnSettings[fullDT.Columns.Count];
for (int i = 0; i < fullDT.Columns.Count; i++)
{
// set the visibility property for the DeliveryID
bool boolDeliveryID;
if (fullDT.Columns[i].ColumnName == "DeliveryID")
boolDeliveryID = false;
else
boolDeliveryID = true;
newColumns[i] = new GridColumnSettings
{
new GridCommandColumnSettings
{
Commands =
{
new GridEditActionCommand(),
new GridDeleteActionCommand()
},
Width = "200px",
Title = "Commands"
},
Member = fullDT.Columns[i].ColumnName,
Title = fullDT.Columns[i].ColumnName,
Visible = boolDeliveryID,
Filterable = true,
Sortable = true
};
}
return newColumns;
}
Any suggestions would be appreciated.
Thanks
I edited my post to add my partial for the Grid
Here is my partial for the grid
#(Html.Telerik().Grid<System.Data.DataRow>(Model.Data.Rows.Cast<System.Data.DataRow>())
.Name("Grid")
.Columns(columns =>
{
columns.LoadSettings(Model.Columns as IEnumerable<GridColumnSettings>);
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("_DeliveryManagerCustomBinding", "Deliveries"))
.EnableCustomBinding(true)
.Resizable(resize => resize.Columns(true))
)
I don't add columns this way when I use the Telerik Grid control, but looking at what you're doing I would hazard a guess to say you will need to do something like the following:
increase the size of the newColumns array by 1 (because we're going to add in the checkbox column):
GridColumnSettings[] newColumns = new GridColumnSettings[fullDT.Columns.Count + 1];
if you want it at the beginning you will need to do the following before your for-loop:
GridColumnSettings s = new GridColumnSettings() {
ClientTemplate("<input type=\"checkbox\" name=\"checkeditems\" value=\"some value\" />")
Title("title goes in here")
};
Then you will add it into your array:
newColumns[0] = s;
and then increase the start index for your for-loop to 1:
for (int i = 1; i < fullDT.Columns.Count; i++)
the checkbox column will go at the beginning

FB.Canvas.getPageInfo not working

I am working on a FB app and used FB.Canvas.getPageInfo to get the scroll of the canvas to set popups in the screen center because the application is not scrolling but its the fb canvas which is scrolling and to find the center of the screen on long pages i need to get the number of pixels the canvas is scrolled and then with some plus minus i get the screen center of current page position. This was working fine till yesterday but is not since morning, I have tried alot but no success yet.
the code is called in setTimeout function, until the value is received I forcefully set my popup's dispaly to none and show a loader image.
remember it was working fine til last night
here is the code
$('.popup-call-local').live('click', function(event){
//FB.Canvas.getPageInfo(function(info){alert(info.scrollTop);});
var view_name = this.id;
var check_view_name = view_name.replace(/_/g, '-');
if($('#'+check_view_name).length > 0){
$('#popupDiv').css('height',$('.wrap').css('height'));
$('#popupDiv').css('display','block');
$('#popupDiv').css('z-index',1000);
var x = Number((window.screen.width - 400) / 2);
var y = Number(event.pageY)+ 10;
$('#popupDiv').html('<img src="<?php echo base_url(); ?>images/loaderblack.gif" style="position:absolute; z-index:50000; left:'+x+'px; top:'+y+'px;" />');
$('#'+check_view_name).css('z-index',2000);
var viewportHeight = window.screen.height;
var windowScrolled = -1;
$foo = jQuery('#'+check_view_name),
elWidth = $foo.width(),
elHeight = $foo.height(),
elOffset = $foo.offset();
setTimeout(function(){FB.Canvas.getPageInfo(function(info){windowScrolled=info.scrollTop; while(windowScrolled == -1){
$('#'+check_view_name).css('display','none');}
var v = (((viewportHeight - elHeight) / 2) + (windowScrolled) - 100); if(v<=0){v=Number(v)*Number(-1);}$('#popupDiv').html('');$('#'+check_view_name).css('display','block');$('#spinner').css('display','none');$('#'+check_view_name).css('top', Number(v) + 'px');});}, 3000);
}else{
return false;
}
});
EDIT
well
just found that its a facebook bug reported here
http://developers.facebook.com/bugs/185097921606322?browse=search_4f60961cc946d7143000700