I am trying to show a message in console using backbone js. Here is what I have tried:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Backbone</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1> User Manager</h1>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.is.js/0.2.1/jquery.is.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script>
var Router = Backbone.Router.extend({
routes: {
'' : 'home'
}
});
var router = new Router();
router.on('route:home', function () {
console.log('rout is loaded');
});
Backbone.history.start();
</script>
</body>
</html>
After trying this I am getting this error below:
Uncaught ReferenceError: jQuery is not defined on jquery.is.min.js:10
Uncaught TypeError: Property '$' of object # is not a function on backbone.js 1388
Uncaught TypeError: Cannot call method 'create' of undefined on measureIt.js:120
Whats wrong with my router?
The link which you are using is not a valid jquery link. Try changing it.
//invalid link
http://cdnjs.cloudflare.com/ajax/libs/jquery.is.js/0.2.1/jquery.is.min.js
Correct link
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js
Seem like you're currently missing the core jQuery file. Try to include it.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.is.js/0.2.1/jquery.is.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
or if you want the CDN file from cloudflare then use:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.is.js/0.2.1/jquery.is.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
Related
I'm trying to run Particles.Js with no modifications, and its failing out of the box with this error:
Uncaught TypeError: pJS_tag is null
I've installed it via npm install. Here is my HTML
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<script src="/node_modules/particles.js/particles.js"> </script>
</head>
<body>
<div class="particles-js"></div>
<div class="banner">test</div>
<script src=
"/node_modules/particles.js/demo/js/app.js">
</script>
</body>
</html>
I found my mistake, I forgot to set the "id" field, and assumed "class" was good enough.
Example:
Change
<div class="particles-js"></div>
to:
<div class="particles-js" id="particles-js"></div>
Type of error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
main.html:27 Uncaught (in promise) ReferenceError: eel is not defined
at display_weather (main.html:27)
at HTMLButtonElement.<anonymous> (main.html:32)
at HTMLButtonElement.dispatch (jquery.min.js:2)
at HTMLButtonElement.v.handle (jquery.min.js:2)
I've tried a lot of stuff to solve the problem, but I can't. There is a problem with eel, already I've installed eel which has shown in tutorial.This is file with html and js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Weather by Alibek</title>
<script type="text/javascript" src="/eel.js"></script>
<link rel="stylesheet" type="image/png" href="weather-icon.png">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input id="location" type="text" placeholder="Write the name of your Country ot City" required="" value="Bukhara, Uzbekistan">
<button id ="show">Know the weather</button>
<div id="info ">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
async function display_weather(){
let place = document.getElementById('location').value;
let res = await eel.get_weather(place)();
document.getElementById('info').innerHTML = res;
}
jQuery('#show').on('click', function(){
display_weather();
});
</script>
</body>
</html>
And here is python code:
import eel
import pyowm
own = pyowm.OWM('d845c8640738fe82515cb1277bb3dd38')
#eel.expose
def get_weather(place):
mgr = own.weather_manager()
observation = mgr.weather_at_place(city)
w = observation.weather
temp = w.temperature('celsius')['temp']
return city + ' ' + str(temp)
#eel.init('web')
#eel.start('index.html', size=(700, 700))
Some people say that I have to upload the eel file with these files, but where I should get that file? Some of them say I should download it, but I have already downloded it through cmd. By the way I use Linux Mint 20. Thanks
I am writing first program in EmberJs as "Hello World" printing, but getting errors. Can someone help me out?
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.7.0/ember.min.js"></script>
<script>
App = Ember.Application.create();
App.Router.map(function() {
this.resource('index', { path: '/' }, function() {});
this.resource('hi', { path: '/hi' }, function() {});
});
</script>
<script type="text/x-handlebars" data-template-name='index'>
<p>index!</p>
<p>{{#linkTo hi}}hi{{/linkTo}}</p>
</script>
<script type="text/x-handlebars" data-template-name='hi'>
hello world!
</script>
</head>
<body>
</body>
</html>
ERROR
You need to include ember-template-compiler instead of handlebars:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.7.0/ember.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.7.0/ember-template-compiler.js"></script>
You also can't use linkTo helper because it's deprecated and that's why you get another error. Here's working fiddle.
I am trying to create a list object using the list.js library and to add it to the angular.js root scope in order to use it in the nested scopes. This works fine as long as I don't add a controller to the list elements.
If I do so a I get the following error in the javascript console.
"Cannot read property 'childNodes' of undefined"
Same happens if the list is initialised inside an init() function called with ng-init.
Here are the html and js files
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script type="text/javascript" src="listBug.js"></script>
</head>
<body ng-controller="MainController" ng-app="theApp">
<div id="theList">
<ul class="list">
<li>
<div ng-controller="divController">
<span class="id"></span>
</div>
</li>
</ul>
</div>
</body>
</html>
listBug.js
var app = angular.module('theApp', [])
mainController=function($scope){
var opts={valueNames: ['id'] }
$scope.theList=new List('theList', opts);
}
app.controller("MainController", mainController)
divController=function($scope){
}
app.controller("divController", divController)
The problem is that the DOM isn't fully loaded when your code is being called. You can delay it by doing the following
mainController=function($scope){
angular.element(document).ready(function () {
var opts={valueNames: ['id'] }
$scope.theList=new List('theList', opts);
});
}
here is my django rendered test page
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="todo">
</div>
<script type="text/template" id="item-template">
<div>
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %>>
<%- title %>
</div>
</script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
//the app.js is my backbone app
<script >
var foo_models = new fooCollection({{django_rendered_json_vaiable}})
//this is how I get backbone collection initial data
</script>
</body>
</html>
the above code is what I get so far, I get the backbone bootstrapped models as foo_models,
but this variable can't be access in my app.js file, then I found this question, which use AMD approach,but my app is fairly small,all I need is get the initial data in another js file,so I don't want to add require.js and I don't want to make this foo_models variable global。
so how can I do that?
* EDITED *
Just change these lines:
<script src="app.js"></script>
//the app.js is my backbone app
<script >
var foo_models = new fooCollection({{django_rendered_json_vaiable}})
//this is how I get backbone collection initial data
</script>
to:
<script >
var raw_foo_models = {{django_rendered_json_vaiable}};
</script>
<script src="app.js"></script>
Then, add this line:
var foo_models = new fooCollection(raw_foo_models);
somewhere in your app (after fooCollection has been defined).