TypeError: this.set is not a function

[Ben]

HI,

I've got an MVVM form that submits fine, but I can't get the parsing of the incoming JSON to work.

$(document).ready(function() {

var viewModel = kendo.observable({

title:"Mr",

titles:["Mr","Mrs","Ms","Dr","Sir","Prof"],

firstName: "",

lastName: "",

companyName: "",

emailAddress:"",

phone:"",

subject:"Sales Request",

subjects:["Sales Request","Literature Request","Recruitment Question","Comment","Other Request"],

message:"",

agreed: false,

confirmed: false,

hideMain:true,

messageID:"",

register: function(e) {

$.post("http://myurl/myco/tools/email_form.php",{

"title":viewModel.get("title"),

"firstName":viewModel.get("firstName"),

"lastName":viewModel.get("lastName"),

"companyName":viewModel.get("companyName"),

"emailAddress":viewModel.get("emailAddress"),

"phone":viewModel.get("phone"),

"subject":viewModel.get("subject"),

"message":viewModel.get("message")

},

function(data) {

// this is the line that raises the this.set error

// vvvvvvvvvvvvvvvvvvvvvvvvvvvv

this.set("messageID", data.message);

// ^^^^^^^^^^^^^^^^^^^^^^^^

console.log(data.message);

},"json");

e.preventDefault();

this.set("confirmed", true);

this.set("hideMain",false);

},

startOver: function() {

this.set("confirmed", false);

this.set("agreed", false);

this.set("hideMain", true);

this.set("firstName", "");

this.set("lastName", "");

this.set("companyName", "");

this.set("emailAddress", "");

this.set("phone", "");

this.set("subject", "Sales Request");

this.set("message", "");

this.set("messageID", "");

this.set("title","Mr");

}

});

kendo.bind($("form"), viewModel);

});

The incoming JSOn is simply

<?php

echo json_encode(array("message"=>"Request submitted with ID ".$reqid));

?>

[Rosen]

Hello Ben,

As the function is not part of the ViewModel but is set to jQuery.post, it context is not the ViewModel but the window object. Therefore, the window (the this in the function) does not have set method and the line is raising the described error.

The easiest way to implement this will be by capturing the outer scope the using in within the function:

register: function (e) {
    var that = this;

    $.post("http://myurl/myco/tools/email_form.php", {
     //...
    },
    function (data) {
        that.set("messageID", data.message);
    }, "json");
    //....
}

Regards,
Rosen
the Telerik team