Question

I’ve got div-boxes with addresses, each address has its own button, the button should open up a dialog in which you can edit the certain address.

The buttons ID’s are always edit_address_(number), and the number is an ID of the database. So the numbers aren’t like 1,2,3 but could be 12, 35, 122, the dialogboxes to show up have the ids dialog-form_(number).

So how can realise something first get all the ending numbers of the existing IDs and then make the loop for it

$( "#dialog-form_$i" ).dialog({
    autoOpen: false,
    height: 300,
    width: 390,
    modal: true
    });

$('#edit_address_$i').button().click(function() {
    $('#dialog-form_$i').dialog('open');
}); 

I know this code doesn’t work that way, but how to realise it?

Answer 1

Since ID’s are being dynamically generated, it’s sure a lot simpler to add a common class name to all the controls like “edit_address” then the selector is simply the class name. Adding another simple data-attribute for a unique identifier you need to use like a numeric ID then minimizes need to parse attributes

<button id="edit_address_$i" class="edit_address" data-id="$i">Text</button>

$('.edit_address').click(function(){
    $('#dialog-form_' + $(this).data('id') ).dialog('open');
})