I am trying to get Tabulator (or any database) to connect to RSS feed. Tried using ajax, but cannot get to work. Tried to connect to a JSON feed, still no luck.
Maybe the ajax settings need to be customized. Any suggestions?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/tabulator- tables/dist/js/tabulator.min.js"></script>
<link href="dist\css\1tabulator.css" rel="stylesheet">
<script src="lib/jquery-3.6.0.min.js"></script>`
<style>
body {
background-color: rgb(224, 214, 214);
color: black;
}
</style>
</head>
<body>
<div id="example-table"></div>
<script>
var table = new Tabulator("#example-table", {
ajaxURL: "https://www.jsonfeed.org/feed.json",
//ajaxConfig: "GET",
//ajaxContentType:"json",
height:"311px",
layout:"fitColumns",
placeholder: "Placeholder",
index:"id",
columns:[
{title:"id", field: "id", hozAlign:"center", width: "12pt"},
{title:"NewsTime", field:"title", hozAlign:"center", width: "12pt"},
],
});
</script>
</body>
</html>
Related
I need to add a Vue Web Component to improve the UI of a Server Side application.
I created the following simple application:
<script>
export default {
data() {
return { greeting: 'Hello World!'}
}
}
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red!important;
}
</style>
Then I added the following to my javascript:
import { defineCustomElement } from 'vue'
import hello from './hello.component.vue'
customElements.define('v-hello', defineCustomElement(hello));
I build it using Parcel and did not get any error.
I run it and, in the browser, I see "Hello World!" but the red color is not applied.
I inspected the page source in the browser and I have:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home page</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<v-hello>
Shadow Content (Open) = $0
<p class="greeting" data-v-c566f4="">Hello World!</p>
</v-hello>
<script src="/index.js" type="text/javascript" defer=""></script>
</body>
</html>
When I check Index.css I find the style:
.greeting{color:red!important}
Why isn't the red color style being applied?
I tried in Safari, Google Chrome and Safari.
Someone on stackoverflow tried to helped me implement an OSM on my website. The code snippit runs fine here, but nothing will display on my website page, please see www.livehazards.com/sidebar-test. Does anyone know what the problem is. Thanks
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#mapid { position:absolute; top:0%; bottom:0%; left:0%; width:100%; }
</style>
</head>
<body>
<div id='mapid'></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
maxZoom: 18,
});.addTo(mymap);
</script>
</body>
</html>
Your code contains an unneeded semicolon that causes the error:
});.addTo(mymap)
It should be:
}).addTo(mymap);
HERE Maps JavaScript API errors in Firefox and Chrome (but not IE) when there are style sheets in the body.
Working example:
<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
Failing Example:
<!DOCTYPE html>
<html>
<head>
<title>Failing</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
The problem appears to be from the following logic:
var f = c.styleSheets, p = f.length, a, k, m = c.createElement("style");
m.setAttribute("type", "text/css");
c.getElementsByTagName("head")[0].appendChild(m);
a = f[f.length - 1];
It looks like what's happening is document.styleSheets will have elements in the body after elements in the head, so this tries to manipulate an external style sheet instead of the style element it just created.
According to the HTML5 specification on link:
If the rel attribute is used, the link element is restricted to the head
element....
Therefore your HTML5 markup is invalid, since the link should not occur within the body, this is metadata content which should be placed in the head. Obviously IE is being more lenient for some reason (I guess there must be some sort of IE specific code being used here to try and get it to be standards compliant, which happens to accept the link in a body as a by-product)
This question is specific to the design. I have an application that displays positions on a map all works "fine". But now I need to design the user interface, that goes beyond the map (buttons, forms, etc.) these will be located on one side of the map, but under any reason the map is displayed once change some of the CSS page.
I'm a bit desperate since neither my own CSS, or bootstrap (2.3.0), foundation (3.2.5) works. The map simply not displayed, in the console there are no errors. Event in the better case the map is displayed but with graphics glitchs (zoom controls messed, bad markers position, etc) That may be happening and how I can fix this. Will I have to use an iframe? or is there a better solution?
I've readed about max-width: none fix but this is solving nothing. To clarify that I am using the maps are not static.
I can get work perfectly the maps if try with a simple markup and styles
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="/css/styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="/js/app.js"></script>
</body>
</html>
styles.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
app.js
google.maps.event.addDomListener(window, 'load', function() {
options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
});
But obviously it'snt enough for build the application.
A solution that includes the use of iframes, since it seems that is the only way that the map is not affected by the rest of the CSS
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span9">
<iframe id="map_container" src="/map.html" frameborder="0"></iframe>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
map.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<link rel="stylesheet" href="/css/map-styles.css" media="all">
</head>
<body>
<div id="map" class="map_canvas"></div>
</body>
</html>
map-styles.css
html, body, .map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
app.js
google.maps.event.addDomListener(window, 'load', function() {
var options = {
zoom: 15,
center: new google.maps.LatLng(10.472937,-73.262308),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
$iframe = $('#map_container'),
map_el = $iframe.contents().find('#map')[0],
map = new google.maps.Map(map_el, options);
// Match iframe size to parent
$iframe.width($iframe.parent().width());
$iframe.height($iframe.parent().height());
});
i want to use Ext.net control in aspnet mvc 3 but i can not do that. Can you help me?
<h2>List</h2>
<div>
<% Ext.Net.TabPanel tb = new TabPanel() { ID="tb1", Height = 300 };
tb.Items.Add(new Ext.Net.Panel() { ID = "1", Title = "Test" });
%>
</div>
But no result return to me if i look page source result:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/WebResource.axd?d=yZr1qXAiAzbIyuMwWFg4QLahCw7ja-r5MvwrWaYGNYBiSLompC1t3Dre6yVT_nX3dE_5QRW8Pq_M_mf3ckpaRofaHZG9JTWR4XNA3Qlk1l0lrRtAk7_XdSqezLOHVVzNAnFsM_Xvd-_Jkz3oAxnZR52Pj2Gx6OQ6XgRMpjV7wg41&t=634661604900000000" />
<title>
List
</title>
<style type="text/css">
html
{
background-color:Gray;
}
.column
{
float:left;
width:75%;
border:solid 1px black;
margin-right:10px;
padding:5px;
background-color:white;
min-height:750px;
}
</style>
<script type="text/javascript" src="/WebResource.axd?d=EEB3ci-aaYX0YFB1eKO9bNJxz21l7U6Xgp6gafhX-ELA3dqrXi0vJChPyMcsY02FqNHlDFzFUXhC1Wr20e23KQDHybExiJcMtk25sY6H14MJWhlFGE-pP5O0yfnfTY5rqctCxUyaF0PEA-FTaqBmsMnVHTwakoGf9vavE-17ugQ1&t=634661604900000000"></script>
<script type="text/javascript" src="/WebResource.axd?d=MC7em5dhNLnBAdrW93hZYkG4dXWQcASL6iXw2IQb1NzxHMGA11tPZfow93hy4T_4dZqotlxW-YF95RJptzY352oINWGWb6cJr4JvBvRDC0amtlBU65lPTxvQeag4qmgoBXQ3Y-KW6mtrxsiGMKkIRQ2&t=634661604900000000"></script>
<script type="text/javascript" src="/WebResource.axd?d=hG2uE2_g7tabtfNStz4lSLSwuXYXbXisubF7Fk7ezPJp9TZl2fyBJu3H-wYG-DS9JithBK3TA4ThRCkhX53y2HlV02jYOaX-dL8EVSpL2hvpa6PYag6EVudAnf_JzCoPcMqKXc2dJ0PFK5qP7XXZeQ2&t=634661604900000000"></script>
<script type="text/javascript">
//<![CDATA[
Ext.net.ResourceMgr.init({id:"ctl00$ResourceManager1",BLANK_IMAGE_URL:"/WebResource.axd?d=SanxrxztuPyOAwG7dcFi5HvB6yOoIwnKJN3sevUiXssgue_dNhgx0KWC2p7tE4ygV4N6_n3aqstZCgfhUs4nL5nCZggPLeFdFhYYgXln5EK0OaMOfRO77y22sclo4saMp9irYOG5hNb8NvsMMkgeqm9TCwonBfPgYchN-BVRq4c1&t=634661604900000000",theme:"blue"});Ext.onReady(function(){Ext.QuickTips.init();});
//]]>
</script>
</head>
<body>
<div class="column">
<h1>Job Schedule </h1>
<h2>List</h2>
<div>
</div>
</div>
</body>
</html>
The code you have posted is WebForm syntax.
If you are using ASP.NET MVC Razor and the latest Ext.NET v2.x release, you can render all/any of the Ext.NET Components using Razor syntax.
The following sample demonstrates rendering a very simple TabPanel.
Example
#{
Layout = "";
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET Examples</title>
</head>
<body>
#Html.X().ResourceManager()
#(Html.X().TabPanel()
.Height(300)
.Items(items => {
items.Add(Html.X().Panel().Title("Test"));
}));
</body>
</html>
Hope this helps.
Page.Controls is present only in web forms. I suspect that your control is for web forms, therefore it won't work with MVC.