Showing a message in console in backbonejs - javascript

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

Uncaught TypeError: pJS_tag is null - ParticlesJS fails out of the box

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>

I'm learning python and JS. Tried to write the application witch shows weather. But I got error Failed to load resource: net::ERR_FILE_NOT_FOUND

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

Hello World in EmberJs Error

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.

"Cannot read property 'childNodes' of undefined" adding controller to list element with list.js

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);
});
}

how to load backbone initial data to another js file

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).

Categories