Putting a click event for a dialogue box with Django Tables2

Question

I am trying to make a click event with Django Tables2 so that whenever someone clicks on a delete link in a row it will create a dialogue box for confirmation before deleting the row. Here is my code:

models.py

class Schedules(models.Model):
    course_name = models.CharField(max_length=128, choices=COURSE_NAME_CHOICES, default='a-plus')
    location = models.CharField(max_length=128, choices=LOCATION_CHOICES, default='south_plainfield')
    room = models.CharField(max_length=128, choices=ROOM_CHOICES, default='A')
    start_date = models.DateField(auto_now=False, auto_now_add=False, default=datetime.date.today)
    start_time = models.CharField(max_length=128, choices=START_TIME_CHOICES, default='eight-thirty am')
    end_time = models.CharField(max_length=128, choices=END_TIME_CHOICES, default='eight-thirty am')
    instructor = models.CharField(max_length=128, choices=INSTRUCTOR_CHOICES, default='adewale')
    total_hours = models.CharField(max_length=128, choices=TOTAL_HOURS_CHOICES, default='six')
    hours_per_class = models.CharField(max_length=128, choices=HOURS_PER_CLASS_CHOICES, default='four_and_half')
    frequency = models.CharField(max_length=128)
    status = models.CharField(max_length=128, choices=STATUS_CHOICES)
    interval = models.CharField(max_length=128, choices=INTERVAL_CHOICES, default='1 day')
    initiated_by = models.CharField(max_length=128, null=True)
    schedule_id = models.IntegerField(default=0)

tables.py

class ScheduleListTable(tables.Table):
    change = tables.TemplateColumn('<a href="/schedule/update_schedule/{{ record.id }}">Update</a> / Cancel / Event / '
                                   '<a href="/schedule/delete_schedule/{{ record.id }}" 
                                   onclick="return confirm("Are you sure you want to delete this?")">Delete</a>',
                                   verbose_name=u'Change', )
    class Meta:
        model = Schedules
        fields = ('id', 'course_name', 'start_date', 'start_time', 'hours_per_class', 'instructor', 'change',)
        attrs = {"class": "paleblue"}

views.py

def schedule_List(request):
    context_dict = {}
    schedule_list = Schedules.objects.order_by('start_date')
    table = ScheduleListTable(schedule_list)
    context_dict['table'] = table
    return render(request, "schedule/schedule_list.html", context_dict)

schedule_list.html

<div id="schedule_list_table">
    {% if table %}
        {% render_table table %}
    {% endif %}
</div>

For some reason, I can't make the onclick event that makes the confirmation dialogue box appear, and it just goes straight to deleting. I assume that it's written incorrectly in tables.py, but I don't know how to write it correctly in that case. Or do I need to do something else?

Answer 1

Have a look at the rendered html, for example using your browsers inspect context menu option. I think you could see there that there is a problem with the double quotes you use.

The onclick-attribute is enclosed by double quotes, but the message passed as argument to confirm() is also enclosed by double quotes. This results in your browser interpreting the attribute as `onclick="return confirm(" and ignores the gibberish it cannot understand which is your message.

You can fix that by using single quotes to enclose the message argument to confirm(), either by escaping them in the syntax you used (\'), or by using triple quotes like this:

template_code = '''
<a href="/schedule/update_schedule/{{ record.id }}">Update</a> / Cancel / Event /
<a href="/schedule/delete_schedule/{{ record.id }}" 
    onclick="return confirm('Are you sure you want to delete this?')">Delete</a>'''