Click here to Skip to main content
13,702,744 members
Rate this:
 
Please Sign up or sign in to vote.
See more: , +
Hi all

This is my code showing error
Uncaught ReferenceError: jQuery is not defined jquery-ui.min.js:5
Uncaught TypeError: Cannot read property 'nodeType' of null


I am trying to learn knockout js but it is showing this ko is not found
My Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SPA.aspx.cs" Inherits="SPA" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
    <script>
        // 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>
</head>
<body>
    <form id="form1" runat="server">
        <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>
    </form>
</body>
</html>

Please say what i did wrong

Please help to solve the problem
I tried in http://jsfiddle.net/bhagirathip/Z7uJZ/[^]

its working fine but not working in my system .


Please Help

Thanks in advance
Posted 16-Oct-12 23:42pm
Updated 17-Oct-12 3:43am
v3
Comments
Tejas Vaishnav 17-Oct-12 5:54am
   
i think you got that error because of your Knockout.js is not loaded properly in your page.

so please try to check that part, or if it is properly loading, then please write your spa.js code in your page <script> tag. and then try to run again.
Mac12334 17-Oct-12 8:00am
   
Now it is showing another error :
Uncaught TypeError: Cannot read property 'nodeType' of nullUncaught TypeError: Cannot read property 'nodeType' of null
Tejas Vaishnav 17-Oct-12 9:13am
   
from where you got that error in code behind or from javascript... please use improve question functionality and provide more detail on your new error if possible also provide part of your code from where you got that error.
Mac12334 17-Oct-12 9:21am
   
Updated my question.

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

This is not a valid script token

<script src="http://jquery-ui.googlecode.com/svn/tags/1.8.22/"></script>


It needs to point at the js file, something like

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>


Your full source should read like so...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SPA.aspx.cs" Inherits="SPA" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <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>
    </form>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
    <script>
        // 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);
        };

        $(document).ready(function () {
            ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work​​​​    
        });
    </script>
</body>
</html>
  Permalink  
v3
Comments
Mac12334 17-Oct-12 9:42am
   
Changed the js script showing error

Uncaught ReferenceError: jQuery is not defined jquery-ui.min.js:5
Uncaught TypeError: Cannot read property 'nodeType' of null
Dylan Morley 17-Oct-12 9:51am
   
sure, you haven't referenced jQuery. Do you even need the jquery ui reference?

For the purpose of the knockout demo (the source you've posted), you don't need it at all. You can remove that script reference completely. If you want to keep it, then you need to reference jquery *before* the UI reference, so add this line above the ui referece

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
Mac12334 17-Oct-12 10:30am
   
I removed the jquery min part
Showing Error
Uncaught TypeError: Cannot read property 'nodeType' of null
Only

How can i over come from this problem
Mac12334 17-Oct-12 10:49am
   
Please reply Mr. Dylan
Dylan Morley 17-Oct-12 10:59am
   
See updated source.

1) Scripts should be referenced at the bottom of your page. This gives a performance boost to the perceived loading time of the page
2) We use $(document).ready to make sure the DOM is fully loaded before trying to bind to knockout
Mac12334 18-Oct-12 2:02am
   
Thanks a ton Dylan
Its working fine.
Can you please share why previously it is not working and now it is working fine.
Dylan Morley 18-Oct-12 3:52am
   
Once the script references were corrected, *where* they were was important. You had them at the top of the page and were attempting to bind to knockout before the page had loaded completely.

By putting them at the bottom, and also using the jQuery document.ready function, you ensure that the page is loaded fully before binding to knockout.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web01-2016 | 2.8.180906.1 | Last Updated 17 Oct 2012
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100