I can use "https://api.opentopodata.org/v1/srtm90m?locations=-43.5,172.5" to get the follwoing results with a browser:
{
"results": [
{
"dataset": "srtm90m",
"elevation": 45.0,
"location": {
"lat": -43.5,
"lng": 172.5
}
}
],
"status": "OK"
}
But, I have a problem making the following code work in javascript. Specifically, the "$.getJSON()" function does not work. Could someone help me out with this?
<!DOCTYPE html>
<head>
<title>JavaScript - read JSON from URL</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="mypanel"></div>
<script>
var url ="https://api.opentopodata.org/v1/srtm90m?locations=-43.5,172.5"
$.getJSON(url, function(data) {
alert(data);
});
</script>
</body>
</html>
Related
Hello and good evening,
How do I fix this. I have written some code and I want to fit to a Webview in react native. It Loads fine , But it does not fit to screen. It Looks something like this
My Code is looking something like this
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
<select onChange="LoadChart();" id="pairs">
<option value="BTCUSDT">BTCUSDT</option>
<option value="ETHUSDT">ETHUSDT</option>
</select>
<br>
<div class="tradingview-widget-container" id="tvchart"></div>
</body>
<script>
LoadChart();
function LoadChart(){
let symbol = document.getElementById('pairs').value;
new TradingView.widget(
{
"width": 1300,
"height": 610,
"symbol": "BINANCE:"+symbol,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tvchart"
}
);
}
</script>
</html>
And the react native Code is looking Like this :
import React, { Component } from 'react';
import { View, StyleSheet , Text , Dimensions} from 'react-native';
import { WebView } from 'react-native-webview';
export default class ShowWebView extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View style = {styles.container}>
<WebView
source = {{ uri:
'URL for chart here' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: Dimensions.get("window").height,
width: Dimensions.get("window").width,
}
})
testing with https://google.com on webview it is okay, but when I test with this URL it is not looking good. What do I do?
So here is what I did to fix it.
I changed few things in my code. So incase to help someone in future.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
<select onChange="LoadChart();" id="pairs">
<option value="BTCUSDT">BTCUSDT</option>
<option value="ETHUSDT">ETHUSDT</option>
</select>
<br>
<div class="tradingview-widget-container" id="tvchart" style="width:auto;height:auto;max-height:100%;max-width:100%;max-device-width:100%;max-device-height:100%"></div>
</body>
<script>
LoadChart();
function LoadChart(){
let symbol = document.getElementById('pairs').value;
new TradingView.widget(
{
"width": screen.width,
"height": screen.height,
"symbol": "BINANCE:"+symbol,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tvchart"
}
);
}
</script>
</html>
Below is my html code that am using to implement select2
<!DOCTYPE html>
<html>
<head>
<title>department</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="ProgramForm">
<div class="form-row">
<div class="form-group col-md-4">
<label for="department">Department<span style="color:red">*</span></label>
<select v-model="department" class="form-control select2" >
<option> </option>
<option v-for="department in departmentData" v-bind:value="department">{{department.departmentName}}</option>
</select>
</div>
</div>
<p>Selected{{department}}</p>
</div>
My script section is as follows
<script type="text/javascript" >
$(function () {
var programFormVM=new Vue({
el:"#ProgramForm",
data:function(){
return {
department:{},
departmentData:[
{ "id": 1, "departmentCode": "HR", "departmentName": "Human Resource" },
{ "id": 2, "departmentCode": "ENG", "departmentName": "Engineering" },
{ "id": 3, "departmentCode": "AE", "departmentName": "Agricultural Economics" },
{ "id": 4, "departmentCode": "FS", "departmentName": "Field Station" },
{ "id": 5, "departmentCode": "ARC", "departmentName": "Architecture" }
]
}
},
created:function (){
},
methods:{
},
});
$('.select2').select2({
placeholder: "Select a department"
}).on('change', function(e) {
// var data = $(".select2 option:selected").val();
programFormVM.department=$(".select2 option:selected").val();
});
});
</script>
</body>
</html>
I need to display the object as a string. As it is, an getting [object Object].I Have tried .text() but its giving the name of the department only. I my case i need the whole object but as a string like { "id": 5, "departmentCode": "ARC", "departmentName": "Architecture" }. Please help out. Regards.
v-bind:value="department.id"
const selectedValue = <value from select>
const selectedDepartment = this.departmentData.find(x => x.id === selectedVal)
I have account with www.makemytrip.com and where 'from' field and 'to' field is already saved through cookies
Using extension, I would like to display the value present in 'from' field of that site. (whose id is 'hp-widget__sfrom')
On page load I am able to view the value but the same I can't achieve on click on my button defined in my extension
Below is the code: index.html
<html>
<head>
<title>My new extension</title>
</head>
<body>
<input type="button" id="save" value="Save Text">
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Test1",
"description": "TestDesc",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html",
"default_title": "Test11"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myContentScript.js"]
}
]
}
myContentScript.js
window.onload = function(){
alert("Hi by contentScript");
//alert(document.getElementById('hp-widget__sfrom').value); //this works!
//but the below doesn't work; onclick of button
document.getElementById('save').onclick = function(){
alert(document.getElementById('hp-widget__sfrom').value);
}
}
background.js
window.onload = function(){
alert("Hi by backgroundJS");
}
I appreciate any sort of help!
This is (part of) a web page. For some reason, I fail to get the slide-show operational. Can you help me fix it?
<!DOCTYPE html>
<html>
<head lang='fr'>
<meta http-equiv='content-type' content='text/html;charset=ISO-8859-1' />
<link href='../dojo-release-1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' media='all' />
</head>
<body class='claro'>
<script>
dojoConfig = {async: true, parseOnLoad: true}
</script>
<script type='text/javascript' src='../dojo-release-1.9.1/dojo/dojo.js'>
</script>
<script type='text/javascript'>
require(["dojo", "dojo/parser", "dojo/store/Memory", "dojox/image/SlideShow"]);
var imageData= {
identifier: "imageUrl",
items: [
{ imageUrl: "http://mysyte.net/photos/f1.jpg"},
{ imageUrl: "http://mysyte.net/photos/f2.jpg"},
{ imageUrl: "http://mysyte.net/photos/f3.jpg"},
{ imageUrl: "http://mysyte.net/photos/f4.jpg"}
]
};
</script>
<div data-dojo-type='dojo/store/Memory' data-dojo-props='data:imageData' data-dojo-id='imageStore'></div>
<div data-dojo-type='dojox/image/SlideShow' id='slideshow1' data-dojo-id='imageShow'
data-dojo-props='store: imageStore, noLink: true, autoStart:true, imageWidth:770, imageHeight:345, slideshowInterval: 5'>
</div>
</body>
</html>
What am I missing?? Can you help me fixing it? Thanks!
Problem solved.
<!DOCTYPE html>
<html>
<head lang='fr'>
<meta http-equiv='content-type' content='text/html;charset=ISO-8859-1' />
<link href='../dojo-release-1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' media='all' />
</head>
<body class='claro'>
<script>
dojoConfig = {async: true, parseOnLoad: true}
</script>
<script type='text/javascript' src='../dojo-release-1.9.1/dojo/dojo.js'></script>
<script type='text/javascript'>
var imageData= {
identifier: "imageUrl",
items: [
{ imageUrl: "http://mysyte.net/photos/f1.jpg"},
{ imageUrl: "http://mysyte.net/photos/f2.jpg"},
{ imageUrl: "http://mysyte.net/photos/f3.jpg"},
{ imageUrl: "http://mysyte.net/photos/f4.jpg"}
]
};
require(["dojo", "dojo/data/ItemFileReadStore", "dojox/image/SlideShow", "dijit/registry"], function(dojo, ItemFileReadStore, SlideShow, registry) {
dojo.ready(function() {
registry.byId('slideshow1').setDataStore(imageStore, {})
})
});
</script>
<div data-dojo-type='dojo/data/ItemFileReadStore' data-dojo-props='data:imageData' data-dojo-id='imageStore'></div>
<div data-dojo-type='dojox/image/SlideShow' id='slideshow1' data-dojo-id='imageShow'
data-dojo-props='autoStart:true, showTitle: false, noLink: true, hasNav: false, imageWidth:770, imageHeight:345, fixedHeight: true, slideshowInterval: 5'>
</div>
</body>
</html>
Apparently, the SlideShow object in dojo has some bugs/inconsistencies. I even had to modify the dojox/image/SlideShow.js file. The clues I found here: http://petergragert.info/dojo/demo/PKHG_won_22feb.html and in http://dojo-toolkit.33424.n3.nabble.com/Dojo-1-8-SlideShow-Problem-tp3991064.html
I have just started with sencha touch,really impressed with sencha documentation and its native feel. I was trying out this link. But i got error in between and i got this error in console "The following classes are not declared even if their files have been loaded: 'Ext.panel'. Please check the source code of their corresponding files for possible typos: 'touch/src/panel.js". i am new to MVC framework so i am not able to find where i went wrong.
And is it necessary to get good knowledge of ExtJs before trying out Sencha Touch?
Here is my code
App.js
Ext.Loader.setPath({
'Ext': 'touch/src'
});
Ext.application({
name: 'hello',
requires: [
'Ext.MessageBox'
],
views: [
'Main','Home'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('hello.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload,
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
Main.js
Ext.define('hello.view.Main', {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype:'homepanel'
}
]
}
});
Home.js
Ext.define('Hello.View.Home',{
extend:'Ext.panel',
xtype:'homepanel',
config:{
title:'Home',
iconCls:'home',
html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists, and forms to create a simple app</p>",
'<h2>Sencha Touch</h2>'
].join("")
}
});
index.html
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>hello</title>
<style type="text/css">
</style>
<!-- The line below must be kept intact for Sencha Command to build your application ->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"> </script>
<script type="text/javascript" src="app/view/Home.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Exactly as the error says. The class name is Ext.Panel, not Ext.panel.