Using the locally downloaded version of jqGrid 4.15.5 the paginator images are not visible and the table colors are gray.
Using version with links http://cdnjs... of jqGrid 4.15.5 the paginator images are visible and the table colors are ok.
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!--link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1.min.css"/>
<link rel="stylesheet" type="text/css" href="ui.jqgrid.min.css"/>
<link rel="stylesheet" type="text/css" href="ui.multiselect.min.css"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.min.js"></script>
<script type="text/javascript" src="jquery.jqgrid.min.js"></script>
<script type="text/javascript" src="ui.multiselect.js"></script-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<script>
$(document).ready(function(){
'use strict';
$("#jqgrid").jqGrid({
colModel: [
{
name: 'Code',
width: 15
},
{
name: 'Description',
width: 70
}
],
sortname: 'Code',
sortorder: 'asc',
width: $(window).width() - 50,
height: 130,
rowNum: 5,
rownumbers: true,
pager: "#jqGridPager",
viewrecords: true,
data: [
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'}
],
onSelectRow:{
}
});
$('#jqgrid').jqGrid('filterToolbar',{
stringResult: true,
searchOperators: true
});
$(window).resize(function() {
$('#jqgrid').jqGrid('setGridWidth', parseInt($(window).width()) - 50);
});
});
</script>
</head>
<body>
<div>
<table id="jqgrid"></table>
<div id="jqGridPager"></div>
</div>
</body>
</html>
Plugins locally downloaded are:
jquery-3.5.1.min.js
jquery-ui-1.12.1.min.js
jquery-ui-1.12.1.min.css
jquery.jqgrid.min.js
ui.jqgrid.min.css
ui.multiselect.js
ui.multiselect.min.css
So, what am I doing wrong?
Thanks.
Related
I want to add a png icon to a mapbox map from any publicly available online source.
I'm trying to use this example here from mapbox.com, which uses a png from wikimedia:
https://docs.mapbox.com/mapbox-gl-js/example/add-image/
This is the png they use:
https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png
I can swap it out from anything at Wikimedia, but not anything else. For example, swap the link out with this one, and it doesn't appear:
https://www.thenittygritty.org/coronavirus/circle1.png
What am I missing here??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add an icon to the map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
map.on('load', function() {
map.loadImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png',
function(error, image) {
if (error) throw error;
map.addImage('cat', image);
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}
]
}
});
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'point',
'layout': {
'icon-image': 'cat',
'icon-size': 0.25
}
});
}
);
});
</script>
</body>
</html>
The problem lies with the CORS settings of your browser. When I allow CORS, the image loads just fine.
Error:
Access to fetch at
'https://www.thenittygritty.org/coronavirus/circle1.png' from origin
'null' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
What is CORS: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
You can try this Chrome extension to allow CORS:
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
I am starting using Vega and I am now trying to stream my data to nicely refresh my graph. I followed this doc (https://vega.github.io/vega-lite/tutorials/streaming.html) with no success so far. The examples I found have values in arrays and mine are in a JSON file which is refreshed on a regular basis. I ended up with this code which properly shows my graph as I want but it does not refresh my data.
<html>
<head>
<title>A title</title>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vega#5.8.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4.0.0-beta.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.1.0"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#5"></script>
</head>
<body>
<div id="vis"></div>
<script>
var vlSpec = {
data: {"url": "http://localhost:8123/d.json", "name":"table"},
mark: "bar",
"width": 1240,
"encoding": {
"y": {"field": "task", "type": "ordinal", "sort":"x2"},
"x": {"field": "start", "type": "temporal", "aggregate":"sum"},
"x2": {"field": "end", "type": "temporal"},
"color": {"field": "status", "type": "nominal"}
}
};
// Embed visualization and save view as window.view:
vegaEmbed('#vis', vlSpec).then(function(res) {
window.setInterval(function() {
var changeSet = vega
.changeset()
.insert()
res.view.change('table', changeSet).run();
}, 1000);
});
</script>
</body>
</html>
My issue seems to be the insert() where in the example of the doc they insert the result of a function to generate data and I should insert here my JSON file -- I tried different variations with fetch but with no success.
Any help would be appreciated.
Thanks
Let me answer my own question as I figured it out.
First I used jquery:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
I removed the url tag not to load the JSON file at first:
"data": {"name":'table'},
And the VEGA streaming data from my JSON file:
vegaEmbed('#vis', vlSpec).then(function(res) {
var newdata ;
window.setInterval(function() {
jQuery.getJSON("http://localhost:8123/d.json", function(data) {
newdata = data;
})
var changeSet = vega
.changeset()
.remove(vega.truthy)
.insert(newdata)
console.log (newdata)
res.view.change('table', changeSet).run();
}, 1000);
});
It works like a charm !
Screenshot of the issues:
Web3.min.js path in my system directory!
Web3.min.js is loaded from folder in my browser
Copy of the web3.min.js in the same folder where index.html file is present.
Code added
info of the node!
I am facing following two issues:
Failed to load resource: web3.min.js:1 net::ERR_CONNECTION_REFUSED
ERROR: Couldn't connect to node http://localhost:8545.
My Index.html file is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<h1>Coursetro Instructor</h1>
<h2 id="instructor"></h2>
<label for="name" class="col-lg-2 control-label">Instructor Name</label>
<input id="name" type="text">
<label for="name" class="col-lg-2 control-label">Instructor Age</label>
<input id="age" type="text">
<button id="button">Update Instructor</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
web3.eth.defaultAccount = web3.eth.accounts[0];
var CoursetroContract = web3.eth.contract([
{
"constant": false,
"inputs": [
{
"name": "_fName",
"type": "string"
},
{
"name": "_age",
"type": "uint256"
}
],
"name": "setInstructor",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [],
"name": "getInstructor",
"outputs": [
{
"name": "",
"type": "string"
},
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
]);
var Coursetro=CoursetroContract.at('0x95712aa4ff464e56f76af55da6239a368c459ed4');
console.log(Coursetro);
</script>
</body>
</html>
If you are connecting to a local node:
You have included jquery cdn, similarly include a web3 from the link web3_cdn.
You can download one file from the link and connect the file in your webapp by
<script type="text/javascript" src="web3.min.js"></script>
And make sure when you run the app your metamask is disabled. Metamask injects a web3 object right into your application.
For reference check the other answers link
i have this problem and i solve it .
the solution :
you must create index.html and main.css in folder project, not in node_modules folder.
I want to create a customized SAP launchpad. For that I need to use sap.ui.unified.Shell as the container. It is possible to load some oControlls inside of the content of this shell. Now my question is how can I use routing inside of this shell container and load the other views inside of this shell? Or maybe how can I connect sap router for loading data inside of the shell container?
Here is a good example about how to load different views inside of the unified shell:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Column Micro Chart on a Generic Tile</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{
"Testing": "./"
}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.ui.core.ComponentContainer({
height : "100%",
name : "Testing"
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
Component.js
sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = sap.ui.core.UIComponent.extend("Testing.Component", {
metadata: {
rootView: "Testing.view.App",
dependencies: {
libs: [
"sap.m",
"sap.suite.ui.microchart"
]
},
config: {
sample: {
files: [
"view/App.view.xml",
"controller/App.controller.js"
]
}
},
routing: {
config: {
viewType: "XML",
viewPath: "Testing.view",
controlId: "appShell",
clearTarget: true,
routerClass: "sap.ui.core.routing.Router"
},
routes: [{
pattern: "",
name: "home",
target: "home"
},
{
pattern: "routed",
name: "routed",
target: "routed"
}
],
targets: {
home: {
viewName: "Home",
controlId: "appShell",
controlAggregation: "content",
clearAggregation: true
},
routed: {
viewName: "Routed",
controlId: "appShell",
controlAggregation: "content",
clearAggregation: true
}
}
}
},
init: function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// this component should automatically initialize the router
this.getRouter().initialize();
}
});
return Component;
});
controller/App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("Testing.controller.App", {
onInit: function() {
}
});
});
controller/Home.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("Testing.controller.Home", {
onInit: function() {
},
onButtonPress: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
this.getView().getParent().removeAllContent();
oRouter.navTo("routed", false);
}
});
});
controller/Routed.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("Testing.controller.Routed", {
onInit: function() {
},
onButtonPress: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
this.getView().getParent().removeAllContent();
oRouter.navTo("home", false);
}
});
});
view/App.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:u="sap.ui.unified" controllerName="Testing.controller.App" displayBlock="true">
<u:Shell id="appShell">
<u:headItems>
<u:ShellHeadItem tooltip="Configuration" icon="sap-icon://menu2"
press="handlePressConfiguration" />
<u:ShellHeadItem tooltip="Home" icon="sap-icon://home"
press="handlePressHome" />
</u:headItems>
<u:user>
<u:ShellHeadUserItem image="sap-icon://person-placeholder"
username="{shell>/userName}" />
</u:user>
<u:paneContent>
</u:paneContent>
<u:content>
</u:content>
</u:Shell>
</mvc:View>
view/Home.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="Testing.controller.Home" displayBlock="true">
<Page title="Home">
<headerContent>
<Button text="to route" press="onButtonPress" />
</headerContent>
<content>
</content>
</Page>
</mvc:View>
view/Routed.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="Testing.controller.Routed" displayBlock="true">
<Page title="A route">
<headerContent>
<Button text="to home" press="onButtonPress" />
</headerContent>
<content>
</content>
</Page>
</mvc:View>
i am trying to make editable columns in jqxgrid. But i am having the error
Uncaught Error: jqxGrid: Missing references to the following module(s): jqxgrid.edit.js but as you can see from below i have used the reference jqxgrid.edit.js , i also have similar problem with columnresize=true propery. Any idea where i messed up?
thanks
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=”description”>Edit Item</title>
<link rel=”stylesheet” href=”/Content/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxcore.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxdata.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxmenu.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxgrid.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxlistbox.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”/Scripts/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”/Scripts/globalize.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
…………..
var detailsAdapter = new $.jqx.dataAdapter(detailsSource, { autobind: true });
$(“#jqxgrid”).jqxGrid({
source: detailsAdapter,
selectionmode: ‘singlecell’,
editable: true,
pageable: true,
autoheight:true,
columns: [
{ text: 'Item Name', dataField: 'FullItemName', width: 200, editable: false },
{ text: 'Unit', width: 100, editable: true },
{ text: 'Beginning Balance', width: 180, editable: true },
{ text: 'Loss', width: 80, editable: true, cellsalign: 'right' },
{ text: 'Quantity Recieved', width: 90, editable: true, cellsalign: 'right'},
{ text: 'DOS', width: 100, editable: true, cellsalign: 'right' },
{ text: 'Requested Quantity', width: 100, editable: true, cellsalign: 'right'}
],
});