Passing variables to jQuery UI dialog

Question

I'm new to jQuery and having difficulty in passing a variable to a jQuery UI Dialog box. When clicking "Yes" the browser should redirect to localAuthorityDelete and remove the appropriate record.

<script type="text/javascript">
   $(document).ready(function(){
       $('#deleteButton').click(function(){
           $('#deleteText').dialog({
            modal:true,
            resizable: false,
            buttons: {
                'Yes': function() {
                    window.location = "../php/localAuthorityDelete.php?laID="
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            },                                 
            });   
       });
   });
</script>

I have many delete buttons:

<input type="button" id="deleteButton" name="deleteButton" value="Delete">

Each delete button is in a table next to the record which should be removed. I was doing this with:

<a href="localAuthorityDelete.php?laID=<?php echo $row_laID['laID'];?>">Delete</a>

But need to take advantage of jQuerys Dialog box. If someone could help me I would be very greatful. I have tried wrapping the above JS in a function which takes one variable but it does not run.

Thanks for your help.

Mike

Answer 1

Looks like you have multiple deleteButtons, however id for a html element should be unique. So change the way you render the delete button to as follows:

<input type="button" 
       id="delete-<?php echo $row_laID['laID'];?>" 
       class="deleteButton" 
       name="deleteButton" 
      value="Delete"
/>

Now you can get the id of the element to be deleted from the id of the delete button. And the click handler should be now bound to .deleteButton instead of #deleteButton.

<script type="text/javascript">
     $(document).ready(function(){
         $('.deleteButton').click(function(){
            var id = this.id.replace(/[^0-9]/g, "");
            $('#deleteText').dialog({
                modal:true,
                resizable: false,
                buttons: {
                    'Yes': function() {
                        window.location = "../php/localAuthorityDelete.php?laID=" + id;
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            });   
         });
     });
</script>