I'm developing my application with riot.js and I want to use dropzone(http://www.dropzonejs.com/).
In my code:
index.html below,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<app></app>
<script src="dist/scripts/bundle.js"></script>
</body>
</html>
app.tag below,
var route = require('riot-route'); require("dropzone"); require('./main/home.tag'); require('./main/contents1.tag');
<app>
<main>
<contents></contents>
</main>
<script>
route(function(tagName) {
tagName = tagName || 'home'
riot.mount('contents', tagName)
})
route.start(true)
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" />
</app>
home.tag below,
<home>
<div class="search-box"></div>
</home>
Then, I add <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form> into app.tag like this, it works right.
<contents></contents>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
but, I add it into home.tag like this,
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
</home>
it doesn't work. Can anyone help me??
Try to update DropZone when mounting the tag, using on('mount', or also you can try with on('updated',
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
<script>
this.on('mount', function(){
new Dropzone(".dropzone");
})
</script>
</home>
Related
as i said in the title, i'm using an api, here is the html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Popper -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js"
integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
<title>Ejemplo consumo web service con FETCH </title>
</head>
<body>
< <div class="container">
<div class="row">
<button class="btn btn-primary" id="btn-cargar">Cargar Información</button>
</div>
<div class="row">
<div id="info" class="text-center">
<h1></h1>
</div>
</div>
</div>
<script src="js/carga_1.js"></script>
</body>
</html>
and here is the code of the js
$("#btn-cargar").click(function (event) {
event.preventDefault();
var url = "https://api.punkapi.com/v2/beers/random";
fetch(url)
.then(response => response.json())
.then(data =>
{
var $nombre_cerveza = $('<h1>').text(data[0].name);
var $grados = "Grados: " + $('<p>').text(data[0].abv);
var $foto_cerveza = $("<p><img src='"+data[0].image_url+"'>");
$("#info").empty();
$('#info')
.append($nombre_cerveza)
.append($grados)
.append($foto_cerveza);
})
.catch(error => console.error(error));
});
it shows me the name as it should, but in the abv it shows "Grados: [object Object]" and i want it to show the abv in numbers, does anyone knows a way to fix this?
i'm sorry that all of it is in spanish
I finally got around to fidelling with expressJS. I have written a simple RestAPI and also want to serve some static HTML that consumes (via clientside-JavaScript) my RestAPI.
The RestAPI works fine, but on some subroutes CSS and JS files are looked up under the wrong URL.
I have the following directory setup:
src
|---models
|---controllers
|---views
|---css
|---main.css
|---js
|---core.js
|---html
|---login.html
|---payments.html
|---static
Both HTML files link to e.g. the core.js using
<script src="core.js" type="text/javascript"></script>
in the footer.
The index.js looks as follows:
var app = express();
...
app.set('views', path.join(__dirname, 'views/html'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use( express.static( "src/views/js") );
app.use( express.static( "src/views/css") );
app.use( express.static( "src/views/static") );
...
app.get('/:env/:org', function(req, res){
res.render('payments.html');
})
app.get('/', function(req, res){
res.render('login.html');
})
Now the strange thing is, that if I call myserver.com/ the login page gets displayed with all styles and JS functionality, but if I open myserver.com/path1/path2 ExpressJS tries to look up the files under myserver.com/path1/ (e.g. myserver.com/path1/main.css) instead myserver.com/main.css.
The HTML for where it does not work (that get sent vie the /path1/path2 route) looks like this:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="main.css"/>
<title>Greatpay login</title>
</head>
<body data-pagetype="login">
<header class="header">
<img src="logo.png"/>
</header>
<div class="body">
<div class="loginbox">
<span class="error"></span>
<div class="fieldline">
<span>Organisation:</span>
<input type="text" name="organisation"/>
<div class="clear"><!---clear---></div>
</div>
<div class="fieldline">
<span>Environment:</span>
<select name="environment"/>
<option value="TEST">Test</option>
<option value="PROD" selected="selected">Production</option>
</select>
<div class="clear"><!---clear---></div>
</div>
<div class="fieldline">
<span>Username:</span>
<input type="text" name="username"/>
<div class="clear"><!---clear---></div>
</div>
<div class="fieldline">
<span>Password:</span>
<input type="password" name="password"/>
</div>
<button id="login">Login</button>
</div>
</div>
<footer>
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="core.js" type="text/javascript"></script>
</footer>
</body>
</html>
Can anyone please help me resolve this and explain why this behaves like that?
Thanks in advance.
I'm trying to use the Vue2Leaflet component (https://vuejsexamples.com/vue-2-components-for-leaflet-maps/) but I have hard time to make it works. I could not make this simple example work, with the html file :
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<div id="app" style="height: 400px">
<v-map :zoom=13 :center="[47.413220, -1.219482]">
<v-tilelayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></v-tilelayer>
<v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
</v-map>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue2-leaflet"></script>
</body>
</html>
and the js file :
Vue.component('v-map', window.Vue2Leaflet.LMap)
Vue.component('v-tilelayer', window.Vue2Leaflet.TileLayer)
Vue.component('v-marker', window.Vue2Leaflet.Marker)
new Vue({ el: '#app'});
I made a fiddle with this basic exemple : http://jsfiddle.net/rvxc2uLk/3.
What am I missing ?
You forgot the "L" before .TileLayer also for .Marker.
Vue.component('v-map', window.Vue2Leaflet.LMap)
Vue.component('v-tilelayer', window.Vue2Leaflet.LTileLayer)
Vue.component('v-marker', window.Vue2Leaflet.LMarker)
I'm new to Vue.js and trying to test semantic binding. I have Vue.js in the same directory as my test page but I get a Vue warning of "Cannot find element: #growler". Am I doing this correct?
html
<head>
<title>
Growler
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="growler"></div>
<h2> {{ appName }} </h2>
</body>
app.js
var growler = new Vue({
el: '#growler',
data: {
appName: 'Growler'
}
});
Your HTML-markup is wrong.
The closing div tag has to be after the h2, otherwise the variable appName will not be found.
<div id="growler">
<h2> {{ appName }} </h2>
</div>
The error "Cannot find element: #growler" probably appears, because you include app.js in the head. Either move it downwards before the closing body tag or add some window.onload-condition to it to make sure, the JS will be executed after rendering the inital page.
app.js script must be below the application div
Also you must put the h2 tag inside the #glower div
Because the vue application glower working only inside #glower div
<div id="growler">
<h2> {{ appName }} </h2>
</div>
<head>
<title>
Growler
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="growler">
<h2> {{ appName }} </h2>
</div>
<script src="vue.js"></script>
<script src="app.js"></script>
</body>
There was a error in your HTML.
So I have a search box, and after I click "enter", I want to display the photo of the place I've just chose.
I don't really know how to do that, and after some searches on the internet, I've found out of getPlaceDetails API.
This is my index.html
<!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.0">
<title>test-jest</title>
<script type="text/JavaScript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
My App.vue:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/search">Search</router-link>
</div>
<router-view/>
</div>
</template>
And finally, the superstar, my Search component:
<template>
<div id="search-wrapper">
<div>
<input id="search-input" ref="vue_google_autocomplete"
placeholder="Search"
class="search-location"
onfocus="value = ''"
type="text" />
</div>
</div>
</template>
<script>
export default {
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
(this.$refs.vue_google_autocomplete),
{types: ['geocode'],componentRestrictions: {country: "us"}}
);
this.autocomplete.addListener('place_changed', () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
let lat = place.geometry.location.lat();
let lon = place.geometry.location.lng();
var city = ac[0]["short_name"];
var country = ac[3]["long_name"];
console.log(`You're going to ${city}, which is in ${country}`);
console.log(ac);
});
}
}
</script>
Can someone please help me to to display the photo of the place I'm looking for?
Places are defined within this API as establishments, geographic locations, or prominent points of interest. Most roads etc. do not return images.
Source: https://developers.google.com/places/web-service/intro
Check if your response has an photos[] array, the photo's should be there if it matches the above defined places.