javascript - pass value to bootstrap modal form with django - Stack Overflow

admin管理员组

文章数量:1332974

When I use bootstrap modal for my form its only show first value.

here my template.html

{% for pany in panys %}
<tr>
    <td>{{ pany.name }}</td>
    <td>{{ pany.desc }}</td>
    <td align="center">
        <button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default2">
            delete
        </button>

        <div class="modal fade" id="modal-default2">
            <div class="modal-dialog">

                <form method="post" action="{% url 'system:pany_delete' pk=pany.pk %}">
                {% csrf_token %}

                <div class="modal-content">    
                    <div class="modal-body">
                        <input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ pany.pk }}">
                        <input type="submit" class="btn btn-primary" value="Delete">
                    </div>
                </div>

                </form>
            </div>
        </div>
    </td>
</tr>

{% endfor %}

its loop all the data, when click delete confirm form will popup. but its return same value.

but if without modal-bootstrap its work fine.

example: template.html

{% for pany in panys %}
<tr>
    <td>{{ pany.name }}</td>
    <td>{{ pany.desc }}</td>
    <td align="center">
        <form method="post" action="{% url 'system:pany_delete' pk=pany.pk %}">
            {% csrf_token %}
            <input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ pany.pk }}">
            <input type="submit" class="btn btn-primary" value="Delete">
        </form>
    </td>
</tr>

{% endfor %}

it's work fine.

what I should do to make it work?...

update

views.py

# Company Crud
class CompanyListView(ListView):
    context_object_name = 'panys'
    model = models.Company

class CompanyCreateView(CreateView):
    fields = ('name', 'desc')
    model = models.Company

class CompanyUpdateView(UpdateView):
    fields = ('name', 'desc')
    model = models.Company

class CompanyDeleteView(DeleteView):
    model = models.Company
    success_url = reverse_lazy("system:pany_list")

When I use bootstrap modal for my form its only show first value.

here my template.html

{% for pany in panys %}
<tr>
    <td>{{ pany.name }}</td>
    <td>{{ pany.desc }}</td>
    <td align="center">
        <button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default2">
            delete
        </button>

        <div class="modal fade" id="modal-default2">
            <div class="modal-dialog">

                <form method="post" action="{% url 'system:pany_delete' pk=pany.pk %}">
                {% csrf_token %}

                <div class="modal-content">    
                    <div class="modal-body">
                        <input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ pany.pk }}">
                        <input type="submit" class="btn btn-primary" value="Delete">
                    </div>
                </div>

                </form>
            </div>
        </div>
    </td>
</tr>

{% endfor %}

its loop all the data, when click delete confirm form will popup. but its return same value.

but if without modal-bootstrap its work fine.

example: template.html

{% for pany in panys %}
<tr>
    <td>{{ pany.name }}</td>
    <td>{{ pany.desc }}</td>
    <td align="center">
        <form method="post" action="{% url 'system:pany_delete' pk=pany.pk %}">
            {% csrf_token %}
            <input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ pany.pk }}">
            <input type="submit" class="btn btn-primary" value="Delete">
        </form>
    </td>
</tr>

{% endfor %}

it's work fine.

what I should do to make it work?...

update

views.py

# Company Crud
class CompanyListView(ListView):
    context_object_name = 'panys'
    model = models.Company

class CompanyCreateView(CreateView):
    fields = ('name', 'desc')
    model = models.Company

class CompanyUpdateView(UpdateView):
    fields = ('name', 'desc')
    model = models.Company

class CompanyDeleteView(DeleteView):
    model = models.Company
    success_url = reverse_lazy("system:pany_list")

• javascript
• django
• django-forms
• django-templates
• bootstrap-modal

Share Improve this question Follow edited May 6, 2018 at 5:39 Dicky Raambo asked May 6, 2018 at 4:08 Dicky RaamboDicky Raambo 52322 gold badges1414 silver badges3131 bronze badges 7

• As you iterate over the loop, you're creating a modal for each pany, but they all have the same id. When you call your modals, only one of them gets called (not sure how bs modal works, but probably it's the first one). So you should restructure your template to put the modal parent div outside of your loop. – kaveh Commented May 6, 2018 at 4:15
• Does your pany.nameand pany.desc render perfectly? – Dhaval Savalia Commented May 6, 2018 at 4:18
• Gotcha, I didn't think that far. Do i need loop modal or can use one?... Put the modal outside loop?.. but how to pass the id?... – Dicky Raambo Commented May 6, 2018 at 4:20
• @Dhaval Savalia yes off course. – Dicky Raambo Commented May 6, 2018 at 4:21
• 1 its bad idea if loop the modals, if have 1000 more data it will lot of html code. – Dicky Raambo Commented May 6, 2018 at 4:31

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 5

Your ajax modal will always return the same value inside modal because:
- Modal has this data-target="#modal-default2" as the target, however, your loop contains the modal body, with the id id="modal-default2", which will render modal as much as your loop goes.

So what you can do is to define a unique ID for each modal with the ID of each pany modal-default{{pany.id}}:

{% for pany in panys %}
    ''' rest of codes '''
    <button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default{{pany.id}}">
        delete
    </button>
    ''' rest of codes '''

    <div class="modal fade" id="modal-default{{pany.id}}">
        <div class="modal-dialog">
        </div>
    </div>
    ''' rest of codes '''
{% endfor %}

But this method is not effective if you have a lot of data, it will render lots of html codes.

Another option

With AJAX and one modal.

Your html would be:

{% for pany in panys %}
    <td>{{ pany.name }}</td>
    <td>{{ pany.desc }}</td>

    <button data-id="{{pany.id}}" type="button" class="btn btn-warning margin-bottom delete-pany" >
        delete
    </button> <!-- be aware of class 'delete-pany' -->
{% endfor %}
{% csrf_token %}


<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        {% if pany %} <!-- this pany instance will e from AJAX -->
            <form method="post" action="{% url 'system:pany_delete' pk=pany.pk %}">
            {% csrf_token %}

            <div class="modal-content">    
                <div class="modal-body">
                    <input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ pany.pk }}">
                    <input type="submit" class="btn btn-primary" value="Delete">
                </div>
            </div>
            </form>
        {% endif %}
    </div>
</div>

AJAX

$(document).on('click','.delete-pany',function(){
    var id = $(this).data('id');

    $.ajax({
        url:'',
        type:'POST',
        data:{
            'id':id,
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
        },
        success:function(data){
            $('#modal-default .modal-dialog').html($('#modal-default .modal-dialog',data));
            $('#modal-default').modal('show');
        },
        error:function(){
            console.log('error')
        },
    });
});

And your views would be:

change your url from CompanyListView.as_view() to panyListView

def panyListView(request):
    context = {}
    panys = models.Company.objects.all()
    if request.method == 'POST' and request.is_ajax():
        ID = request.POST.get('id')
        pany = panys.get(id=ID) # So we send the pany instance
        context['pany'] = pany
    context['panys'] = panys
    return render(request,'template.html',context)

本文标签： javascriptpass value to bootstrap modal form with djangoStack Overflow