CODEWITHSUNDEEP
javascriptjqueryhtmldjango
Anoop
Anoop

Reputation: 1435

Generate delete confirmation box

In my application results are displaying as a table format.

Part of my code is,

{% for device in devices %}
  <tr>
    <td>{{ device.operator}}</td>
    <td>{{ device.state }}</td>
    <td>{{ device.tstampgps }}</td>
    <td><button id='rec_delete'>Delete</button></td>

  </tr>
{% endfor %}

Even if we press the delete button, I need to delete the particular record from the database. before that I want to prompt a confirmation box for that. Can anyone help me?

Upvotes: 0

Views: 742

Answers (4)

Jared Farrish
Jared Farrish

Reputation: 49188

Since I don't know Django, this doesn't include the delete part, which I assume you will AJAXify that (do an asynchronous request to delete). I'm also showing the $devices and $deletes variables as local variables here separately, more or less so you can see how you can store references and then work from those references (which I believe is a better practice than reselecting over and over).

Note also the use of:

jQuery(document).ready(function r($){

I'm using jQuery() in the global scope, which in a larger app you should always do to keep from conflicting with other libraries/frameworks which may use $(). This is also a best practice, and you can use $() within that anonymous function (closure). It's best to get used to doing it this way, IMO.

<table>
    <thead>
        <tr>
            <th>Operator</th>
            <th>State</th>
            <th>T-Stamp GPS</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr class="device">
            <td>Verizon</td>
            <td>OK</td>
            <td>033830928</td>
            <td>
                <button type="button" id="d001" class="delete">Delete</button>
            </td>
        </tr>
        ...
    </tbody>
</table>

NOTE

I made a slight but important change, with reference to the $self, since the AJAX will run the success handler after this is out of scope:

jQuery(document).ready(function r($){
    var $devices = $('tr.device'),
        $deletes = $devices.find('button.delete');

    $deletes.click(function d(){
        var $self = $(this).parents('tr.device'),
            del = confirm('Delete device?');

        if (del) {
            // Do $.ajax() request, maybe using the 
            // clicked button's ID. Or you could put
            // the row to delete ID on the TR element.
            // And then on success of the AJAX, run:
            $self.fadeOut(500, function f(){
                $self.remove();
            });
        }
    });
});​

http://jsfiddle.net/wMqr8/2

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

Add a unique record Identifier that you can associate to DB to the button. Once confirmed you send this identifier to server with AJAX and sever code does the DB delete. Also change ID to class on repeating elements since ID's must be unique

HTML

<tr>
    <td>{{ device.operator}}</td>
    <td>{{ device.state }}</td>
    <td>{{ device.tstampgps }}</td>
    <td><button class='rec_delete'  data-record_id="{{ device.DB_ID }}">Delete</button></td>

  </tr>

JS

$('button.rec_delete').click(function(){
     /* data() method reads the html5 data attribute from html */
     var record_id=$(this).data('record_id');

     if( confirm( 'Are you sure') ){
        $.post( 'serverPage.php', { id: record_id}, function(){
            /* code to run on ajax success*/
          $(this).closest('tr').remove();
        })
    }
})

Server will receive the post key id as you would with any other form element name

Upvotes: 1

Carlos Martinez T
Carlos Martinez T

Reputation: 6528

Try this: 

<button id='rec_delete' onclick="return confirm('Are you sure?')">Delete</button>

Upvotes: 0

user1115538
user1115538

Reputation:

You can add a click event to your JavaScript, and if the user chooses the "ok" button, you can send a request to the view that takes care of removing the record or whatever

Upvotes: 0

Related Questions