0

I followed one of the basic tutorials on the knockout.js website and now I'm just trying to make it work on localhost. In the head, I have included two files: knockout.js and misc_form.js.

<head>
<script src="/knockout.js"></script>
<script src="/misc_form.js"></script>
</head>

I'm going to omit the code for misc_form.js because I didn't modify it and it works 100% on the live knockout.js tutorial.

Here's the HTML

//form.php
function display_form(){
?>
<table>
    <thead><tr>
    <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
    </tr></thead>
    <!-- Todo: Generate table body -->
    <tbody data-bind="foreach: seats">
    <tr>
        <td><input data-bind="value: name" /></td>
        <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
        <td data-bind="text: formattedPrice"></td>
        <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
    </tr>       
</tbody>
</table>
<button data-bind="click: addSeat">Reserve another seat</button>
 <?
 }

Edit - I changed the path to the files and now I'm getting the following error

Uncaught TypeError: Cannot read property 'nodeType' of null  //in reference to knockout.js
user1852176
  • 455
  • 1
  • 9
  • 29

1 Answers1

1

Check the paths for your script files, those look strange. Try visiting http://localhost/Applications/XAMPP/xamppfiles/htdocs/misc_form.js in a web browser, do you see your JavaScript code?

From the urls, I'm guessing they should be:

<head>
<script src="/knockout.js"></script>
<script src="/misc_form.js"></script>
</head>

since htdocs is likely the folder which gets served up as /.

Douglas
  • 36,802
  • 9
  • 76
  • 89
  • I got it to work but I wouldn't have had a trail to start from if it weren't for your tip! I changed the script file to as someone suggested here http://stackoverflow.com/questions/9128015/knockout-syntax-error – user1852176 Dec 13 '12 at 01:25
  • Nice, good to hear. I see you've gone for Daniel's answer; James's answer is worth a look too. `defer="defer"` says to the browser that it *may* load the page dom before loading the script, [.ready()](http://api.jquery.com/ready/) says that the page dom *must* load before the script. – Douglas Dec 13 '12 at 01:37