Django/JqueryUI dialog box - How can I integreate Django with JqueryUI dialog box?

Question

I want to add a feature on my Django project using jQueryUI dialog box where when you click on a link (like a "delete" link) a jQueryUI dialog box will pop up asking you if you really want to delete that item. Then if you click on the delete button (found the jQuery dialog box) a Django function will do the delete job.

So how do I make the delete button (found the jQuery dialog box) send a post message (with respective variables) to a Django function found in my views.py that will do the delete job?

Real examples would be truly appreciated!

Ismail Badawi · Accepted Answer · 2011-06-12 18:55:08Z

9

Say you have something like this in your template:

<div id="dialog" title="Confirm delete">Are you sure?</div>
{% for object in object_list %}
# display whatever you like here
<a id="{{ object.id }}" class="delete" href="#">Delete</a>
{% endfor %}

Then something like this (in your $(document).ready) would work -- notice how we set the callback function that the dialog calls when the delete button is pressed (using the dialog's option method) in the click handler:

$("#dialog").dialog({
    modal: true,
    autoOpen: false
});
$("a.delete").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('id');
    $("#dialog").dialog('option', 'buttons', {
        "Delete": function() {
            $.post({
                url: {% url myapp.views.delete %},
                data: {'id': id},
                success: function() {
                   # whatever you like, some fancy effect that removes the object
                }
            });
            $(this).dialog("close");
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    });
    $("#dialog").dialog("open");
    return false;
});

edited Jun 12, 2011 at 18:55

answered Jun 12, 2011 at 18:47

Ismail Badawi

37.4k8 gold badges90 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

avatar Over a year ago

Thank you for the quick response. Any ideas how to add an ID to the dialog "delete" button? I have multiple forms on the same page and the way I make the distinction from what form the post request came from is by identifying the button id like this: if 'my_button_id' in request.POST: ...then do something...

Gourneau · Accepted Answer · 2011-06-28 16:37:21Z

2

You should also consider Aprise. It is lovely, uses jQuery, is easy to use, and is very small (3k).

apprise('Hello now?', {'verify':true});

aprise dialog

edited Jun 28, 2011 at 16:37

answered Jun 26, 2011 at 3:05

Gourneau

12.9k8 gold badges44 silver badges42 bronze badges

Collectives™ on Stack Overflow

Django/JqueryUI dialog box - How can I integreate Django with JqueryUI dialog box?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related