I'm trying to use Knockout js in a simple web application.
Here's my dummy javascript code:
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
But when I run the index.html, the debug console says "ko.applyBindings is not a function"!
Help!
Thanks
You have not included the link to the knockout.js library in your source code or the link is wrong. Fix this and it will work.
<script src="/scripts/knockout-2.0.0.js" type="text/javascript"></script>
Where the /scripts directory is the location on the server where knockoutjs resides.
EDIT
Here is an example of your code that works.
<html>
<head>
<script src="knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
</script>
</body>
</html>
Related
I'm trying to read MIME text with http://emailjs.org/ but I get the javascript error 'MimeParser is not defined'
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/vendor/emailjs/emailjs-mime-codec.js"></script>
<script src="js/vendor/emailjs/emailjs-addressparser.js"></script>
<script src="js/vendor/emailjs/emailjs-mime-parser.js"></script>
</head>
<body>
</body>
<script>
$(function(){
var p = new MimeParser();
});
</script>
The JavaScript files are loading properly.
What am I doing wrong? Thanks.
Try
var parser = new this['emailjs-mime-parser'];
You are missing one java script emailjs-stringencoding.js
Try to include in below order
emailjs-addressparser.js
emailjs-stringencoding.js
emailjs-mime-codec.js
emailjs-mime-parser.js
jquery.min.js
You can create an object using below syntax
var parser = new this['emailjs-mime-parser'];
Hello i want to store one sample cookie in my browser and read it.this not working for me
this is sample html code :
<!DOCTYPE html>
<html ng-app="KendoDemos">
<head>
<script src="/home/user/Desktop/kendo/angular.min.js"></script>
<script src="/home/user/Desktop/kendo/angular-cookies.min.js"></script>
<script src="/home/user/Desktop/kendo/app.js"></script>
</head>
<!-- Body tag augmented with ngController directive -->
<body ng-controller="MyCtrl">
<h1>Hello</h1>
</body>
</html>
and this my app.js file :
var app = angular.module("KendoDemos", ["ngCookies"]);
app.controller("MyCtrl",['$scope','$cookies','$cookieStore',MyCtrl]);
function MyCtrl($scope,$cookies,$cookieStore){
var favoriteCookie = $cookies.get('myFavorite');
// Setting a cookie
$cookies.put('myFavorite', 'oatmeal');
console.log(favoriteCookie);
}
Please help me.
I think you don't have a problem is really logical that your cookie myFavorite isn't set before putting it so you have to switch the instruction of setting and getting.
var app = angular.module("KendoDemos", ["ngCookies"]);
app.controller("MyCtrl",['$scope','$cookies','$cookieStore',MyCtrl]);
function MyCtrl($scope,$cookies,$cookieStore){
// Setting a cookie
$cookies.put('myFavorite', 'oatmeal');
var favoriteCookie = $cookies.get('myFavorite');
console.log(favoriteCookie);
}
I have a bunch of web pages where I have an identical construct:
<html>
<head>
<script src="sorttable.js"></script>
<noscript>
<meta http-equiv="refresh" content="60">
</noscript>
<script type="text/javascript">
<!--
var sURL = unescape(window.location.pathname);
function doLoad()
{
setTimeout( "parent.frames['header_frame'].document.submitform.submit()", 60*1000 );
}
function refresh()
{
window.location.href = sURL;
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.replace( sURL );
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.reload( true );
}
//-->
</script>
</head>
<body>
.
.
.
<script type="text/javascript">
window.onload = function() { sorttable.innerSortFunction.apply(document.getElementById("OpenFace-2"), []); doLoad(); }
</script>
</body>
</html>
This works perfectly in every page except for one, where when the onload function runs it cannot find the sorttable code (which is loaded from sorttable.js up at the top). All these pages are part of the same application and are all in the same dir along with the js file. I do no get any errors in the apache log or the js console until that page loads, when I get:
sorttable.innerSortFunction is undefined
I can't see what makes this one page different. Can anyone see what is wrong here, or give me some pointers on how I can debug this further?
The code I pasted in is from the source of the page where it does not work, but it is identical as the pages where it does work.
Looks like on that page the table with id OpenPhace-2 by which you try to sort have no needed class: sortable
The function innerSortFunction of sorttable object will be present only if there is any table with sortable class exists.
Using the Soundcloud JavaScript API, I want to dynamically generate a page of player widgets using track search results. My code is as follows:
<html>
<head>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
function makeDivsFromTracks(tracks,SC)
{
var track;
var permUrl;
var newDiv;
for(var ctr=0;ctr<tracks.length;ctr++)
{
newDiv=document.createElement("div");
newDiv.id="track"+ctr;
track=tracks[ctr];
SC.oEmbed(track.permalink_url,{color:"ff0066"},newDiv);
document.body.appendChild(newDiv);
}
}
</script>
</head>
<body>
<script>
SC.initialize({
client_id: 'MY_CLIENT_ID'
});
SC.get('/tracks',{duration:{to:900000},tags:'hitech',downloadable:true},
function(tracks,SC)
{
makeDivsFromTracks(tracks,SC);
});
</script>
</body>
</html>
When I load this, the SC.oEmbed() call throws an error:
Uncaught TypeError: Cannot call method 'oEmbed' of null
which would seem to indicate that either the divs aren't being generated or the search results aren't being returned, but if I remove the SC.oEmbed() call and replace it with:
newDiv.innerHTML=track.permalink_url;
then I get a nice list of the URLs for my search results.
And if I create a widget using a static div and static URL, e.g.
<body>
<div id="putTheWidgetHere"></div>
<script>
SC.initialize({
client_id: 'MY_CLIENT_ID'
});
SC.oEmbed("http://soundcloud.com/exampleTrack", {color: "ff0066"}, document.getElementById("putTheWidgetHere"));
</script>
</body>
then that works fine as well. So what's the problem with my oEmbed() call with these dynamically created elements?
Solved it. I took out the SC argument from the callback function and makeDivsFromTracks(), and now all the players show up. Not sure exactly why this works--maybe it has to do with the SC object being defined in the SDK script reference, so it's globally available and doesn't need to be passed into functions?
Anyways, working code is:
<html>
<head>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
function makeDivsFromTracks(tracks)
{
var track;
var permUrl;
var newDiv;
for(var ctr=0;ctr<tracks.length;ctr++)
{
newDiv=document.createElement("div");
newDiv.id="track"+ctr;
track=tracks[ctr];
//newDiv.innerHTML=track.permalink_url;
SC.oEmbed(track.permalink_url,{color:"ff0066"},newDiv);
document.body.appendChild(newDiv);
}
}
</script>
</head>
<body>
<script>
SC.initialize({
client_id: 'MY_CLIENT_ID'
});
SC.get('/tracks',{duration:{from:180000,to:900000},tags:'hitech',downloadable:true},function
(tracks){makeDivsFromTracks(tracks);});
</script>
</body>
</html>
I have two javascript files (file1, file2). File1 uses a class defined in file2. Am I able to reference these files from an html file the following manner:
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
Will this allow for file1's dependence upon the class defined in file2?
If not what are some plugins that do allow for this sort of dependency?
It has to do with the way you are going to use them. A simplified approach.
Scenario 1:
script1.js
function primary()
{
secondary();
}
script2.js
function secondary()
{
alert("hi primary");
}
test.html
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
It works (you already know it)
Scenario 2:
script1.js
secondary();
script2.js and test.html as above
It's not working (js error)
Scenario 3:
script1.js
secondary();
script2.js remains the same
test.html
<html>
<head>
<script src=script1.js defer></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
It works.
Is this what you're looking for?
Overview:
Use Jquery to load JS dynamically using the following:
$.getScript("file1.js",function(){
alert("File1.js is loaded");
}
Example with Object Oriented JS and dynamic js loading.
File1.js as:
File1 = function(){
}
File1.prototype=
{
constructor:File1,
primary:function()
{
if (File2 == "undefined")
{
$.getScript("file2.js",function()
{
file2 = new File2();
file2.secondary();
});
}
}
}
File2.js As:
File2 = function(){
}
File2.prototype=
{
constructor:File2,
secondary:function()
{
if (File1 == "undefined")
{
$.getScript("file1.js",functiom()
{
file1 = new File1();
file1.primary();
});
}
}
}
This should give you pretty good idea of dynamic loading of JS, and JS Object oriented concept as well.