This is a very beginner level question as I just started to look at knockout js by downloading js,referring it in my web app.
My simple aspx code. based on first tutorial on knockout js site learning page.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="KnockoutDemo.aspx.cs" Inherits="knockoutjs.KnockoutDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="javascripts/knockout-3.2.0.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function AppViewModel() {
debugger;
this.firstName = "XYZ";
this.lastName = "UU";
}
function callKnockOut() {
debugger;
ko.applyBindings(new AppViewModel());
}
</script>
<div>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<button id="click" onclick="callKnockOut();"></button>
</div>
</form>
</body>
</html>
ideally the values should take effect after I click button.the code runs through successfully.labels won't show anything!
Knockout is client side javascript library, and you are submitting your form to server so instead of that don't run this at server run it to client i.e. dont write runat="server" for form tag. Then this will absolutely work.
function AppViewModel() {
debugger;
this.firstName = "XYZ";
this.lastName = "UU";
}
function callKnockOut() {
debugger;
ko.applyBindings(new AppViewModel());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<form id="form1" action="#">
<div>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<button id="click" onclick="callKnockOut();">submit</button>
</div>
</form>
Related
I'll soon work on some projects that use KnockOutJS, so I'm studying it a bit. I created a simple project containing this simple code (I found it in the official page), but it does not work.
I'm literally doing a copy paste of the official example.
<!DOCTYPE html>
<html>
<head>
<title>KnockOut JS Test</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
</head>
<body>
<script type="text/javascript" src="/Scripts/knockout-3.4.2.js">
$(document).ready(function () {
// Here's my data model
var ViewModel = function (first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function () {
// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
}
</script>
<div class='liveExample'>
<p>First name: <input data-bind='value: firstName' /></p>
<p>Last name: <input data-bind='value: lastName' /></p>
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
</div>
</body>
</html>
The page should load showing "Hello, Planet Earth", but it only show "Hello, ".
JS library reference tags and actual script tag where you are writing your code should be different. Wrap your js code in <script></script>
<!DOCTYPE html>
<html>
<head>
<title>KnockOut JS Test</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// Here's my data model
var ViewModel = function (first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function () {
// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
})
</script>
<div class='liveExample'>
<p>First name: <input data-bind='value: firstName' /></p>
<p>Last name: <input data-bind='value: lastName' /></p>
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
</div>
</body>
</html>
I wrote this code but still print preview option is coming...
this.contentWindow.print() for printing purpose
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function printPage()
{
var div = document.getElementById("printerDiv");
div.innerHTML = '<iframe src="PrintDemo.aspx" onload="this.contentWindow.print();"></iframe>';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button onclick="printPage()">prin`enter code here`t</button>
<div id="printerDiv" ">
This Page Is for print demo`enter code here`
</div>
</div>
</form>
</body>
</html>
I am trying to learn xml and ajax for a school project I am currently working on. I need to create a chat system between two users and because I am still learning I do some "experiments" to see how things work.
I am trying to get information from an xml file and to print the information on but the problem is after I get the xmlDoc. , and press CTRL+SPACE, I don't see that I have any getElement option.
This is the XMLFile:
<?xml version="1.0" encoding="utf-8" ?>
<Conversation>
<Massage>
<To>a</To>
<From>b</From>
<Text>a to b</Text>
<Date>11/12/2014</Date>
</Massage>
<Massage>
<To>b</To>
<From>a</From>
<Text>b to a</Text>
<Date>11/12/2014</Date>
</Massage>
</Conversation>
And this is the html file:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function LoadXMLDoc(FileName) {
var xmlhttp;
if (window.XMLHttpRequest())
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET", FileName, false);
xmlhttp.send();
return xmlhttp.response;
}
</script>
</head>
<body>
<script>
function Function() {
var xmlDoc = LoadXMLDoc("XMLFile.xml");
}
</script>
<form id="form1" runat="server">
<div>
<center>
<h1> Chat </h1>
<div id="Box" style="position:relative;height:200px;width:400px;border-width:2px;border-style:solid;border-color:black">
<div id="Conversation">
</div>
<div id="Write" style="position:absolute; bottom:0;right:0;">
<input type="text" id="MassageText" />
<button id="SendMassageButton" causesvalidation="False" type="submit" onclick="Function(); return false">Send</button>
</div>
</div>
</center>
</div>
</form>
</body>
</html>
I am learning with w3school and I don't see any problems here.
Maybe there is a problem with the intellisense? I had an error message about that when I was trying to create a for loop.
B.T.W sorry if I have a bad english.
I've written a .jsp file whose contents should be updated on click of the button. I tried using appendChild of Javascript but it's not working as this is a .jsp file.
Here's the code:
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title> Hello World!</title>
</head>
<p id="demo"><h1> Hello, </h1>
<body>
<br/>Firstname:<input type="text" name="firstname">
<button onclick="myFunction()">Enter</button>
<%= request.getParameter("firstname")
%>
<script>
function myFunction()
{
var node=document.getElementById("demo");
document.getElementById("demo").appendChild(<%= request.getParameter("firstname")%>);
}
</script>
</body>
</html>
I want the output to be " Hello, Dia", If Dia is entered as the firstname and when Enter button is clicked. The firstname should be appended to Hello, !
You have mixed scriptlets inside script . javascript is a client side technology.
While scriptlets are executed in application servers when you compile (they are nothing but the java codes)
Try this ,
<script>
function myFunction()
{
var node=document.getElementById("demo");
var value=<%= request.getParameter("firstname")%>;
document.getElementById("demo").appendChild(value);
}
</script>
Firstly , the click of your button does not take you back to the server , so you wont need to access the value of the text field using a scriptlet , you can do this in plain HTML and Javascript
as follows :
<html>
<head>
<title> Hello World!</title>
</head>
<body>
<div id="demo"><h1> Hello,<div id="displayName"></div> </h1></div>
<br/>Firstname:<input type="text" name="firstName" id="firstName"/>
<button onclick="myFunction()">Enter</button>
<script>
function myFunction()
{
var firstName = document.getElementById("firstName");
document.getElementById('displayName').innerHTML = firstName.value;
}
</script>
</body>
</html>
In the following code why does the jquery template not render? I thought that the template was build in? thank you
<script id="friendsTemplate" type="text/html">
<ul>
{{each(index,friend) friends}}
<li>${ friend.name }</li>
{{/each}}
</ul>
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/knockout-2.2.1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>details</h1>
<p>first name: <input data-bind="value: firstName" /></p>
<p>last name: <input data-bind="value: lastName" /></p>
<p>full name: <span data-bind ="text: fullName"></span></p>
<h2>friends</h2>
<div data-bind="template: 'friendsTemplate'"></div>
<script id="friendsTemplate" type="text/html">
<ul>
{{each(index,friend) friends}}
<li>${ friend.name }</li>
{{/each}}
</ul>
</script>
</div>
</form>
</body>
</html>
<script type ="text/javascript">
function friend(name) {
return {
name: ko.observable(name)
};
}
var viewModel ={
firstName: ko.observable("bert"),
lastName: ko.observable("smith"),
friends:ko.observableArray([new friend('steve'),new friend('annie')])
};
viewModel.fullName = ko.dependentObservable(function () {
return this.firstName() + " " + this.lastName();
},viewModel);
ko.applyBindings(viewModel);
</script>
The jQuery.tmpl support is built in however you need to reference jQuery and the jQuery.tmpl to make it work as stated in the documentation under: Note 6: Using jQuery.tmpl, an external string-based template engine:
By default, Knockout comes with support for jquery.tmpl. To use it,
you need to reference the following libraries, in this order:
<!-- First jQuery --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- Then jQuery.tmpl --> <script src="jquery.tmpl.js"></script>
<!-- Then Knockout --> <script src="knockout-x.y.z.js"></script>
If you reference all the dependencies your code should work fine: Demo JSFiddle
You need to pass a data object to your template.
data-bind="template: { name: 'friendsTemplate', data: $data }"
Look at http://knockoutjs.com/documentation/template-binding.html for details.
Is there a reason why you are using a jQuery Template? The following is more in alignment with "typical" Knockout usage. Also you should only use external templates if there is reuse. This code could easily be inlined.
<script id="friendsTemplate" type="text/html">
<ul data-bind="friends">
<li data-bind="text: name"></li>
</ul>
</script>