I'm using KineticJS in my MVC application.
In order to retrieve data from database, I'm making some ajax calls to web services in the API controller. There is an API that returns an id, which I want to assign to the current Kinetic.Group
id attribute on success.
After drag and drop, a popup PopUpAddRoom(FloorId)
appears and calls the AddRoom function.
my code:
function AddRoom(FloorId, RoomName, TypeID) {
$.ajax({
beforeSend: function (xhr) { // verify session },
url: "/api/someurl", //url for adding the room, that returns room's id
type: "Post",
dataType: 'json',
success: function (data) {
//data is the room id
var r = rightLayer.find("#" + data)[0];
console.log(r.getType()); // here I don't even get the type, I get "Object []"
var rec = r.find("Rect"); //rec is a rectangle inside the group
rec.setId(data);
rightLayer.draw();
}
});
}
The problem is that r = rightLayer.find("#" + data)[0];
is empty. It returns undefined.
When I call console.log(data);
to see if data's content is empty, it returns the correct id !
I initialized the id like this: id: ''
and want it to change as it gets the data from database. But this failed. Is there something wrong with this code?
EDIT :
After figuring out that id: ''
is really dumb idea (with the help of markE), I tried initializing id to an empty variable ident which gets its value from a web service (this ws increments the id when a new instance is added successfully).
But the problem doesn't come from r = rightLayer.find("#" + data)[0];
. It's the fact of assigning the id to a node (location of the instruction)
var ident;
var group = new Kinetic.Group({
...
id: ident
...
});
I added then this line: ident = data;
after success of the ajax call, still the same error. It seems like this instruction isn't doing nothing. The value of ident isn't changing after that I call PopUpAddRoom
function.