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>
Related
I am playing around with nextjs lately, and I don't know why my code does not work.
So it's a simple call to REST API:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
const defaultEndpoint = 'My_probably_problematic_api';
export async function getServerSideProps(){
const res = await fetch(defaultEndpoint);
const data = await res.json();
return{
props:{
data
}
}
}
export default function Home({data}) {
const {results = []} = data;
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
playing
</h1>
<p className={styles.description}>
AROUND
</p>
<div className={styles.grid}>
{results.map(result => {
const {id, title} = result;
return(
<div key={id}className={styles.card}>
<h2>{ title}</h2>
</div>
)
})}
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
If I run this, no data is fetched. I know that this code works because when I switch it to "https://rickandmortyapi.com/api/character" - it returns data correctly (on the front). I can console.log the response from my API. Could it be something wrong with my API response, like structure maybe? It looks like this:
[
{
"date": "02/02/2022, 20:10:21",
"description": "Google Paid Search ads are one of the best digital advertising methods to target people who are actively searching and in the market for the products or services that your business offers. However, if you’re not experienced with Google Ads then you may fin",
"id": "29dc9f038b5ee4bd68e96298627d5806c72e1f927b73077d725a86239a97d94f",
"image": "https://activebusinessgrowth.ca/wp-content/uploads/2022/02/TN-23-Improve-ads.png",
"link": "https://activebusinessgrowth.ca/5-ways-to-drastically-improve-your-google-ads/",
"tag": "Digital Marketing",
"title": "5 Ways To Drastically Improve Your Google Ads"
},
{next item, etc}
The API response which returns correct data(https://rickandmortyapi.com/api/character), looks like this:
{
"info": {
"count": 826,
"pages": 42,
"next": "https://rickandmortyapi.com/api/character?page=2",
"prev": null
},
"results": [
{
"id": 1,
"name": "Rick Sanchez",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "Earth (C-137)",
"url": "https://rickandmortyapi.com/api/location/1"
},
"location": {
Of course I am changing {title} to other matching keys from Rick and Morty API.
Still - I don't know why on my own API - nothing happen. Forgive me if it's trivial question, these are like my first days with nextjs and I can't find the solution.
As #juliomalves said in the comment - the mapping was wrong, here's fixed Home function:
export default function Home({data}) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
pill
</h1>
<p className={styles.description}>
daily
</p>
<div className={styles.grid}>
{data.map(result => {
const {id, title} = result;
return (
<div key={id}className={styles.card}>
<h2>{ title }</h2>
</div>
)
})}
</div>
</main>
</div>
)
}
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>
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 want to use the sample code feature in my ckeditor 5 vue, but i can't find it. Can anyone give me an example or how?
in my app js
...
import CKEditor from "#ckeditor/ckeditor5-vue";
Vue.use(CKEditor);
...
and my vue file
<template>
...
<ckeditor :editor="editor" v-model="CKValue" :config="editorConfig"></ckeditor>
...
</template>
<script>
import ClassicEditor from "#ckeditor/ckeditor5-build-classic";
export default {
data() {
return {
CKValue: "",
editor: ClassicEditor,
editorConfig: {}
}
},
}
</script>
You can see a sample code here
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
Like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Vue.js Component – development sample</title>
<style>
body {
max-width: 800px;
margin: 20px auto;
}
textarea {
width: 100%;
height: 100px;
font-family: monospace;
}
</style>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/#ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<script src="../dist/ckeditor.js"></script>
<div id="app">
<h1>CKEditor 5 – Vue.js Component – development sample</h1>
<ckeditor
editor="classic"
tag-name="textarea"
v-model="editorData"
:editor="editor"
:config="editorConfig"
:disabled="editorDisabled"
#ready="onEditorReady"
#focus="onEditorFocus"
#blur="onEditorBlur"
#input="onEditorInput"
#destroy="onEditorDestroy"
></ckeditor>
<button v-on:click="toggleEditorDisabled()">
{{ editorDisabled ? 'Enable' : 'Disable' }} editor
</button>
<button v-on:click="destroyApp()">Destroy the app</button>
<h2>Live editor data</h2>
<textarea v-model="editorData"></textarea>
</div>
<script>
Vue.use( CKEditor );
const app = new Vue( {
el: '#app',
data: {
editor: ClassicEditor,
editorData: '<p>Hello world!</p>',
editorConfig: { toolbar: [ 'heading', '|', 'bold', 'italic' ] },
editorDisabled: false
},
methods: {
toggleEditorDisabled() {
this.editorDisabled = !this.editorDisabled;
},
destroyApp() {
app.$destroy();
},
onEditorReady( editor ) {
console.log( 'Editor is ready.', { editor } );
},
onEditorFocus( event, editor ) {
console.log( 'Editor focused.', { event, editor } );
},
onEditorBlur( event, editor ) {
console.log( 'Editor blurred.', { event, editor } );
},
onEditorInput( data, event, editor ) {
console.log( 'Editor data input.', { event, editor, data } );
},
onEditorDestroy( editor ) {
console.log( 'Editor destroyed.', { editor } );
}
}
} );
</script>
</body>
</html>
I am a fresher.I try to use scope slot and directive to create a list sample ,the code follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
<script>
Vue.directive("selectall",{
bind:function(el,binding,vnode,oldVnode){
var arg = binding.arg,
value = binding.value;
console.log(arg,value);
$(el).on('change',function(){
});
}
});
Vue.component("list",{
template:"<div><ul>"
+"<slot name='item' v-for='item in litodos' :text= 'item.text' :time='item.time' :idx='item.idx'></slot>"
+"</ul>"
+"</div>",
props:['litodos'],
data:function(){
return {
message:"list-message"
}
}
});
Vue.component("app",{
template:"<div class='container'>"
+" <input type='checkbox' v-selectall:parent='group1'/>select all gruop1"
+"<list :litodos='todos1'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group1'/>{{props.text}} </li>"
+"</template>"
+"</list>"
+" <hr><input type='checkbox' v-selectall:parent='group2'/>select all gruop2"
+"<list :litodos='todos2'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group2'/>{{props.text}}</li>"
+"</template>"
+"</list>"
+"</div>",
data:function(){
return {
group1:"group1",
group2:"group2",
todos1:[
{
text:'study english',
time:'3hour',
idx:'1'
},{
text:'study vue',
time:'2hour',
idx:'2'
}
],
todos2:[
{
text:'学英语',
time:'3hour',
idx:'3'
},{
text:'学js',
time:'2hour',
idx:'4'
}
]
};
}
})
var app = new Vue({
el: '#app',
data:{}
});
</script>
</html>
and here are essential fragment:
+"<list :litodos='todos1'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group1'/>{{props.text}} </li>"
+"</template>"
+"</list>"
but the result is like this:
enter image description here
I find out that the slot return to NaN,so I am so confused.Can you help me find the keys point to resolve this bug?Thank you!