When I try to run the following code in Laravel with vue.js:
<html>
<head>
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2> Locaties </h2>
</div>
<data list="{{ json_encode($locations) }}"></data>
</div>
</div>
<template id="ln-data">
<ul>
<li v-for="item in list">#{{ item.name }}</li>
</ul>
</template>
<script>
new Vue({
el: 'body'
})
Vue.component('data', {
template: '#ln-data',
props:['list']
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.common.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<style>
.newclient {
display:none;
}
</style>
</body>
</html>
I receive the following errors in the console:
Uncaught ReferenceError: process is not defined(anonymous function) #
vue.common.js:981 vue.common.js:9157 Uncaught TypeError: this._init is
not a function
What am I doing wrong?
Try this:
Changes to your version:
vue.js imported instead of vue.common.js
moved your own <script>...</script to the bottom of the imports because it depends on the vue.js import
activate the vue debug mode while developping makes it easier to find errors.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2> Locaties </h2>
</div>
<data list="{{ json_encode($locations) }}"></data>
</div>
</div>
<template id="ln-data">
<ul>
<li v-for="item in list">#{{ item.name }}</li>
</ul>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<script>
// vuejs debug mode
Vue.config.debug = true; //TODO: Remove in production
new Vue({
el: 'body'
})
Vue.component('data', {
template: '#ln-data',
props:['list']
})
</script>
<style>
.newclient {
display:none;
}
</style>
</body>
</html>
Related
I have an index.html file that is getting data from app.py (pulling from MongoDB) using render_template and I am attempting to read the data loaded in the index.html into my logic.js so I can create a leaflet map. However, it seems that the data is not loading in my logic.js. Any thoughts?
Here is my index.html:
<!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>Visualization</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<!-- Leaflet JavaScript code -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- Our CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div id="map"></div>
<div class="container text-center">
<h1 class="p-3 mb-2 bg-secondary text-white">Map Visualization</h1>
</div>
<!-- confirm that data is loaded -->
<!-- {% for i in html_results %}
<h5>{{i}}</h5>
{%endfor%} -->
<script>
let html_results = JSON.parse("{{html_results | tojson | safe}}")
</script>
<script src="{{url_for('static', filename='/js/logic.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
I am integrating a platform with a browser based language switcher. I am planning to use Vuei18n for the language switcher because I am using Vue. But the thing is, there is an error showing unexpected identifier on both line 1 in my language.js and home.js. My scripts are in the same folder.
Here is my HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sapphire | Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"> <!-- BOOTSTRAP FRAMEWORKS -->
<link rel="stylesheet" type="text/css" href="css/spinners.css"/> <!-- PRELOADER -->
<link rel="stylesheet" href="vendor/font-awesome/css/all.min.css"> <!-- FONTS -->
<link rel="stylesheet" type="text/css" href="css/style.css"/> <!-- CUSTOM STYLES -->
<link rel="shortcut icon" href="assets/images/static/favicon.ico"> <!-- WEB ICON -->
</head>
<body>
<!-- START OF VUE APP -->
<div id="app">
<!-- ================================ -->
<!-- HEADER/NAVBAR -->
<!-- ================================ -->
<ife-header disable-sidebar-toggle=true :change-language='changeLanguage'></ife-header>
<!-- ================================ -->
<!-- PAGE CONTENT -->
<!-- ================================ -->
<div class="row text-center ife-home">
<div class="p-1 col-6 col-md-4 col-lg-3" id="box1" >
<img src="assets/images/static/music.jpg" width="200px" alt="">
<div id="box2"><a class="clean-link" href="music.html"><i class="fas fa-4x fa-music box-icon"></i><p class="box-label text-white">{{ $t('hello') }}</p></a></div>
</div>
</div>
</div>
<!-- END OF VUE APP -->
<!-- ================================ -->
<!-- Scripts -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery/jquery-confirm.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/lazy/jquery.lazy.min.js"></script>
<script src="vendor/vue/vue.min.js"></script>
<script src="js/components.js"></script>
<script src="vendor/vue/vue-i18n.js"></script>
<script src="js/language.js"></script>
<script src="js/home.js"></script>
</body>
</html>
Here is my Vuejs code or home.js
import Vue from "vue"
import { i18n } from './language.js'
var app = new Vue({
el:'#app',
router,
i18n,
render: (h) => h(App)
})
Here is my Vuei18n code or language.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export const i18n = new VueI18n({
locale: 'en', //set locale
fallbackLocale: 'en',
messages: { en: { hello: 'Hello'}, bg: { hello: '3apeben' } } //set locale message
})
"I expect the output Hello but it displays {{ $t('hello') }}"
i have html file that wraps react component , below is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content=""><!--
<link rel="shortcut icon" href="assets/img/logo-fav.png"> -->
<title>Loyalty Multipolar</title>
<link rel="stylesheet" type="text/css" href="/lib/perfect-scrollbar/css/perfect-scrollbar.min.css"/>
<link rel="stylesheet" type="text/css" href="/lib/material-design-icons/css/material-design-iconic-font.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/css/style.css" type="text/css"/>
<style type="text/css">
.modal-body {
max-height:400px;
overflow-y:auto;
}
</style>
</head>
<body>
<div id="root">
</div>
<script src="bundle.js"></script>
<script src="/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/lib/jquery.niftymodals/dist/jquery.niftymodals.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.niftyModal('setDefaults',{
overlaySelector: '.modal-overlay',
closeSelector: '.modal-close',
classAddAfterOpen: 'modal-show',
});
$(function(){
Plugins.init();
$('.admin').click(function(){//button modal
alert('alert');
});
});
</script>
</body>
</html>
and this is my admin page
import React, {Component} from 'react';
import CreateForm from '../Component/Admin/CreateForm';
class AdminPage extends Component {
render(){
return(
<div className="be-content">
<CreateForm/>
<div className="page-head">
<h2 className="page-head-title">Manage Admin</h2>
<ol className="breadcrumb page-head-nav">
<li>Admin</li>
<li className="active">Index</li>
</ol>
</div>
<div className="main-content container-fluid">
<div className="panel panel-flat">
<div className="panel-heading">
Admin
<button data-modal="create" className="btn btn-space btn-primary pull-right md-trigger admin">Create New</button>
</div>
<div className="panel-body">
</div>
</div>
</div>
<div className="modal-overlay"></div>
</div>
);
}
}
export default AdminPage;
my problem is :
i have page for admin, and within it there is a modal, i'm using modal to show a form , when we start page or type the route address from address bar eg: localhost:3000/admin modal is showing and all javascript function such as alert that i put (see above html file) is fired, but if i access the page from sidebar link the javascript function is disabled or doesn't work, example
i access / from sidebar link then i click /admin and i click button to show modal it doesn't show modal.
i'm using react route v4
and my question is exactly same like this but i want more simple,effective and efficient way.
Anyone can help? thank you.
I think the problem is in jQuery binding after DOM updates like here and you should rewrite this line:
$('.admin').click(function(){//button modal
to this:
$(document).on('','.admin',function(){//button modal
I'm setting up a config for the 'angular-oauth2' module, and when I run
angular.module('', ['angular-oauth2'])
.config(['OAuthProvider', function(OAuthProvider) {
OAuthProvider.configure({
baseUrl: '/api/v1',
clientId: null,
clientSecret: null // optional
});
}]);
my server runs fine and all is well, when I add the name of the app though ('fuse') it breaks:
angular.module('fuse', ['angular-oauth2'])
.config(['OAuthProvider', function(OAuthProvider) {
OAuthProvider.configure({
baseUrl: '/api/v1',
clientId: null,
clientSecret: null // optional
});
}]);
And I get this error in the console:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=fuse&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.min.js%3A43%3A246)
I've looked in the html and low and behold the name of the app is 'fuse', so what's up with this error?
<html>
<head>
<base href="/app/">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<link rel="stylesheet" href="build/fuse.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="build/fuse.js"></script>
</head>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<body ng-app="fuse" md-theme="default" md-theme-watch
class="{{state.current.bodyClass || ''}}">
<!-- SPLASH SCREEN -->
<ms-splash-screen id="splash-screen" >
<div class="center">
<div class="logo">
<span></span>
</div>
<!-- Material Design Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="inner">
<div class="gap"></div>
<div class="left">
<div class="half-circle"></div>
</div>
<div class="right">
<div class="half-circle"></div>
</div>
</div>
</div>
</div>
<!-- / Material Design Spinner -->
</div>
</ms-splash-screen>
<!-- / SPLASH SCREEN -->
<div id="main" class="animate-slide-up scrollable" ui-view="main" layout="column" ></div>
<floating-app-version></floating-app-version>
<!--<link href="build/styles.css" type="text/css" rel="stylesheet" />-->
<script src="build/common.js"></script>
<script src="build/vendor.js"></script>
<script src="/assets/app_config.js"></script>
<link rel="stylesheet" href="build/app.css" lazyload>
<script src="build/app.js"></script>
<script src="build/style.js"></script>
</body>
</html>
I created a coming soon page for my new portfolio domain, on a local server. When I'm trying to transfer it to my hosting panel on public html, just HTML file are showing but CSS and JS files are not getting included, and they are not working properly.
What do I need to change there for using on live server ?
I uploaded all folders, img, js, css and files.
Here is a link for live preview (Dropbox): Coming_soon_template
Here is my code for local server:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>This site is in under construction</title>
<meta name="description" content="This site for now is in under construction will be live after some days.For more you can knock me on there lover.mahabub#gmail.com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com /css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="include/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/TimeCircles.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div id="coming-soon-total">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header-text">
<span>A creation of Mahbub Rahman**</span>
<h1>Wait for difference!</h1>
<p>Long way to go just keep patience.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="example" data-date="2015-12-23 00:00:00"> </div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="social-area">
<p> Get in touch</p>
<ul class="social-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Skype</li>
<li>whatsapp</li>
<li>gplus</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/TimeCircles.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$(".example").TimeCircles({
start: true,
time: {
Days: {color: "#4A616E"},
Hours: {color: "#5E524A"},
Minutes: {color: "#2E2F2A"},
Seconds: {color: "#9BA7B5"}
},
circle_bg_color: "#7F8382",
bg_width: .8,
});
});
</script>
</body>
</html>