I have written a simple script in jsPsych that welcomes the user to the page, then thanks them for their participation after they press any key. However, it does not load the CSS styling associated with the page. The style sheet is at the appropriate location, and there are no errors or warnings generated.
The entirety of the code is below:
<!DOCTYPE html>
><html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jsPsych/jspsych.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-image-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-survey-text.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="jsPsych/css/jspsych.css" rel="stylesheet" type="text/css"/>
</head>
<body>
</body>
<script>
var timeline = []
var welcome = {type: "html-keyboard-response",
stimulus: "Welcome to the experiment, and thank you for your time! Press any key to continue."
};
timeline.push(welcome)
jsPsych.init({
timeline: timeline,
on_finish: function() {
$.ajax({
type: "POST",
url: "/experiment-data",
data: jsPsych.data.get().json(),
contentType: "application/json"
})
.done(function() {
alert("Thank you!")
window.location.href = "/";
})
.fail(function() {
alert("A problem occurred while writing to the database. Please contact the researcher for more information.")
window.location.href = "/";
})
}
})
</script>
</html>
I'm updated Maps API for JavaScript to 3.1v. After that Raster map doesn't show correctly. After some zooms getting not a clear picture and problems with the font. Actual:
I've tried to put some different pixel ratio and another map types but it didn't help. Is there a bug?
This is how I init map:
var platform = new H.service.Platform({
'apikey': apiKey,
});
$scope.defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320,
pois: true
});
$scope.geocoder = platform.getGeocodingService();
$scope.map = new H.Map(
document.getElementById("here-map-canvas"),
$scope.defaultLayers.raster.normal.map,
{
zoom: 12,
center: { lat: officeLat, lng: officeLng }
});
$scope.markerGroup = new H.map.Group();
$scope.map.addObject($scope.markerGroup);
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents($scope.map)); //Step 3: make the map interactive
$scope.ui = H.ui.UI.createDefault($scope.map, $scope.defaultLayers); ```
**Please check imgs:**
Actual: https://i.stack.imgur.com/Vu17g.jpg
Expected: https://i.stack.imgur.com/Tcid8.jpg
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Refs:
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css?dp-version=1549984893" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
Add pixelRatio parameter next to zoom & center:
$scope.map = new H.Map(
document.getElementById("here-map-canvas"),
$scope.defaultLayers.raster.normal.map,
{
zoom: 12,
center: { lat: officeLat, lng: officeLng },
pixelRatio: window.devicePixelRatio || 1
}
);
and disable fractional zoom on Behavior as well as ZoomControl UI (which is enabled by default in v3.1):
behavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
$scope.ui.removeControl('zoom');
$scope.ui.addControl('zoom', new H.ui.ZoomControl({
fractionalZoom: false,
alignment: H.ui.LayoutAlignment.RIGHT_BOTTOM
}));
For more details see documentation for map options: https://developer.here.com/documentation/maps/topics_api/h-map-options.html#h-map-options
ZoomControl Options:
https://developer.here.com/documentation/maps/topics_api/h-ui-zoomcontrol-options.html
and Features to be disabled on Behavior: https://developer.here.com/documentation/maps/topics_api/h-mapevents-behavior-feature.html
Please add below libraries and try to run it, also share the libraries that has been used in the code.
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"
type="text/javascript" charset="utf-8"></script>
I'm trying to use jsTree in AngularJS powered MVC5 school project. To use jsTree in angular app I'm using this directive.
From what I can observe everthing working ok:
- jstree loads correctly data and structure, and fires all events
- jstree loads CSS style (if i change for instance margin in css, it's reflected to jstree, if remove css reference it rendered as ordinary HTML UL)
However it looks like, that rest of layout doesnt work:
- no background change, when i move cursor over node
- no conectors, no node images, no arrows
From what i was able to find it looks like that css is not using images referenced in it:
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-image: url("32px.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
So I tried to use:
bundles.Add(new StyleBundle("~/jstree").Include(
"~/Content/jstree/style.css", new CssRewriteUrlTransform()));
Css with images is placed in same folder:
But that also did not worked. Any ideas? Sugestions?
Rest of the code:
angular.module('JosefinaApp', ['ui.layout', 'JosefinaApp.controllers', 'jsTree.directive']);
angular.module('JosefinaApp.controllers', [])
.controller('TreeViewController', ['$scope', '$location', '$http', function ($scope, $location, $http) {
$location.path('/home');
$http({
method: 'GET',
url: '/api/project/gettasks/1',
}).
success(function (data) {
$scope.treeModel = data;
}).
error(function () {
$scope.test = "Error";
});
$scope.treeViewNodeSelected = function (e, data) {
console.log(data.node.id);
};
}])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="models.helloAngular"></title>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"> </script>
<link href="#Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Styles.Render("~/jqueryUI")
#Styles.Render("~/uiLayout")
#Styles.Render("~/jstree")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryUI")
<script src="#Url.Content("~/Scripts/angular.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui-router.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui/ui-layout.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jstree.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jsTree.directive.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/JosefinaApp.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/LandingPageController.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/TreeViewController.js")" type="text/javascript"> </script>
</head>
<body>
<div ng-app="JosefinaApp">
<div ng-controller="TreeViewController">
<js-tree theme="default" tree-events="select_node:treeViewNodeSelected" tree-data="scope" tree-model="treeModel">
</js-tree>
</div>
</div>
#RenderBody()
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Browser stored images, internet explorer was caching empty images and showing them instead of geting them from server.
... kill me please
I am having trouble connecting Google calendar to Full Calendar. The event only shows up in the top left calendar frame. If I enter multiple events in the google calendar, it only displays one in the top left frame as well. Code posted below.
<link href="../css/main_text.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src="fullcalendar/fullcalendar.js"> </script>
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'http://www.google.com/calendar/feeds/info%4011floor.com/public/basic',
className: 'gcal-event', // an option!
currentTimezone: 'America/New_York' // an option!
}
});
});
</script>
<link href="fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css">
I using file *.ashx to get data from database. When I alert jsondata.responseText , it show json string
Respond text is:
{
"total":2,
"page":5,
"record":10,
"row":[
{"i":0, "cell""["1","Desktop","Desktop Description","200"]},
{"i":1, "cell""["2","Laptop","Laptop Description","1000"]},
{"i":2, "cell""["2","DVD","DVD Description","100"]},
{"i":3, "cell":["","","",""]}
]
}
But jqgrid not show data.
Please review my code and help me please !
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sample_Json_Jqgrid._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<%--<link rel="stylesheet" type="text/css" href="Resources/themes/coffee/grid.css" title="steel" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="Resources/themes/jqModal.css" />--%>
<link href="Resources/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Resources/themes/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
<link href="Resources/src/css/jquery.searchFilter.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Resources/src/css/ui.jqgrid.css" media="screen" rel="stylesheet" type="text/css" />
<link href="Resources/src/css/ui.multiselect.css" media="screen" rel="stylesheet" type="text/css" />
<script src="Resources/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="Resources/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="Resources/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="Resources/src/grid.base.js" type="text/javascript"></script>
<script src="Resources/src/ui.multiselect.js" type="text/javascript"></script>
<script src="Resources/src/grid.celledit.js" type="text/javascript"></script>
<script src="Resources/src/grid.common.js" type="text/javascript"></script>
<script src="Resources/src/grid.custom.js" type="text/javascript"></script>
<script src="Resources/src/grid.formedit.js" type="text/javascript"></script>
<script src="Resources/src/grid.grouping.js" type="text/javascript"></script>
<script src="Resources/src/grid.import.js" type="text/javascript"></script>
<script src="Resources/src/grid.inlinedit.js" type="text/javascript"></script>
<script src="Resources/src/grid.jqueryui.js" type="text/javascript"></script>
<script src="Resources/src/grid.loader.js" type="text/javascript"></script>
<script src="Resources/src/grid.postext.js" type="text/javascript"></script>
<script src="Resources/src/grid.setcolumns.js" type="text/javascript"></script>
<script src="Resources/src/grid.subgrid.js" type="text/javascript"></script>
<script src="Resources/src/grid.tbltogrid.js" type="text/javascript"></script>
<script src="Resources/src/grid.treegrid.js" type="text/javascript"></script>
<script src="Resources/src/jqDnR.js" type="text/javascript"></script>
<script src="Resources/src/jqModal.js" type="text/javascript"></script>
<script src="Resources/src/jquery.fmatter.js" type="text/javascript"></script>
<script src="Resources/src/jquery.searchFilter.js" type="text/javascript"></script>
<script src="Resources/src/JsonXml.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="grid" cellpadding="0" cellspacing="0">
</table>
<div id="pager" style="text-align: center;">
</div>
</div>
<script src="Resources/js/app.grid.js" type="text/javascript"></script>
</form>
</body>
</html>
File javascript to jqgrid : app.grid.js
var mydata ;
function CreateGrid()
{
jQuery("#grid").jqGrid({
datatype: "local",
colNames:['ProductId','ProductName','Description','Price'],
colModel:[
{name:'ProductId',index:'ProductId',sorttype:"text",hidden:false},
{name:'ProductName',index:'ProductName',sorttype:"text",resizable:false,
width:100,sortable:true,align:'left',editable:true},
{name:'Description',index:'Description',sorttype:"text",resizable:false,
width:1000,sortable:true,align:'left',editable:true},
{name:'Price',index:'designation',sorttype:"int",resizable:false,
width:100,sortable:true,align:'left',editable:true}
],
rowNum: 1,
rowList: [5, 10, 15],
pager: jQuery('#pager'),
imgpath: 'themes/redmond/images',
sortname: 'ProductId',
viewrecords: true,
sortorder: "desc",
caption: 'Products'
}).jqGrid('navGrid','#pager',{edit:true,add:true,del:true});
BinDataGrid();
}
function BinDataGrid()
{
$("#grid").clearGridData();
jQuery(function($) {
$.ajax({
type: "'POST'",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "GetDataHandler.ashx",
data: "{}",
complete: function(jsondata, stat)
{
window.alert("Status received is " + stat);
window.alert("Response text is: " + jsondata.responseText);
if (stat == "success")
{
var thegrid = jQuery("#grid")[0];
thegrid.addJSONData(eval("(" + jsondata.responseText + ")"));
}
}
});
})
}
jQuery(document).ready(function() {
CreateGrid();
});
Please help me
Best regard
Your responce text is wrong:
"cell""["1","Desktop","Desktop Description","200"]
this should be (note the : instead of " after the "cell" declaration):
"cell":["1","Desktop","Desktop Description","200"]
.. as the blank row you enter last, it is correct:
"cell":["","","",""]
also avoid using " in values, you should replace them with somethign other because some browsera cannot handle " escaping ... IE 6 ... :))
Sorry but your code have so many errors, that it is difficult to describe all together. The first error in the JSON data with the quote (") instead of :. The data after the modification will be
{
"total": 2,
"page": 5,
"record": 10,
"row": [
{"i": 0,"cell": ["1","Desktop","Desktop Description","200"]},
{"i": 1,"cell": ["2","Laptop","Laptop Description","1000"]},
{"i": 2,"cell": ["2","DVD","DVD Description","100"]},
{"i": 3,"cell": ["","","",""]}
]
}
where you have data like "i": 2 instead of "id": 2.
In the list of JavaScript files included in the <head> element you have full chaos. You included jqGrid more as once JavaScript files in compressed and uncompressed form. Moreover you used wrong order of files: you must include jquery-1.4.2.min.js before jquery-ui-1.8.5.custom.min.js which use it and include grid.locale-en.j before jquery.jqGrid.min.js. The file grid.loader.js by the way include all developer version of the files one more time. Moreover you should include in the head the meta element like <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> (see example).
You should read the How to Install part of the documentation, decide which version of jqGrid (compressed or developer version) you want to use and include it.
UPDATED: I could continue with the list of errors. The main JavaScript file app.grid.js is written also very dirty. It contain clear errors like type: "'POST'" instead of type: 'POST' or type: "POST", use eval function instead of JSON.parse and so on.
The usage of ashx to provide the data I find also not the best idea. Much better can be used ASMX web service, svc WCF service or ASP.NET MVC application with controller returns JSON data. Look at my old answer where you will find some links to examples to working code.
The usage of both jQuery(function($) {/**/} and jQuery(document).ready(function() {/**/}); in the same code is also not good.
I recommend you to verify the JSON data in http://www.jsonlint.com/ and verify your JavaScript code in http://www.jslint.com/.