Open dialog box on click on multiple buttons of similar name

Question

I have to jquery to show dialog box , but there is a problem, I have multiple buttons of similar name, example : btnEditUser-1, btnEditUser-2, btnEditUser-3

I have to call same function for every buttons to call AJAX function.

Please suggest how can I do it?

Please find the html/javascript code for reference:

cakephp code to print html

if($user['id']=="1" or ((strtotime(date("Y-m-d"))-strtotime($searchres[$i]['documents']['uploadtime']))<172800))
    {

    echo $this->Form->button('Edit User', array('type'=>'button','id'=>'edituser-'.$id,'name'=>'edituser-'.$id,'value'=>$id));
}

I have to write following function in jquery which recieve the value sent by button(mentioned above):

function showedituser(doc_id) {
        var data = {doc_id : doc_id};
        var divname = $('#dialog-edituser');
        $("#dialog-markup").dialog("open");
        var url = 'documents/getassigned_users';
        callajax(url, data, divname);
        return false;
   }

Answer 1

Add a common class to all those buttons. For example:

<input type="button" id="btnEditUser-1" class="btnEditUser" >
<input type="button" id="btnEditUser-2" class="btnEditUser" >
.......................
<input type="button" id="btnEditUser-n" class="btnEditUser" >

An then add a click handler to all those (with jQuery for example):

$('.btnEditUser').on('click', function(event){
    //If you're in a form you may want to prevent the default behaviour (sumbit the form)
    event.preventDefault();
    //Now most-probably you'd like to do something different for each button clicked:
    var buttonIdParts = $( this ).attr('id').split('-');
    //Now you're left with the number from the id
    var buttonId = buttonIdParts[1];
    switch(buttonId)
    {
    case 1:
       // execute code block 1
       //AJAX Call, whatever
        break;
    case 2:
      //  execute code block 2
        break;
    default:
    //code to be executed if n is different from case 1 and 2
    }
});

Rather than parsing the id you can also use a data attribute:

<input type="button" id="btnEditUser-1" class="btnEditUser" data-button-id="1">
<input type="button" id="btnEditUser-2" class="btnEditUser" data-button-id="2">
...............
<input type="button" id="btnEditUser-n" class="btnEditUser" data-button-id="n">

and get the correct id directly:

//This goes inside the events handler
var buttonId = $( this ).attr('data-button-id');

It is also important to notice that within the event handler callback function the context of this is the button that was just clicked and $( this ) is jQuery selecting this button (from the DOM) and creating a jQuery Object out of it.