Skip to content

HTML5 With REST API data-bind not updating

Hello,

I have tried and played with the HTML5 with REST API exapmle on Github and now I have been trying to make my own webpage. But I ran in some problems with the data-binding to my HTML page not updating.

I can read the variable from the GDS which is defined in a PLCNext engineer project, but when I read it the data-bind or the variable does not update.

In my javascript file I made a AppViewModel function just as in the example:

function AppViewModel() {
var self = this;
self.hmitags = ko.observableArray(groupDataValues);
self.Capa100 = ko.observable("Cap100");
self.Testvar = ko.observable(50);
}

var viewModel = new AppViewModel();
ko.applyBindings(viewModel);

 

And with the function ReadVariables which I copied from the Github page I read the variable:

function ReadVariable()// function for reading out individual variables
{
// list can contain only one variable
var HMIReadList = "&paths=MainInstance.Testvar"
data.length = 0; // get rid of the data from the last query
// issue the data request
$.ajaxSetup({
beforeSend: function(xhr){
xhr.setRequestHeader('Authorization', 'Bearer ' + BearerToken);
}
});
$.ajax({
type: "GET",
url: baseurl+"_pxc_api/api/variables?pathPrefix=Arp.Plc.Eclr/"+HMIReadList,
})
.done(function(data, status, jqXHR){
viewModel.Testvar = data.variables[0].value;
console.log(viewModel.Testvar);
})
.fail(function(jqXHR, status, errorThrown){
console.log("CreateSession Error: " + errorThrown);
console.log("Status: " + status);
console.dir(jqXHR);
alert( "CreateSession $.ajax failed. Status: " + status);
});;
}

 

And in my HTML file I found out that I had to include the javascript file at the bottom of body:

script type="text/javascript" src="js/testfile.js"

/body

and did the binding as follows:

span data-bind="text: Testvar  /span

on my webpage I see the number 50 for my Testvar variable as i have given it as its init value. And with a button I call the function ReadVariables to update the Testvar to its actual value which is not 50 but it does not update the variable on the webpage. But I can see in the console that the value for Testvar is 20.

 

 

Comments

  • I got the solution, so for anyone with the same problem this is the solution.

    I had to replace viewModel.Testvar = data.variables[0].value; to viewModel.Testvar(data.variables[0].value); and then it worked.

Sign In or Register to comment.