Related
I make request to server for login, and then before redirect user to home page I try to
open indexedDB connection in order to see this page, bacause home page go to the indexedDB
and get some data. So below is my code and photo of error
beforeEach(() => {
cy.request({
method: 'POST',
url :'http://localhost:3000/api/auth/login',
body : {
email: "email",
password: "password"
}
}).then(function(response) {
window.indexedDB.open("testDB");
localforage.config({
driver: [localforage.INDEXEDDB],
name: 'testDB',
storeName: 'testDB',
version: '1.0',
});
localforage.clear().then(() => {
localforage.setItem('jobs', [{name: 'fdf'}]);
});
}).then(()=>{
cy.visit('http://localhost:3000/');
})
})
I also try this way but it doesnt works too, what I do wrong?
function open() {
var request = window.indexedDB.open("testDB", 1);
request.onerror = function(event) {
};
request.onsuccess = function(event) {
};
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("jobs", { keyPath: "name" });
objectStore.createIndex("name", "name", { unique: false });
objectStore.add({name: 'fsdf'});
}
}
describe('The Login Page', () => {
beforeEach(() => {
open()
cy.request({
method: 'POST',
url :'http://localhost:3000/api/auth/login',
body : {
email: "gfdgfdg",
password: "gdfgfdg"
}
})
.then(function(response) {
})
.then(()=>{
cy.visit('http://localhost:3000/');
})
})
One thing that is (probably) incorrect is the window reference.
Cypress runs the browser window as an automation "shell", which is what you get when you use
window.indexedDB.open("testDB")
but the app window is inside an iframe.
You can access either with
cy.window().then(win => win.indexedDB.open("testDB"))
or
cy.state('window').indexedDB.open("testDB") // undocumented!
I have looked at the following links Binding json result in highcharts for asp.net mvc 4 , highcharts with mvc C# and sql, HighChart Demo and many others. However, I couldn't find a working demo showing how to implement a highchart using data from a database.
Objective:
I want to generate a real time highchart line graph getting data from my database. What I want is very similar to the third link which provides a real-time highchart with randomly generated values. It is also similar by X-axis and Y-axis, for I want my x-axis to be "Time" (I have a DateTime column in my database) and y-axis to be an integer (I have a variable for that as well in my database).
Please I need help in sending the model data to my razor view.
Note that I am already using SignalR to display a realtime table. I also want to know if it can be used to automatically update the highchart as well.
Below is the code snippet of my script in the view. I have used the code provided in link 3 for generating the highchart. Please tell me where should I apply the changes on my code.
#section Scripts{
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/SignalR/Hubs"></script>
<script type="text/javascript">
$(document).ready(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.dataHub;
//debugger;
// Create a function that the hub can call to broadcast messages.
notifications.client.updateMessages = function () {
getAllMessages()
};
// Start the connection.
$.connection.hub.start().done(function () {
alert("connection started")
getAllMessages();
}).fail(function (e) {
alert(e);
});
//Highchart
Highcharts.setOptions({
global: {
useUTC: false
}
});
//Fill chart
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);//300000
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
function getAllMessages() {
var tbl = $('#messagesTable');
var data = #Html.Raw(JsonConvert.SerializeObject(this.Model))
$.ajax({
url: '/home/GetMessages',
data: {
id: data.id,
},
contentType: 'application/html ; charset:utf-8',
type: 'GET',
dataType: 'html'
}).success(function (result) {
tbl.empty().append(result);
$("#g_table").dataTable();
}).error(function (e) {
alert(e);
});
}
</script>
}
UPDATED CODE
//Highchart
Highcharts.setOptions({
global: {
useUTC: false }
});
//Fill chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: $.connection.hub.start().done(function () {
alert("Chart connection started")
var point = getAllMessagesforChart();
var series = this.series[0];
setInterval(function (point) {
// add the point
series.addPoint([point.date_time, point.my_value], true, true)
}, 1000);
}).fail(function (e) {
alert(e);
})
}
}
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
function getAllMessagesforChart() {
var data = #Html.Raw(JsonConvert.SerializeObject(this.Model))
$.ajax({
url: '/home/GetMessagesforChat',
data: {
id: data.id,
},
contentType: 'application/html ; charset:utf-8',
type: 'GET',
dataType: 'html'
}).success(function (data) {
data = JSON.parse(data);
//data_graph = [].concat(data);
//$("#debug").html(data_graph);
}).error(function (e) {
alert(e);
});
return data;
//return data_graph;
}
There is an example that might help you:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/
it uses an ajax callback function.
Well, you can also have a look at my sample where I add dynamically series by clicking add button.
http://plnkr.co/edit/Sh71yN?p=preview
You only need to add data in the right structure.
Have a look at the function
$("#btnAdd").click(function()
of my code script.js
I hope it helps.
regards,
Luis
I started working on AngularJS and DataTables and wonder whether it is possible to customize the response DataTables is expecting. The current expectation of the DataTables plugin is something like this:
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 5,
"data": [...]
}
On the server end, the API's are being handled by django-tastypie
The response from server is:
{
meta: {
limit: 20,
next: null,
offset: 0,
previous: null,
total_count: 2
},
objects: [...]
}
So, is there a way to tweak Datatables Plugin to accept/map this response, or I'll have to find a way to add expected fields to the api?
So far I've done this:
var deptTable = angular.element('#deptManagementTable').DataTable({
processing: true,
serverSide: true,
pagingType: "simple_numbers",
ajax: {
url: "/client/api/v1/departments/",
data: function(d) {
d.limit = d.length;
d.offset = d.start;
d.dept_name__icontains = d.search.value;
},
dataSrc: function(json) {
for (var i=0, len=json.objects.length ; i<len ; i++) {
json.objects[i].DT_RowId = json.objects[i].dept_id;
}
return json.objects;
}
},
aLengthMenu: [
[5, 25, 50, 100],
[5, 25, 50, 100]
],
iDisplayLength: 5,
columns: [
{
data: "dept_name"
},
{
data: "dept_created_on",
render: function ( data, type, full, meta ) {
var dateCreated = new Date(data);
dateCreated = dateCreated.toLocaleDateString();
return dateCreated;
}
}
]
});
Any help will be appreciated.
Thanks in Advance :)
You can pass a function to the DataTables ajax option, this will give you full control over how to fetch and map the data before passing it to DataTables.
.DataTable({
serverSide: true,
ajax: function(data, callback, settings) {
// make a regular ajax request using data.start and data.length
$.get('/client/api/v1/departments/', {
limit: data.length,
offset: data.start,
dept_name__icontains: data.search.value
}, function(res) {
// map your server's response to the DataTables format and pass it to
// DataTables' callback
callback({
recordsTotal: res.meta.total_count,
recordsFiltered: res.meta.total_count,
data: res.objects
});
});
}
});
The solution above has been tested with jQuery DataTables 1.10.4.
As this question is tagged with Angular, here's a solution for those using angular-datatables.
<div ng-controller="testCtrl">
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
</div>
.controller('testCtrl', function($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('serverSide', true)
.withOption('ajax', function(data, callback, settings) {
// make an ajax request using data.start and data.length
$http.get('/client/api/v1/departments/', {
limit: data.length,
offset: data.start,
dept_name__icontains: data.search.value
}).success(function(res) {
// map your server's response to the DataTables format and pass it to
// DataTables' callback
callback({
recordsTotal: res.meta.total_count,
recordsFiltered: res.meta.total_count,
data: res.objects
});
});
})
.withDataProp('data'); // IMPORTANT¹
$scope.dtColumns = [
// your column definitions here
];
});
The solution above has been tested with angular-datatables 0.3.0 + DataTables 1.10.4.
¹ The important part to note here is that the angular-datatables solution requires .withDataProp('data') to work, while the pure jQuery DataTables solution does not have a data: 'data' option.
This answer was very useful, but seems a bit outdated in the context of the current (1.10.12 at the moment) version of datatables, which actually makes life a lot easier (or at least more readable).
Under the current version you can do something like the following in your declaration (bearing in mind that tastypie needs to have the filterable & ordering options set for the fields you want to use).
You can now access the data being submitted in the ajax request by doing data.attr inside the function.
This assumes you wish to restrict searching to one field, but can easily be extended in the same manner do console.log(data) within the ajax function to see what is sent.
var table = $('#tableName').DataTable({
"deferRender":true,
"serverSide": true,
"ajax": function(data, callback, settings) {
var sort_column_name = data.columns[data.order[0].column].data.replace(/\./g,"__");
var direction = "";
if (data.order[0].dir == "desc") { direction = "-"};
$.get('your/tasty/pie/url?format=json', {
limit: data.length,
offset: data.start,
your_search_field__searchattr: data.search.value,
order_by: direction +sort_column_name
}, function(res) {
callback({
recordsTotal: res.meta.total_count,
recordsFiltered: res.meta.total_count,
data: res.objects
});
});
},
"columns": [
{ "data":"column_1", "orderable": false },
{ "data":"column_2" },
{ "data":"column_3" }
],
"order": [[1, "asc"]]
});
I use jquery 1.6.4 and I just try to get city corresponding to a zipcode, so I want to use the Google Geocode API.
$(document).ready(function() {
$("#zipcode").keypress(function(){
$.getJSON(
"http://maps.googleapis.com/maps/api/geocode/json",
{
sensor: false,
address: "france"
},
function(data) {
alert(data.status);
}
);
});
});
But It doesn't work, firebug give me a status code 200 but not result.
If I ask directly to the API, It work... So what I'm doing wrong ?
I build my solution by following this post
My solution using Jquery and google maps class
$("#zipcode").keyup(function() {
var geocoder = new google.maps.Geocoder();
var address = $(this).val() + ', France';
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
for (var i=0;i<results[0].address_components.length;i++) {
if (results[0].address_components[i].types[0] == 'locality')
$('#city').val(results[0].address_components[i].long_name)
}
}
});
}
});
I'm building a Wordpress site using Sencha Touch. I've created a plugin that converts the posts to JSON for the application to read.
In the Applications "Post View" I am loading post information (Title, Body, etc) and I would like to have a carousel that displays all the images within the array "images" I've put through the json within the post.
My application is using the MVC structure (because I like the feeling of my teeth being pulled) and so I need a list of posts to pass the data through onto the Single Posts panel, then get the Images array into the carousel.
The goal is to select a post from the list, load the data into the postsingleview (currently working) and then load the images from that post into the carousel.
Any and all suggestions much appreciated.
Here's what I have so far:
JSON: http://pastie.org/2497239 (Stack's codewrapper wouldn't let me display json, here's the pastebin)
PostListView:
App.views.PostListView = Ext.extend(Ext.Panel, {
postStore: Ext.emptyFn,
postList: Ext.emptyFn,
id:'postlistview',
layout: 'card',
initComponent: function () {
this.postList = new Ext.List({
store: App.stores.postStore,
grouped: true,
emptyText: '<div style="margin:5px;">No notes cached.</div>',
onItemDisclosure: true,
indexBar: true,
itemTpl: '<div class="list-item-title">{title}</div>',
});
this.postList.on('disclose', function (record) {
this.onViewPost(record);
}, this),
this.items = [this.postList];
App.views.PostListView.superclass.initComponent.call(this);
},
onViewPost: function (record) {
Ext.dispatch({
controller: App.controllers.masterController,
action: 'viewpost',
record: record,
});
},
});
Master Controller with "ViewPost" action:
'viewpost': function (options) {
App.views.postSingleView.bodycard.update(options.record.data);
App.views.postSingleView.funfactcard.update(options.record.data);
App.views.postSingleView.crosscard.update(options.record.data);
App.views.postSingleView.historycard.update(options.record.data);
App.views.postSingleView.architectcard.update(options.record.data);
App.views.postSingleView.commentcard.update(options.record.data);
App.views.postSingleView.dealscard.update(options.record.data);
App.views.postView.setActiveItem(
App.views.postSingleView,
{ type: 'slide', direction: 'left' }
);
},
Post Single View (Which displays the data from the post)
App.views.PostSingleView = Ext.extend(Ext.Panel, {
title:'Single Post',
id:'postsingleview',
layout:{
type:'vbox',
align:'stretch',
pack:'end'
},
defaults: { flex: 1 },
initComponent: function () {
this.bodycard = new Ext.Component({
title:'Info',
scroll:'vertical',
cls : 'card bottomcard card3',
iconCls:'info',
tpl: '<tpl for=".">' +
'<div id="bottomcard-container">{body}</div>' +
'</tpl>',
});
[... There are 7 Ext.Components, but I want to keep it short so I'm deleting them for Display on Stack ]
this.postSinglePanel = new Ext.TabPanel({
dock:'bottom',
id:'singlepost-bottompanel',
items:[
this.bodycard,
this.funfactcard,
this.crosscard,
this.historycard,
this.architectcard,
this.commentcard,
this.dealscard,
],
tabBar:{
dock:'bottom',
scroll:'horizontal',
layout:{
pack:'center',
},
},
});
var numberOfPages = 4;
// Create pages for the carousel
var pages = [];
for (var i=0; i<numberOfPages; i++) {
pages.push(new Ext.Component({
id: 'page'+i,
cls: 'page',
tpl: '<tpl for=".">{body}</tpl>',
}));
}
// Create the carousel
this.carousel = new Ext.Carousel({
id: 'carousel',
defaults: {
cls: 'card'
},
items: pages,
});
this.items = [this.carousel, this.postSinglePanel];
App.views.PostSingleView.superclass.initComponent.call(this);
},
});
I think that this is what you need.
Basically the idea is to manually add the carousel items after the store has finished loading the data.
Here is a basic code for creating a carousel and populating the items from a store.
this specific example is for an image gallery:
myApp.views.ImageGallery = Ext.extend(Ext.Panel,{
layout: {
type: 'fit'
},
initComponent: function() {
this.setLoading(true,true);
var proxyUrl = 'my_url'
var store = new Ext.data.Store({
panel: this,
model: 'myModel',
proxy: {
type: 'ajax',
url: proxyUrl,
reader: {
type: 'json'
}
},
listeners: {
single: true,
datachanged: function(){
var items = [];
store.each(function(rec){
items.push({
html: '<img class="myImage" src=' + rec.get('imageUrl') + '>'
});
});
var carousel = new Ext.Carousel({
cardSwitchAnimation: 'slide',
layoutOnOrientationChange: true,
ui: 'light',
items: items,
style: 'background: #000',
itemId: 'carousel'
});
this.panel.setLoading(false);
this.panel.add(carousel);
this.panel.doLayout();
}
}
});
store.read();
myApp.views.ImageGallery.superclass.initComponent.call(this);
}});