i am following this tutorial https://v2.vuejs.org/v2/guide/#Declarative-Rendering. the page works fine without error on console but i cant change the message via console to showing "app2.message" and give me error "#app2 is not defined". its not working like they said
We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.
here is my script:
window.addEventListener('load',
function() {
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
}, false);
this is how i include the js
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>3R Inventory | #yield('title')</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/app.css') }}">
<script type="text/javascript" src="{{ URL::to('js/app.js') }}"></script>
<script type="text/javascript" src="{{ URL::to('/js/tigaer.js') }}"></script>
</head>
Related
I am trying to add jquery and use into a new project
app.js
require('./custom');
require('./bootstrap');
require('alpinejs');
custom.js
window.$ = require('jquery');
window.Swal = require('sweetalert2');
guest.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
</body>
</html>
welcome.blade.php
<x-guest-layout>
<script>
function alerta() {//This Work
Swal.fire("Hello World Sweetalert2");//This Work
$('.lol').hide();//This Work
}
$(function() {//$ This not Work
console.log( "ready!" );
});
Swal.fire("Hello World Sweetalert2");//This not Work
</script>
<x-jet-button onclick="alerta()" class="lol">Alert</x-jet-button>
</x-guest-layout>
And finally get the error Uncaught ReferenceError: $ is not defined or Uncaught ReferenceError: Swal is not defined
How can i solve this?
Edit:
Thanks to #Areg this question is solved, I understood this better after reading The Script element
When you write something into app.js you need to compile it later on using npm run dev or npm run watch. Also don't defer you app js file, because it is designed to run the script after the document is loaded as it states on w3schools
The defer attribute is a boolean attribute.
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Hi I'm trying to test using clusterize.js with my django app, the hope is to use it to load large tables with hundreds of rows of data on my html page. I am loading this html file in a view as an httpResponse:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='icon' href="{% static 'images/icon.png' %}" type='image/x-icon' />
<link href="{% static 'clusterize/clusterize.css' %}">
<link href="{% static 'clusterize/clusterize.min.js' %}">
<!--
<link href="./clusterize.css" rel="stylesheet">
<script src="./clusterize.min.js"></script>
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="popularify">
<meta name="author" content="martinbarker">
<title>popularify</title>
</head>
<body>
<div>test</div>
<button onclick="myFunction()">Call myFunction()</button>
<div id="scrollArea" class="clusterize-scroll">
<div id="contentArea" class="clusterize-content">
<div class="clusterize-no-data">Loading data…</div>
</div>
</div>
</body>
<script>
async function myFunction() {
console.log("myFunction()")
var data = ['<div>1…</div>', '<div>2…</div>', '<div>3</div>'];
var clusterize = new Clusterize({ rows: data, scrollId: 'scrollArea',contentId: 'contentArea' });
}
</script>
My static files load fine, and there are no initial errors in console when I load the page, but when I click the button, which calls the js function, i get the error:
Uncaught (in promise) ReferenceError: Clusterize is not defined
Pointing to the line:
var clusterize = new Clusterize({ rows: data, scrollId: 'scrollArea',contentId: 'contentArea' });
If I am trying to load clusterize.js using on the source files, instead of as an npm package or anything, do I need to tell my html page that the static js file I load should be referenced when creating the new Clusterize var?
I'm trying to implement the sidebar function for Semantic UI but I keep getting this error where it does not recognize the function
I've checked the network tab in Chrome and sure enough, when I comment out the jquery file, the semantic js file loads and vice versa. Not sure why
Below is my header
<head>
<meta charset="utf-8">
<title>Portal</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'portal/semantic.min.css' %}">
<script type="text/javascript" src="{% static 'portal/jquery-1.12.4.js' %}"</script>
<script type="text/javascript" src="{% static 'portal/semantic.js' %}"></script>
<style>
body{
font-size:1.2em;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".ui.sidebar").sidebar("show");
});
</script>
</head>
Not quite sure why this happens. Maybe it is a simple mistake on my end. The help would be appreciated
Yep, so the issue was that I didn't close the first script tag...yeesh
I use Vue.js CDN and I put all the Vuejs code inside a script tag in index.html.
It works fine. However, I'd like to use this component to add tags functionality.
But I receive this error :
This is how my code looks like:
<script>
import VTagInput from 'v-tag-input'
Vue.use(VTagInput)
var app = new Vue({
el: '#app',
delimiters: ["[[", "]]"],
components: {VTagInput},
tags: []
data: {
errors: [],
I npm installed the package as specified in the github repo.
This is the head tag:
<head>
<meta charset="utf-8">
<meta name="author" content="Seif Elmughrabi">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="(( url_for('static', filename='materialize.css') ))" media="screen, projection">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="(( url_for('static', filename='style.css') ))">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Your Insurance Policy Planner</title>
</head>
You cant import another files in browser using 'import' you need to use webpack, however you can use this cdn to load the plugin in your html after loading vue.js file, https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js , here is a working example
new Vue({
el:"#app",
data: {
tags: ['foo', 'bar']
}
})
<script src="https://unpkg.com/vue#2.5.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js"></script>
<div id="app">
<v-tag-input v-model="tags"></v-tag-input> {{tags}}
</div>
You should load the script where VTagInput is located in your head, right after Vue. Then no need to import anything, VTagInput will be accessible globally
I was following with along the Ember Guides: Defining Your Routes and added a customized index route in my Ember app; which sets a controller title property:
// app/routes/index.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function(controller) {
// Set the IndexController's `title`
controller.set('title', 'Tagged! - home');
}
});
I then added an output for the title in app/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{title}}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tagged-ember.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tagged-ember.js"></script>
{{content-for 'body-footer'}}
</body>
</html>
However instead of the expected output I get {{title}} in the browser title bar. Why is HTMLbars not outputting the variable?
I'm using the ember-cli (ember 1.13.3) and running the server with ember server. I can see the controller property in the ember inspector.
The index.html file is outside the scope of the application controller/route/template, ember-cli-document-title solves the issue for you.
If you don't want to use it you can create an in-repo-addon that makes use of something like {{content-for 'document-title'}}.