Knockout newbie, can anyone spot why this doesn't work - javascript

I created a MVC 4.0 project to test Knockout, the mark up is shown below (BTW I loaded all the latest stuff from NUGET) What is shown below is the client side source after the rendering of the View from MVC. I've looked at the network side and saw all the links and scripts arrive at the client. Browser is Chrome. The console doesn't show any errors. Finally, the myMessage text is never rendered. If I put breakpoints in the JS, I do see that the Knockout library is called... Just wondering what I'm doing wrong here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/knockout-3.2.0.js"></script>
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<h2>Index</h2>
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable() // Initially blank
};
viewModel.myMessage("Hello, world!"); // Text appears
</script>
</body>
</html>

you need to call ko.applyBindings. try this:
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable() // Initially blank
};
ko.applyBindings(viewModel) // you need to initialize ko :)
viewModel.myMessage("Hello, world!"); // Text appears
</script>

well you missed the most important part in knockout 'applyBindings' .
Once you construct your view model you just need to call
Step 1: Starting point
ko.applyBindings(viewModel)
step 2: next view model executes
var viewModel = {
myMessage: ko.observable()
};
Refer knockout documentation http://knockoutjs.com/documentation/introduction.html
Sample fiddle to test your scenario Here

Related

change() fires on page loading

Quick background:
I got a project that some developer worked on a couple of years ago and his code is a nightmare, let alone that almost all the software is outdated. The JQuery in the project is still 1.5.2 but I was able to work around that using the non-conflict option of JQuery.
However, I still can't seem to make the change() function work properly - it fires when the page is being loaded. Furthermore, for some strange reason, the On() function doesn't work either.
Here's the code (below the body):
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^=DepartureDay]").on('change',alert('dd'));
And here's the non-conflict function (if it's relevant):
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
I don't know if it's relevant, but wired thing about the code is that the previous programmer decided load all the HTML using JS strings. Another thing that I should note is that I'm trying to detect a change in the value of a uikit datepicker.
Thank you for your help!
I add a fiddle:
https://jsfiddle.net/vzeuhohm/1/#&togetherjs=Sietj3k5oM
Another edit:
https://jsfiddle.net/vzeuhohm/2/
Another edit:
I attach the full code in the hope that someone would be able to understand what is wrong with it -
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="uikit.docs.min.css" type="text/css">
<script language="javascript" src="https://getuikit.com/v2/vendor/jquery.js"></script>
<script language="javascript" src="https://getuikit.com/v2/docs/js/uikit.min.js"></script>
<script language="javascript" src="https://getuikit.com/v2/src/js/components/datepicker.js"></script>
<link href="example160/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="example160/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="example160/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").on('input',function(e){
alert('ff');
});
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" name="DepartureDay1" id="DepartureDay1" data-uk-datepicker="{format:'DD.MM.YYYY'}" placeholder="mm/dd/yyyy" />
</form>
<div>TODO write content</div>
</body>
</html>
You're trying to use the result of calling alert('dd') as the change handler.
You probably want to wrap the alert in a function, and pass that function as the handler instead:
jQuery_3_2_1("input[id^=DepartureDay]").on("change", function() {
alert("dd");
});
Instead of using $(document).ready(), try using
$(window).on('load', function() {
$("input[id^=DepartureDay]").on('change',alert('dd');
});
EDIT
var jQuery_3_2_1 = $.noConflict(true);
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1('[id^=DepartureDay]').on('input', function(){alert('dd');});
});
Instead of .on('change'..., use .on('input'...).
You also have to say function(){alert('dd');} instead of just alert('dd').
try following code
textbox change event doesn't fire until textbox loses focus.
that's why i am posting both example
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^='DepartureDay']").on("change", function() {
alert("your change event is working !!!");
});
});
jQuery_3_2_1("input[id^='DepartureDay2']").on('change keyup paste', function() {
console.log('your change/keyup event is working !!!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="DepartureDay" id="DepartureDay" />
<input type="text" name="DepartureDay2" id="DepartureDay2" />
</form>

Why can't I have two ng-app directives in a given HTML page - AngularJS?

I get the output only if I remove one of the directives i.e. ng-app - demo1 and the models. Why I can't have two ng-app working at the same time. I am new to Angular JS and building up my fundamentals. I get the desired output if I run one directive at a time. So, in this example if I remove the demo ng-app, scripts and controller, I get the desired output. If I remove the demo1 ng-app scripts and controller, I get the first part working fine. How can I get both the directives working at the same time?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<h1> Guru99 Global Event </h1>
<script src="lib/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-3.2.1.js"> </script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name: <input type="text" ng-model="tutorialName"> <br>
<br>
This tutorial is {{tutorialName}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope)
{
$scope.tutorialName = "Checking Angular JS" ;
}
);
</script>
<div ng-app="DemoApp1" ng-controller="DemoController1">
<! behaviour >
{{fullName("Guru","99")}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp1', []);
app.controller('DemoController1',function($scope)
{
$scope.fullName=function(firstName, lastName)
{
return firstName + lastName;
}
});
</script>
</body>
</html>
The output is
Guru99 Global Event
Tutorial Name:
This tutorial is Checking Angular JS
{{fullName("Guru","99")}}
From the Docs:
There are a few things to keep in mind when using ngApp:
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
— AngularJS ng-app Directive API Reference

Check internet connection with offline.js

I am creating phonegap application for android.
I want to check internet connection for application. I am using offline.js.
But it's not working at all for me.
My code is,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>datePickerAngularTPLS</title>
<link href="css/offline.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/offline.js"></script>
</head>
<body>
<script>
$(function () {
function on(evt) {
alert("connected successfully");
}
function off(evt) {
alert("connection failed");
}
Offline.on("up", on);
Offline.on("off", off);
});
</script>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
What is the problem in above code... ?
I just want to show alert on success and lose of internet connection.
I have also tried with navigator.isOnlie, but not reliable.
Please follow offline js LINK
Or other way is :
window.navigator.onLine
This will return true or false.
And one more way is using Phonegap available plugin:
Phonegap Plugin
In your first example you have forgotten to close the $ function. Its likely you would see an error message in the console, and those handlers would never have been created/attached.
If this is just a typo in your question and you are properly closing that function in your real code, then my guess is that you're adding the handlers after the up event has already occurred. Here it explains when these events are triggered.
If you load your page, then toggle your connection on and off do you see the events logged?

Can't display board whereas the ID is same when I use chessboard.js

I want to display chess from chessboardjs.com. But I can't whereas I follow documentation. And whereas the ID is same.
<html>
<head>
<!--
UTF-8 (U from Universal Character Set + Transformation Format—8-bit[1]) is a character encoding capable of encoding all possible characters
-->
<meta charset="UTF-8">
<link rel="stylesheet" href="css/chessboard-0.2.0.css"/>
<script type="text/javascript" src="js/chessboard-0.2.0.js" > </script>
<script type="text/javascript">
var board1 = new ChessBoard('board1', 'start');
</script>
</head>
<body>
<div id="board1" style="width: 400px"></div>
</body>
The id is same. It is 'board1'. I follow the rules from the documentation...
link
But, I get error. The error is chessboard error 1002: element with id "board1" does not exist in the DOM.
Then, I read documentation about error 1002. It says..
ChessBoard could not find your element with document.getElementById. Please note that if you pass a string as the first argument to the ChessBoard() constructor it should be the value of a DOM id, not a CSS selector (ie: "board", not "#board").
link
You don't need the entire jQuery library to get this to work, though you may find it helpful for other things. If you don't foresee using jQuery for anything else all you need is setTimeout
setTimeout(function() {
var board1 = new ChessBoard('board1', 'start');
}, 0);
I accidentally discovered this trick 6 years ago and posted a question that got this informative answer. He did point out that it may not work in IE though perhaps that has changed in the meantime.
You need jquery to make this work.
<html>
<head>
<!--
UTF-8 (U from Universal Character Set + Transformation Format—8-bit[1]) is a character encoding capable of encoding all possible characters
-->
<meta charset="UTF-8">
<link rel="stylesheet" href="css/chessboard-0.3.0.css"/>
<script type="text/javascript" src="js/chessboard-0.3.0.js" > </script>
<script src="https://code.jquery.com/jquery-1.10.1.js"></script>
</head>
<body >
<div id="board1" style="width: 400px"></div>
</body>
<script type="text/javascript">
var init = function() {
//--- start example JS ---
var board = new ChessBoard('board1');
//--- end example JS ---
}; // end init()
$(document).ready(init);
</script>
</html>

jquery causes dygraph to crash

Already searched the whole web for a solution. First i used jqplot for the visualization of a mysqldatabase, but with growing arrays i'm trying to switch to dygraph, moreover its optimiesed for timedate, the problem is i cannot get it to work on ie explorer <9 especially with regard to the document modus. also tested ietester....
the page of dygraph itself works with the graphs, copied the important parts from it but still cannot get it working, maybe someone can show me my mistake or is it better not to use dygraph?anyone makes use of this and gets it working for internetexplorer 6-8?
The problem is the jquery document.ready function without it everything works fine...
<!DOCTYPE html>
<html>
<head>
<!-- Framework,Diagramm-Klasse,Jqplot,Jqplot Plugin -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Konfigurationstool</title>
<script type="text/javascript" src="jquery-test.js"></script>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
g = new Dygraph(document.getElementById("diagrammpreview"), [[1,10,100], [2,20,80], [3,50,60], [4,70,80]]
);
});
</script>
<div id="diagrammpreview" style="height:500px;width:500px;"></div>
</body>
</html>
thanks in advance
What does the debug console in IE say the problem is? It's probably either a race condition or a conflict with the $ variable. You can try to use a pure javascript alternative the ready/load function such as:
window.onload=function() {
g = new Dygraph(document.getElementById("diagrammpreview"), [[1,10,100], [2,20,80[3,50,60], [4,70,80]]);
});
I had the same problem in IE and FF.
$(window).load(function) {
instead of
$(document).ready(function) {
helped, together with including the jquery library directly into the html file (although it was included in my CMS)

Categories