customize ID for multiple seat maps on the same page

[glmdev]

I am in the process of developing an event management platform, and I am implementing JSC for the seat maps for the venue creation page, however I have run into a snag. In doing so, I am allowing the user to add multiple, distinct levels and sections from the same page. This means that there could be any number of seat maps in their own DIVs.

The issue is, the default ID scheme leads to duplicate IDs across seat maps, and I can't figure out how to customize the getId callback to be specific to the ID of the parent object, after some fruitless experimentation with calling jQuery on 'this' from w/in getId. I can't manually code in a custom getId tag for each chart, because they are generated on demand.

Am I missing something simple here?

[glmdev]

I figured out a workaround. I just modify my jQuery selectors to contain the parent div ID like so:

$('#seat-map-0-1 #1_1')

but I would still like to know if there is a way to customize the seat ID to avoid this.

[mateuszmarkowski]

If I understand the problem correctly, you could solve it with a closure:

function generateGetId(parentId) {

    //requested parentId will be available in the returned function thanks to the closure mechanism
    return function (character, row, column) {
        return parentId + '_' + row + '_' + column;
    }
}

var maps = ['seat-map-0-1'];

for (var i in maps) {
    $('#'+maps[i]).seatCharts({
        //...
        naming: {
            getId: generateGetId(maps[i])
        }
        //...
    });
}

[glmdev]

Awesome, that's what I was looking for. Thanks!