CODEWITHSUNDEEP
javascriptjquerypythonajaxdjango
ivan_ochc
ivan_ochc

Reputation: 412

Handling modal windows in Django

I use the following approach for handling modal window: check article here https://dmorgan.info/posts/django-views-bootstrap-modals/

But I don't understand how to implement some trivial functionality using such approach

Inside my html I have such thing:

{% for order in queryset%}
            <tr>
                ** some order data here **
                <td></td>

                    <div class="text-center">
                        <input type="hidden"/>
                        <a
                           id="make-offer-button"
                           role="button"
                           title="Make offer"
                           class="btn btn-inverse" data-toggle="modal">
                            <i class="icon-plus"></i>
                        </a>
                    </div>
                </td>
            </tr>
{% endfor %}

When I click to make-offer-button modal window must appear with particular object. But modal window loads only for the first record in the table, it doesn't work for the second, third, etc., records. Also I have a great doubt, that modal window has any relation to particular object.

How can I relate particular object with modal window?

JS:

var formAjaxSubmit = function(form, modal) {
                $(form).submit(function (e) {
                    e.preventDefault();
                    $.ajax({
                        type: $(this).attr('method'),
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function (xhr, ajaxOptions, thrownError) {
                            if ( $(xhr).find('.has-error').length > 0 ) {
                                $(modal).find('.modal-body').html(xhr);
                                formAjaxSubmit(form, modal);
                            } else {
                                $(modal).modal('toggle');
                                window.location.replace('http://127.0.0.1:8000/my_orders/');
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                        }
                    });
                });
            }
            $('#create-order-button').click(function() {
                $('#form-modal-body').load('add_order_form/', function () {
                    $('#form-modal').modal('toggle');
                    formAjaxSubmit('#form-modal-body form', '#form-modal');
                });
            });

             $('#make-offer-button').click(function() {
                $('#form-modal-body').load('make_offer_form/', function () {
                    $('#form-modal').modal('toggle');
                    formAjaxSubmit('#form-modal-body form', '#form-modal');
                });
            });

views.py

class AjaxTemplateMixin(object):

    def dispatch(self, request, *args, **kwargs):
        if not hasattr(self, 'ajax_template_name'):
            split = self.template_name.split('.html')
            split[-1] = '_inner'
            split.append('.html')
            self.ajax_template_name = ''.join(split)
        if request.is_ajax():
            self.template_name = self.ajax_template_name
        return super(AjaxTemplateMixin, self).dispatch(request, *args, **kwargs)

class MakeOfferView(SuccessMessageMixin, AjaxTemplateMixin, FormView, CreateView): 
    model = ExchangeTransaction
    template_name = 'make_offer_form.html'
    form_class = ExchangeTransactionForm
    success_url = reverse_lazy('all_orders')
    success_message = "Way to go!"

    def form_valid(self, form):
        transaction = form.save(commit=False)
        transaction.user = self.request.user
        transaction.order = form.order
        transaction.save()
        return redirect('currency_exchange.views.all_orders')

Upvotes: 0

Views: 1161

Answers (3)

Bhrigu Srivastava
Bhrigu Srivastava

Reputation: 303

In the for loop, you are creating the <a> fields with same id (same id's are not allowed). Use class instead, and add action listener to the class.

For your next query, suppose you have a modal code written, and you want it to have different attributes for different objects/items in your html. Handle it using javascript. For a click event on your current object, get the properties of your clicked object, and set it to corresponding attributes in your modal.

Upvotes: 1

Mike Covington
Mike Covington

Reputation: 2157

When I make modals in a loop, I append the object's id (or something unique to the object) to the button's data-toggle and the modal's id.

For example, your button's data-toggle:

{% for order in queryset%}
    ...
    <a class="btn btn-inverse" data-toggle="modal-{{ order.id }}">
    ...
{% endfor %}

Then be sure to do the same for your modal:

<div class="modal" id="modal-{{ order.id }}">
    ...
</div>

Upvotes: 0

Daniel Roseman
Daniel Roseman

Reputation: 599560

HTML id attributes must be unique; you have used the same value for each button. Use a class instead.

Upvotes: 1

Related Questions