How do I start initializing JavaScript Ajax?
I am collecting information using ajax. I want my document.ready (ajax) function to start over, because the initial knockout file started and my "var initialData" value was zero. How is my first Ajax run?
My script:
<script type="text/javascript">
var initialData;
function functionViewModel() {
$(document).ready(function () {
$.ajax({
type: "POST",
url: "KnockoutGrid2.aspx/GonderUrunler",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
console.log(msg.d);
initialData = msg.d;
}
});
});
var fn = {
friends: ko.observableArray(initialData)
};
fn.removeUser = function (item) {
fn.friends.remove(item);
};
return fn;
};
ko.applyBindings(functionViewModel());
</script>
source to share
Update 2
@ user3297291's answer is better than mine because it is Knockout that handles all the state of this form. Please do not execute applybindings
ajax request in the response .
The user needs to be aware that the data has not yet been loaded and this can be handled with a knockout.
Original Answer
Perhaps if you move the knockout initialization inside the function success
:
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "KnockoutGrid2.aspx/GonderUrunler",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
console.log(msg.d);
initialData = msg.d;
// All initialization inside the 'success' function
function functionViewModel(initialData) {
var fn = {
friends: ko.observableArray(initialData)
};
fn.removeUser = function (item) {
fn.friends.remove(item);
};
return fn;
};
ko.applyBindings(functionViewModel(initialData));
}
});
});
</script>
You can show a div with the message "loading data ...".
And when it success
starts, hide that div.
Update 1
After your comment, I don't know why you need it return fn
. I suggest this solution:
<script type="text/javascript">
// Updating 'functionViewModel()' to add 'self'.
// Move functionViewModel()' outside ajax response
function functionViewModel(initialData) {
var self = this;
self.friends = ko.observableArray(initialData);
self.removeUser = function (item) {
self.friends.remove(item);
};
};
$(document).ready(function () {
$.ajax({
type: "POST",
url: "KnockoutGrid2.aspx/GonderUrunler",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
console.log(msg.d);
initialData = msg.d;
// All initialization inside the 'success' function
ko.applyBindings(functionViewModel(initialData));
}
});
});
</script>
Here I am using self
(see Controlling this ) and do not return fn
because Knockout is handling its state.
source to share
You don't want to wait with applyBindings
while your Ajax response is processed ... Your document will look ugly if you let Knockout wait with the bindings applied and your users won't have anything to look at.
What should you do:
- Apply bindings as soon as
$(document).ready
triggers - Make sure your viewmodels use properties
observable
that allow you to easily enter data later - Make sure you define some kind of loading state to show your users that the data is loading.
i.e:.
function functionViewModel() {
var friends = ko.observableArray([]);
var loading = ko.observable(true);
var removeUser = function(user) {
friends.remove(user);
}
// Get the data and write it to an observable property once done
$.ajax({
type: "POST",
url: "KnockoutGrid2.aspx/GonderUrunler",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
friends(JSON.parse(msg.d));
loading(false);
}
});
return {
friends: friends,
loading: loading,
removeUser: removeUser
};
};
$(document).ready(function() {
ko.applyBindings(functionViewModel());
});
source to share