Set id attribute after success of ajax call in Kineticjs

Question

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.

Answer 1

If you initialize the desired node's id to the empty string:

id:''

then this .find will never retrieve that desired node:

var r = rightLayer.find("#" + data);

Instead do something like this:

...

id:'replaceable1'

...

var r = rightLayer.find("#replaceable1")[0];
var rec = r.find("Rect")[0]; 

// change the id of both r and rec
r.setId(data);
rec.setId(data);

Note that .find always returns a collection (like a fancy array) so to get a reference to an element within that array you must do [n]. For example myLayer.find(something)[0].

Answer 2

According to KineticJS docs:

find(selector) --> return a Kinetic.Collection of nodes that match the selector

So if find returns a collection, in order for you to get the layer, I think something like:

var r = rightLayer.find("#" + data)[0];

should work, taking into account that id's in KineticJS shapes are unique.