Как передать данные в bootstrap modal django

#javascript #html #django

#javascript #HTML #django

Вопрос:

  • У меня есть цикл в шаблоне django, который выполняет итерации по объектам.
  • С каждым объектом у меня есть кнопка редактирования, которая запускает модальный.
  • Я передаю id каждой кнопке редактирования, которая запускает модальность этого идентификатора объекта.

Модальный открывается, но проблема в том, что я не могу передать данные объекта в модальный.

шаблон

 {% if prof %}
<table class="table">
    <tbody>
        {% for edu in prof.education.all %}
            <tr class="divbutton" style="height: 90px;">
                <td>
                    <div class="row">
                        <div style="padding-left: 40px; font-size: 20px;">{{ edu.degree }}</div>
                        <div style="padding-left: 40px; font-size: 20px;">{{ edu.school }}</div>
                    </div>
                </td>
                <td></td>
                <td class="align-middle">
                    <div class="row">
                        <div id="button_under" style="margin-right: 20px;" class="login login-button">
{#                                                                    <button class="btn btn-info js-update-book" data-url="{% url 'users:book_update' pk=edu.id %}" style="cursor:pointer;"><i class="fa fa-edit"></i> Edit</button>#}
                            <button class="btn btn-info" type="button" data-toggle="modal" data-target="#{{ edu.id }}" data-backdrop="false" style="cursor:pointer;"><i class="fa fa-edit"></i> Edit</button>

                                <!-- --------------------------- Update Modal--------------------- -->

                         <form action="{% url 'users:book_update' pk=edu.id %}" style="padding-left: 15px; padding-right:15px;" method="POST">
                                {{ form.errors }}
                                {% csrf_token %}
                            <div class="row">
                                <div id="{{ edu.id }}" class="modal fade" role="dialog">
                                  <div class="modal-dialog">

                                    <div class="modal-content">
                                      <div class="modal-header">
                                          <h4 class="modal-title">Update Education</h4>
                                        <button type="button" class="close" data-dismiss="modal">amp;times;</button>
                                      </div>
                                      <div class="modal-body">
                                        <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <div class="field">
                                                    <label>Degree title<span class="red-txt">*</span></label>
                                                    <!-- <input class="form-control" type="text" name="degree" value="" maxlength="60" size="50"> -->
                                                    {{ form.degree }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <div class="field">
                                                    <label>School<span class="red-txt">*</span></label>
                                                    <!-- <input class="form-control" type="text" name="school" value="" maxlength="60" size="50"> -->
                                                    {{ form.school }}
                                                </div>
                                            </div>
                                        </div>
                                        <!-- works -->
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <div class="field">
                                                    <label>Start date</label>
                                                    <div id="datepicker1" class="datepicker input-group date" data-date-format="yyyy-mm-dd">
                                                        {{ form.edu_start_date }}
                                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- does not work -->
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <div class="field">
                                                    <label>End date</label>
                                                    <div id="datepicker2" class="datepicker input-group date" data-date-format="yyyy-mm-dd">
                                                        {{ form.edu_end_date }}
                                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <br>

                                            <div style="text-align:center;" class="login login-button">
                                                <input type="submit" class="btn btn-outline-primary btn-lg" style="cursor: pointer;" value="Save">
                                            </div>
                                        </div>
                                    </div>
                                      </div>
                                    </div>

                                  </div>
                                </div>
                            </div>
                        </form>
                        </div>
                    </div>
                </td>
            </tr>
        {% endfor %}
        {% endif %}
    </tbody>
</table>
  

Вид

 class ProfileSettingsView(UpdateView):
    model = Profile
    form_class = ProfileSettingsForm
    pk_url_kwarg = 'pk'
    context_object_name = 'object'
    template_name = 'profile_settings.html'

    def get_success_url(self):
          return reverse_lazy('users:profile_settings', args = (self.object.id,))

    def get_object(self):
        pk = self.kwargs.get('pk')
        return get_object_or_404(Profile, id=pk)

    def get_context_data(self, **kwargs):
        context = super(ProfileSettingsView, self).get_context_data(**kwargs)
        context['prof'] = self.get_object()
        return context
  

форма

 class EducationForm(forms.ModelForm):

    degree = forms.CharField(max_length=40, required=False)
    school = forms.CharField(max_length=40, required=False)
    edu_start_date = forms.DateField(required=False,
                                     input_formats=settings.DATE_INPUT_FORMATS,
                                     widget=forms.DateInput(attrs={'readonly': 'readonly'}))
    edu_end_date = forms.DateField(required=False,
                                   input_formats=settings.DATE_INPUT_FORMATS,
                                   widget=forms.DateInput(attrs={'readonly': 'readonly'}))

    def __init__(self, request, *args, **kwargs):
        super(EducationForm, self).__init__(*args, **kwargs)
        self.request = request

    def save(self, commit=True):
        edu = super(EducationForm, self).save(commit=False)
        edu.save()
        profile = Profile.objects.get(id=self.request.user.profile.id)
        profile.education.add(edu)
        return edu


    class Meta:
        model = Education
        fields = ['degree','school','edu_start_date','edu_end_date']
  

Обновить

 class EducationView(CreateView):
    model = Education
    form_class = EducationForm
    pk_url_kwarg = 'pk'
    template_name = "profile_settings.html"

    def get_success_url(self):
          return reverse_lazy('users:profile_settings', args = (self.request.user.profile.id,))

    def get_form_kwargs(self):
        kwargs = super(EducationView, self).get_form_kwargs()
        kwargs['request'] = self.request
        return kwargs
  

Ответ №1:

Ваше представление использует ProfileSettingsForm , а ваше EducationForm нигде не используется. Если я правильно понимаю модели, у вас есть одна, Profile которая может быть связана с несколькими Education экземплярами.

Итак, вам нужно иметь несколько EducationForm объектов в вашем представлении, по одному для каждого объекта для обновления (плюс, вероятно, дополнительный пустой объект для создания нового Education ).

Для этого вам следует использовать Django Formset s или, более конкретно, inlineformset_factory как показано здесь

Комментарии:

1. Пожалуйста, проверьте обновленный queston. EducationForm используется в Education CreateView и работает нормально, проблема в updateview, существующие значения не отображаются в форме.

2. Да, но, как я уже сказал, в вашем ProfileSettingsView нет EducationForm . form Переменной в вашем шаблоне является ProfileSettingsForm . Вы хотите добавить несколько форм, по одной для каждого экземпляра Education в вашем profile .