I am trying to source some data from the datatable I am working on. I have an edit button on every row and when is clicked it suppose to bring a form with the data that is already in the table for editing. I need to get real time data when the form is render however ajax.reload() doesn't load the table on time for the form be filled by the correct data and with code below only shows the form for the first employee:
let editEmployeeId;
$(document).ajaxStop(function(){
$('#employeesTable tbody').on('click', '.btn.btn-warning.small-edit-button', function(){
let thisRow = this;
tableEmployees.ajax.reload(function(){
//tableDepartments.draw();
tableDepartments.columns().search("").draw();
//tableEmployees.columns().search("").draw();
getDropdown(1,'#departmentEditDropdown', 'Departments');
var data = tableEmployees.row($(thisRow).parents('tr')).data() || tableEmployees.row($(thisRow).parents('li').attr('data-dt-row')).data();
$('#editFirstName').val(data.firstName);
$('#editLastName').val(data.lastName);
$('#departmentEditDropdown>select').val(data.department);
updateLocation('#locationEditDropdown','#departmentEditDropdown>select');
$('#departmentEditDropdown>select').trigger('change');
$('#locationEditDropdown>select').val(data.locationID);
$('#editJobTitle').val(data.jobTitle);
$('#editEmail').val(data.email);
$('#editEmployeeModal').modal("show");
});
});
I tried:
promise
settimeout
nested functions
async functions
I also try to change ajax call to set async: false and this way it works perfect but I don't think that is a good practice and I have other calls through the document and takes double of time to load the page first time.
I changed the way of calling the button with an extra class for the employees page and used the .click() method instead .on() because for some reason it was going in a loop with the last one. Now works and this is how it looks:
let editEmployeeId;
$(document).ajaxStop(function(){
$('.btn.btn-warning.small-edit-button.employees').click(function(e){
e.preventDefault();
let thisRow = tableEmployees.row($(this).parents('tr'));
let thatRow = tableEmployees.row($(this).parents('li').attr('data-dt-row'));
tableDepartments.columns().search("").draw();
tableEmployees.columns().search("").draw();
getDropdown(1,'#departmentEditDropdown', 'Departments');
tableEmployees.ajax.reload(function(){
var data = thisRow.data() || thatRow.data();
editEmployeeId = data.id;
$('#editFirstName').val(data.firstName);
$('#editLastName').val(data.lastName);
$('#departmentEditDropdown>select').val(data.department);
$('#departmentEditDropdown>select').trigger('change');
$('#editJobTitle').val(data.jobTitle);
$('#editEmail').val(data.email);
$('#editEmployeeModal').modal("show");
})
});
I am using GeckoWebBrowser within my VB.NET (Windows Form App) program. The GeckoWebBrowser loads a local html file. This html has embed in-line a svg file (human body diagram with bones and internal organs) with a javascript function for picking up all the "ids" of the elements from the svg document. I'd like to call the aforementioned javascript function from VB.NET (Windows form app), but I don't know how to do so. Can anyone help me, or give me a source code example please? All the stuff I've found is based in C#...
This is my javascript function in my html file:
<script type="text/javascript">
(funcion () {
// Function to be called in VB.NET when the DOM is loaded
var SVGHandler = function () {
// Picking up the id Root Node="CUERPO_HUMANO" into svg variable
var svg = document.querySelector('#CUERPO_HUMANO');
// In Items we save all the <g> which have an ID
var items = svg.querySelectorAll('g[id], path[id]');
//var items = svg.querySelectorAll('g[id]');
// We loop all the nodes saved in Items and add them to click event listener
forEach(items, function (index, value) {
value.addEventListener('click', function (event) {
event.preventDefault();
//We avoid the spread of events
event.stopPropagation();
return event.currentTarget.id
// console.log(event.currentTarget.id)
});
});
}
// https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};
// With this method, we call a SVGHandler when DOM is totally loaded
document.addEventListener('DOMContentLoaded', SVGHandler);
})();
</script>
What code should I use in VB.NET for calling my javascript function each time I click on a specific bone or organ in the human body diagram loaded in GeckoWebBrowser?
I want to save the "id" picked up with the calling into a string variable in order to use it as a parameter in a SQL statement and populate a DataGridView.
I've been searching and all that I could find was related to C#, not a single VB.NET example. Even though I was trying to figure out the equivalence in VB.NET trying to convert the C#'s examples to VB.NET, I have some doubts on how to do the javascript call. According to my javascript function It could be something like this:
browserControl.Navigate("javascript:void(funcion())");
Please, Can anyone help me to solve this? I would be very thankful...
Well since you have set click EventListener's I think that you're not looking for a way to call the eventual function from VB.NET but this is quite unclear according to your post so I'll give you examples on how to call a javascript function and how to trigger a reaction in your VB.NET code through javascript using GeckoWebBrowser.
Your code snippet of your attempt to call a js function from your vb code is correct. The only problem is that you haven't defined any callable js function in your html file. In your case you should do this to trigger your main js function from vb:
//Sorry I don't know vb. I'll give example in c# keeping it as simple as possible so that you can easily convert it to vb
Gecko.GeckoHtmlElement humanBodyPart = (Gecko.GeckoHtmlElement) browserControl.Document.GetElementById("your id");
humanBodyPart.Click();
The above code finds the element with the matching id in the GeckoWebBrowser and clicks it. Since you've set click EventListener's, by clicking one of the elements this will trigger the function assigned to them to run.
Moving on, in order to save the id of the elements to a string variable in your vb code you'll need to add this little bit of js code in to the code that you pass as 'callback' parameter in your forEach function:
var event = document.createEvent('MessageEvent');
var origin = window.location.protocol + '//' + window.location.host;
var event = new MessageEvent('jsCall', { 'view': window, 'bubbles': false, 'cancelable': false, 'data': 'YOUR EVENTUAL ID AS A STRING (THIS STUFF GOES BACK TO THE VB/C# CODE)' });
document.dispatchEvent (event);
Then the above snippet should be handled in your vb code like this:
browserControl.AddMessageEventListener("jsCall", (id) =>
{
//Here in the variable id you have your clicked id as a string. Do what you wanted to do...
});
VB side :
you need wait until the document is completed to add listeners
for example : _DocumentCompleted
Private Sub GeckoWebBrowser1_DocumentCompleted(sender As Object, e As Gecko.Events.GeckoDocumentCompletedEventArgs) Handles GeckoWebBrowser1.DocumentCompleted
GeckoWebBrowser1.AddMessageEventListener("my_function_name JS_side", AddressOf my_sub_for_treatment)
End Sub
JS side :
var event = document.createEvent('MessageEvent');
var origin = window.location.protocol + '//' + window.location.host;
var event = new MessageEvent('my_function_name JS_side', { 'view': window, 'bubbles': false, 'cancelable': false, 'data': my_data_to transfer });
document.dispatchEvent (event);
I have simple foreach loop in my razor view:
#foreach (var item in Model.materijali) {
<tr>
<td>
#Ajax.ActionLink(item.sifra_materijala,
"DetaljiMaterijala",
"NormativiMaterijala",
new { materijal = item.sifra_materijala.ToString() },
new AjaxOptions { HttpMethod = "GET" },
new { id = "mylink" })
</td>
</tr>
And a jQuery function:
<script type="text/javascript">
$(function () {
$('#mylink').click(function () {
$.post(this.href, function (json) {
var json = $.parseJSON(data.responseText);
$("#sifra_materijala").val(json.sifra_materijala.val())
alert(json.sifra_materijala);
});
return false;
});
});
</script>
This calls controller action and returns some result that I need to show on my partial view.
When I click on any href link generated by foreach loop, controller action is regularly called and executed, except on the first one, when nothing happens...
Can someone help me with this?
I've never done any dot net programming, let alone used razor views, but as I understand it, #Ajax.ActionLink generates an <a> element and the JavaScript that makes the ajax call when the link is clicked.
You have added a second ajax call, but for the first <a> element only. It applies only to the first one because even though you may have several <a> elements with id="mylink", id values are supposed to be unique. The handler you supply also has an error in it: It references data.responseText, but data is undefined.
Instead of adding your own click handler, supply an OnSuccess callback function for the ajaxOptions parameter for the #Ajax.ActionLink call. And get rid of the new { id = "mylink" } parameter.
The first click event sends an API call that returns several search results.
The second click event should occur when clicks 'upvote', which is an option in each returned search result.
Problem is, it seems that I can't select upvote buttons in search results because they were created (via cloning another element) after the first click event.
Can anyone explain why this happens?
Part of the first click event:
success: function(json) {
var reviews = json.reviews;
$.each(reviews, function(i) {
var critic = reviews[i].critic;
var quote = reviews[i].quote;
var score = reviews[i].original_score;
$('#tile-demo').clone().removeAttr('id').removeClass('hidden')
.find('.critic-name').text(critic).end()
.find('.critic-score').text(score).end()
.find('.critic-quote').text(quote).end()
.appendTo('.review-grid');
}); //end each loop
} //end success call
the new call, which should select a clone of #tile-demo:
$('.search-results').click(function(){
var goodCritic = $(this).siblings('.critic-name').text();
console.log(goodCritic);
});
Use On method as the following:
$('#containerId').on('click','upvotebuttons',function(){write your code here});
where containerId is the id of the container div where you render new data, and replace [upvotebuttons] with [class name] of the upvote buttons.
I just came across a quick screencast by Jeffrey Way that suggests a slightly different solution. The other answer works fine--this is just another way to go about it (still uses event delegation).
$('#parent-of-target').click(function(e) {
if ( $(e.target).is('#target-element') ) {
alert('clicked');
}
});
So #SOF,
I've been trying to make my webpage of school grades, results, projected grades... etc have an auto update feature so that the data on the page refreshes when new data comes through via the use of jquery and ajax aswell as have a "single view" for classes.
My main issue is that I'm unable to get any form of ajax refreshing/loading working correctly, I can produce my output in json or single html files, for my purposes I think the json would be better but I'm not sure.
My webpage has a navigation helper in the top left, which is a dropdown menu which is populated via a list found by a "search" for <a id="CLASS1" optionname="CLASS 1"></a> which can be found within the table, however if need be I can populate this outside of the table if need be.
I ideally want to be able to modify the dropdown so we have in this example a total of 8 options consisting of - Select Class -, Class 1, Class 2, Class 3, Class 4, Class 5, All Updating, All Non-Updating
All Updating
This option will load all the class's into one html viewable page and update each class every 30 seconds (I say each class as some classes might update in one hour, in a different hour some other classes might update) so it would need to compare and if different then update?
All Non-Updating
This option will load all the class's into one html viewable page but will not update unless the user clicks on a different class (using the dropdown) and then clicks back...
Class 1, Class 2, Class 3... etc (Individual Loading/Single View)
This option will load a single class's data into a html viewable page and will update that specific class every 30 seconds, in a previous post a user named Gaby aka G. Petrioli gave an example which is pretty close to what I need however the member never came back to me: http://jsfiddle.net/u7UkS/4/
Links to all the data
HTML - http://pastebin.com/raw.php?i=0PNQGMmn
CSS - http://pastebin.com/raw.php?i=4H5GHv15
JSON - http://pastebin.com/raw.php?i=xk860dBN
Single Class Page - http://pastebin.com/raw.php?i=HvpaVhG6
JSFiddle - http://jsfiddle.net/kHtuQ | http://jsfiddle.net/kHtuQ/show
Previous post with some ajax examples by certain members: Anchor Cycler / Dropdown to import school class data periodically
Below is an example to show roughly what is in each "class" Note Class = School Class
Super Slimed Down Table Example:
<table id="gradient-style">
<tbody>
<thead>
<tr>
<th scope="col"><a id="CLASS1" optionname="CLASS 1"></a>Class</th>
</tr>
</thead>
<tr><td>Class 1</td></tr>
</tbody>
<tfoot>
<tr>
<th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="http://placehold.it/250x50"/></th>
</tr>
<tr>
<td colspan="34"><em><b>Data</b> - Test</em></td>
</tr>
</tfoot>
</table>
If anyone could help with this it would be much appreciated and if you are able to comment please do so that I can continue to learn.
Thanks
Dennis S
using ajax is very simple,
I recommend you to use HTML datatype for this as you have a table in your container,
there is an api documentation here => http://api.jquery.com/jQuery.ajax/
here's a fiddle I made for you => http://jsfiddle.net/sijav/kHtuQ/19/ or http://fiddle.jshell.net/sijav/kHtuQ/19/show/
I have put ajax code in a function named updateClass(url) which url stands for the url to get and it will append the container with the HTML it get =>
function updateClass(url){
$.ajax({
url: url,
dataType: "HTML",
error: function(msg){
alert(msg.statusText);
return msg;
},
success: function(html){
$("#container").html(html);
}
});
}
I have added a refreshClass which refresh the whole container class, =>
function refreshClass(){
updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class
}
and changed on change selector to below code =>
var classUpdateI; //stands for our interval updating class
$(".class-selector").on("change",function(){
if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it's own
if(this.value == "")
return; // if the value is null don't do anything
else if(this.value == "allclassnup"){
refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class
}
else if(this.value == "allclassup"){
refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000)
classUpdateI = setInterval(refreshClass,30*1000);
}
else //else then it's a simple class value, just simply update the current class
updateClass(this.value);
})
Hope it helps ;)
EDIT: Edited so it can get big table (not generate it!) and all-updating will update in an interval of 30 sec
AnotherEDIT: Believe it or not I have done all of your question!
WORKING FIDDLE:http://jsfiddle.net/sijav/kHtuQ/39/ or http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1 that is because it was only done for the last html, for the new we should make it again! so put the whole $('tr').click() function into another function and call it when necessary.
- do you want this to fully working? it's a little bit complicated but it can works with a bit of change in codes! that I'm gonna show you, Alright here's the algurithm we should put the current class on class selector change to cookie and then we can read it whenever we refresh or reload the page and put the necessary selected class and so on ...
but in code designing here I did to make it working,
first I made a global variable called FirstTimeInit = true; just to be sure if we're on the first time of page loading or not, second I put the for loop that make things highlighting on page load to a function called selectSelectedClass, why? because we need to call it many times, Third I added some if statement to be sure if we can read cookies then change highlighted things and current class also, here is the code:
if(readCookie("CurrentClass")) //if we can read coockie
$(".class-selector").val(readCookie("CurrentClass")).change(); //change it's value to current cookie and trigger the change function
else{ // else
selectSelectedClass(); //select those which was highlighted before
trClick(); //make things clickable
FirstTimeInit = false; //and turn of the first time init
}
Forth adding a create cookie on selector value changes = > createCookie("CurrentClass",$(".class-selector").val(),1);
and finally change the success on getting Ajax to this
success: function(html){
$("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it's for your second question
if(FirstTimeInit){ //if it is First Time then
selectSelectedClass(); //highlight which was highlighted after put the correct html
FirstTimeInit = false; // turn of the first time init
}
else //else
for (var i=0;i<($("table").children().length);i++){
if(readCookie(i))
eraseCookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter
}
trClick(); //make things selectable!
}
Also to make it bugfree I have changed the refreshClass to turn firstinit when the selected class is all or it is null because then we have all classes and need those cookies! so here's the code:
function refreshClass(){
if(readCookie("CurrentClass")=="allclassnup"||readCookie("CurrentClass")=="allclassup"||readCookie("CurrentClass")==null)
FirstTimeInit = true;
updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/");
}
2 the <a id="TOP"></a> must be before the container, the <a id="KEY"></a> must be generated on the end of the container after putting html on the container. so $("#container").html(html + '<a id="KEY"></a>');
3 Next and Previous button was designed for non-ajax previous design, It's now needing a different solution! see these simple codes for example
$("#PreviousClass").click(function(){//on prev click
$(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change
});
$("#NextClass").click(function () {//on next click
$(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change
});
4 Yes It is possible you should change your up to key and down to these codes and you're good to go =>
currentClass=0;
$("a.TOPJS").click(function () {
if(currentClass>0){
currentClass--
scrollToAnchor('CLASS'+currentClass);
}
});
$("a.KEYJS").click(function () {
if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){
currentClass++
scrollToAnchor('CLASS'+currentClass);
}
else
scrollToAnchor('CLASSMAX');
});
Godd Luck
Another Request EDIT: (hope this will be the last!)
Working Fiddle: http://jsfiddle.net/sijav/kHtuQ/42/ or http://fiddle.jshell.net/sijav/kHtuQ/42/show/
alright as you didn't like the change class on refresh to one which was in it I have removed that, and a better I have added some codes to have classes in cookies, as cookies are not tree there is some kind of conditions, the class is being read from the last character of class selector so be sure to have class number at the last character like -> Class number ***5*** the number 5 will be read for class selector!
EDIT: optimize class next and prev see http://jsfiddle.net/sijav/kHtuQ/46/
EDIT: As per comment requested, That is what I'm trying to tell you, sometimes the demo shows on jsfiddle.net, sometimes it shows on fiddle.jshell.net, these are different domains and you cannot get html from different domains.
1) You may only put function in Interval or just create another function and call it proper way like this =>
classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000);
2) Missings?! I can't find your second question!
3) Well, ... trclick needs to change ... to =>
function trClick(tIndex){ //tIndex would be classnumber from now on
if (tIndex == -1){ //if it is all updating or all non updating
$("tr").click(function(){ //do the previous do
$(this).toggleClass('selected').siblings().removeClass('selected');
if(readCookie($(this).parent().index("tbody"))){
if(readCookie($(this).parent().index("tbody"))==$(this).index())
eraseCookie($(this).parent().index("tbody"));
else{
eraseCookie($(this).parent().index("tbody"));
createCookie($(this).parent().index("tbody"),$(this).index(),1);
}
}
else
createCookie($(this).parent().index("tbody"),$(this).index(),1);
});
}
else{ //else
$("tr").click(function(){ //on click
$(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before
if(readCookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row
if(readCookie(tIndex)==$(this).index()) //as before if we selecting it again
eraseCookie(tIndex); //just erase the cookie
else{ //else
eraseCookie(tIndex); //select the new one
createCookie(tIndex,$(this).index(),1);
}
}
else
createCookie(tIndex,$(this).index(),1); //else if we can't read it, just make it!
});
}
}
and when we call it on Ajax success we should call it with classNumber => trClick(classNumber);
Last working fiddle: http://jsfiddle.net/sijav/kHtuQ/53/ or http://fiddle.jshell.net/sijav/kHtuQ/53/show/
Good Luck
Honestly I'm having a hard time with the code you posted, mostly because I don't understand the JSON example. If you are going to be storing flat HTML as the JSON values, it makes more sense to just $.ajax the HTML into the DOM rather than JSON encoding, parsing and inserting. That being said, I am going to assume that the JSON was not a realistic example and that it will take more of the form:
{ class_name: "Class 1", description: "Blah Blah Blah" }
With that assumption in mind, this well-documented but untested example should point you in the right direction. Essentially, I do the following:
Define an HTML template
Create a simple templating function to transpose the JSON values into the HTML template
Setup an interval to poll the server for new data using setInterval calling a function which passes a timestamp of the last time we requested to your JSON generating server-side script using getJSON
Here is my example, please let me know if you have any questions.
<script>
// I wrapped this in a self-invoking anonymous function to prevent adding new global variables
(function(){
var SECONDS_TO_POLL = 3
, $parent_node = $('#node-to-append-to')
, last_timestamp = null // this will be a timestamp passed to the server
, template = '<table id="gradient-style"> \
<tbody> \
<thead> \
<tr>
<th scope="col"><a id="{ident}" optionname="{class_name}"></a>Class</th> \
</tr> \
</thead> \
<tr><td>{class_name}</td></tr> \
</tbody> \
<tfoot> \
<tr> \
<th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="{image}" /></th> \
</tr> \
<tr> \
<td colspan="34"><em><b>Data</b> - Test</em></td> \
</tr> \
</tfoot> \
</table>';
/**
* simple templating function
* #param template String template using bracket vars (e.g. <h1>{message}</h1>)
* #param values Object literal (e.g. {message: "Hello"})
* #return Rendered HTML template
*/
var render_template = function(template, values) {
values = values || {};
return template.replace(/{([^{}]*)}/g, function(bracketed, clean){
var object_value = values[clean];
return ['string', 'number'].indexOf((typeof object_value)) > -1 ? object_value : bracketed;
});
};
// this is our polling function, will retrieve the JSON from the server, convert to HTML using template and render to the DOM
var poller = function(){
// load the JSON and pass a GET var telling the server what timestamp to query from (e.g. WHERE data.timestamp > last_timestamp)
$.getJSON('/path/to/json?last_retrieved='+last_timestamp, function(data){
// render the new data into our HTML template
var html = render_template(template, data);
// append the result to the parent DOM node
$parent_node.append(html);
})
// get a current timestamp so that we can limit the server results to those
last_timestamp = new Date().getTime();
}
// retrieve new results every N seconds
setInterval(poller, SECONDS_TO_POLL*1000);
})()
</script>
Also, just to put a bow on this, if you are just return HTML from the server, you can (for the most part) simply replace $.getJSON with $.get, forgo all of the template rendering on the client-side and just append the response to the DOM
(function(){
var SECONDS_TO_POLL = 3
, $parent_node = $('#node-to-append-to')
, last_timestamp = null // this will be a timestamp passed to the server
// this is our polling function, will retrieve the HTML from the server and render to the DOM
var poller = function(){
// load the HTML pass a GET var telling the server what timestamp to query from (e.g. WHERE data.timestamp > last_timestamp)
$.get('/path/to/server?last_retrieved='+last_timestamp, function(html){
// append the result to the parent DOM node
$parent_node.append(html);
})
// get a current timestamp so that we can limit the server results to those
last_timestamp = new Date().getTime();
}
// retrieve new results every N seconds
setInterval(poller, SECONDS_TO_POLL*1000);
})()
The best way to solve your problem is to use a binding library such as knockout. With it you separete your data and your view and only have to worry how you update the data, the view will get updated automatically. This is what it seems you are currently struggeling with.
That's why I made small sample generating a list and updating the data by constantly polling to it (using a fake service which always returns the same data which changes randomly).
Here is the example I did by using knockout:
Please take a look at the knockout documention page: http://knockoutjs.com/documentation/introduction.html
HTML:
Define a simple table with header and content
<table style="width: 100%" border="1">
<thead>
<tr>
<td>
<p><b>Classes</b>
</p>
</td>http://jsfiddle.net/yBat5/#fork
<td>
<p><b>Childs</b>
</p>
</td>
</tr>
</thead>
<tbody data-bind="foreach: Classes">
<tr>
<td>
<p data-bind=" text: Class"></p>
</td>
<td>
<p data-bind=" text: Child"></p>
</td>
</tr>
</tbody>
</table>
JavaScript:
$(function () {
// define a ViewModel for your data
function ViewModel() {
this.Classes = ko.observableArray([{
"Class": "test",
"Child": "Max"
}, {
"Class": "test2",
"Child": "Walter"
}]);
}
var vm = new ViewModel(),
dummyData = [];
// create a lot of dummy data sets
for (var i = 0; i < 1000; i++) {
dummyData.push({
"Class": "test " + i,
"Child": "Child" + i
})
}
// constantly poll for new data
// JS fiddle implements a simple echo service, which we can use
// to simulate data changes we change a rendon number
function poll() {
$.ajax({
"url": "\/echo\/json\/",
"type": "POST",
"data": {
"json": JSON.stringify(dummyData),
"deley": 3
},
"success": function (data) {
vm.Classes(data);
// poll again (3 seconds so we see how fast the update is)
setTimeout(poll, 300);
// change a random entry to see that data changes
var randomnumber=Math.floor(Math.random()*1000);
dummyData[randomnumber].Child = "Child" +randomnumber +" changed"
}
});
}
poll();
// apply it to the page, knocout now does the binding for you
ko.applyBindings(vm);
});
Fiddle: http://jsfiddle.net/yBat5/3/