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

Don't use GETs to change state in your web app. If that page is ever unprotected and gets spidered, you will have a lot of deleted records. — Paul Alan Taylor
– Paul Alan Taylor, Commented Jun 13, 2011 at 13:40

Chandu · Accepted Answer · 2011-06-13 13:38:30Z

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>

Collectives™ on Stack Overflow

Passing variables to jQuery UI dialog

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related