Why doesnt this js/jquery/knockout work?

Question

I'm (trying) to learn javascript, jquery, and knockout all at once here. I finally got a webservice sending back JSON. But I can't display the data. Can someone tell me why this doesn't work? No errors get thrown. There's simply nothing in the form once it's run. The title says it all: it doesnt work, with no explanation as to what's happening. I need to know why not.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="EditLTC2.aspx.cs" Inherits="RaterWeb.EditLTC2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="formLayout">
        <label for="txtInsuredName">Insured Name:</label>
        <input data-bind="value: InsuredName" />
    </div>
    <script>
        $(document).ready(function ()
        {
            var self = this;

            // Load selected quote from the JSON service
            SelQuote = $.getJSON("http://localhost:46648/LTCJSON.svc/getLTCWithIDs/4/");

            // assign to AppViewModel
            function AppViewModel()
            {
                this.InsuredName = ko.observable(SelQuote.InsuredName);
            }

            ko.applyBindings(new AppViewModel());
        });
    </script>
</asp:Content>

... and it does not return the data that it fetches. It returns a promise object. — Pointy, Jan 08 '14 at 21:33
**The** dup: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — elclanrs, Jan 08 '14 at 21:34

score 0 · Accepted Answer · edited Jan 09 '14 at 14:58

0

getJSON is an async call. So you bind your viewModel then update the value when it's received by the callback for getJSON

$(document).ready(function ()
    {
        var self = this;
        var appViewModel 
        // Load selected quote from the JSON service


        // assign to AppViewModel
        function AppViewModel()
        {
            this.InsuredName = ko.observable("");
        }
        var appViewModel = new AppViewModel();
        ko.applyBindings(appViewModel);
        $.getJSON("http://localhost:46648/LTCJSON.svc/getLTCWithIDs/'4'/",  
        { 
           success: function(data) {
              appViewModel.InsuredName(data);
           }
        });
    });

edited Jan 09 '14 at 14:58

Talon Blackthorne

17
1
5

answered Jan 08 '14 at 21:40

Captain John

1,859
2
16
30

0x800a1391 - JavaScript runtime error: 'SelQuote' is undefined – Talon Blackthorne Jan 08 '14 at 21:48
Updated the creation of insuredname variable – Captain John Jan 08 '14 at 22:10
After getting the brackets set correctly, this stops throwing errors. But when I break into the success: function, the data variable is undefined, so no data is there to be populated. – Talon Blackthorne Jan 09 '14 at 14:14
Well since the Ivory Tower or whoever has put this "on hold" because someone didn't like my title, I guess it's dead. I'll mark this as an answer, though, since it's gotten me closer than anything else. Thanks for the help, Captain John. I think the issue now is that the service returns a multi-field record and all I want here is InsuredName. I'll keep banging my head against the wall. – Talon Blackthorne Jan 09 '14 at 19:02

score 0 · Answer 2 · answered Jan 08 '14 at 21:40

0

as mentioned $.getJSON doesn't return back the data from the ajax call, instead it returns a promise. You need to attach a success handler to it, then update the value of the InsuredName observable like so

$(document).ready(function ()
    {
        function AppViewModel()
        {
            this.InsuredName = ko.observable();
        }
    ko.applyBindings(viewModel );

    var self = this,
    viewModel = new AppViewModel();

    // Load selected quote from the JSON service
    SelQuote = $.getJSON("http://localhost:46648/LTCJSON.svc/getLTCWithIDs/4/");
    SelQuote.success(function(data){
      this.InsuredName(data);
    });



    });

answered Jan 08 '14 at 21:40

Hattan Shobokshi

687
5
13

0x800a1391 - JavaScript runtime error: 'InsuredName' is undefined – Talon Blackthorne Jan 08 '14 at 21:47
sorry that should have been viewModel.InsuredName(data); – Hattan Shobokshi Jan 08 '14 at 21:57
Well since the Ivory Tower or whoever has put this "on hold" because someone didn't like my title, I guess it's dead. I'd like to mark this as an answer also, though, since it helped me understand Captain John's answer. Thanks for the help, Hattan. Wish me luck figuring out why it's still not working :) – Talon Blackthorne Jan 09 '14 at 19:06

Why doesnt this js/jquery/knockout work?

2 Answers2