Блог

Главная - Вопросы по программированию - При нажатии кнопки обновить таблицу хотите отобразить форму в виде всплывающего окна в Django

При нажатии кнопки обновить таблицу хотите отобразить форму в виде всплывающего окна в Django

#python #django

Вопрос:

Я пытаюсь использовать модальное всплывающее окно в качестве формы редактирования, но я не знаю хорошего способа.

В настоящее время мой views.py вот так.

 #update dependency management
def update_jiradata(Request,id):
    if Request.method == 'POST':
        pi = jira_Story.objects.get(pk=id)
        fm = jira_StoryReg(Request.POST, instance=pi)
        if fm.is_valid():
            fm.save()
            fm = jira_StoryReg()
        return HttpResponseRedirect('/DependencyManagement')
    else:
        pi = jira_Story.objects.get(pk=id)
        fm = jira_StoryReg(instance=pi)
    jira = jira_Story.objects.all()
    return render(Request, 'hello/EditManagement.html', {'jiraform': fm, 'JIRA': jira})

Вот файлы шаблонов для представления:

 {% extends 'hello/Dependency_Management.html'%}
{% block editmanagement %}
<style>

</style>
<div id="myModal1" class="modal1">
    <div class="modal-content1">
        <span class="close1">amp;times;</span>
        <div class="row">
            <div class="col-sm-8 offset-2">
                <h4 class="alert alert-info">Update JIRA Stories</h4>
                <form action="" method="post">
                    {% csrf_token %}
                    {{jiraform.as_p}}
                    <input type="submit" value="Update" class="btn btn-success">
                    <!-- <a href="{% url 'addrow' %}" class="btn btn-info">Back to Dashboard</a> -->
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    // document.getElementById('parameter').style.display = 'none';

</script>
{% endblock editmanagement %}

Я хочу что-то подобное, как только нажму на кнопку «Просмотр».
введите описание изображения здесь

Ответ №1:

Я делаю это так, чтобы представление возвращало фрагмент html-формы, и с помощью Ajax, когда пользователь нажимает кнопку «Обновить», мы помещаем html в модальный формат и открываем модальный для пользователя.

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

1. Эй, @Mohamed, если вы не возражаете, можете привести мне пример. Так как я очень новичок в этой области. Будет более полезно, если вы дадите мне какой-нибудь фрагмент кода

Ответ №2:

Создайте один HTML-файл для своей формы:

 <form action="" method="post">
    {% csrf_token %}
    {{jiraform.as_p}}
    <input type="submit" value="Update" class="btn btn-success">
    <a href="{% url 'addrow' %}" class="btn btn-info">Back to Dashboard</a>
</form>

Основной HTML-файл должен иметь что-то вроде этого:

 <div id="myModal1" class="modal1">
    <div class="modal-content1">
        <span class="close1">amp;times;</span>
        <div class="row">
            <div class="col-sm-8 offset-2">
                <h4 class="alert alert-info">Update JIRA Stories</h4>
                <div id="form-jiraform"></div>
            </div>
        </div>
    </div>
</div>

В вашем файле js:

 $(document).on('submit', 'form', function (event) {
    const form = $(this).closest('form');

    event.preventDefault();
    const modal = $('#myModal1');
    $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success: function (data) {
                $("#form-jiraform").html(data);
                modal.modal('show');
            }
        }
    )
});

в вашем views.py файл:

 def show_form_with_ajax(request):
    if not request.is_ajax():
        return BadRequets

    fm = jira_StoryReg(instance=pi)
    return render(request, 'address_to_form_html.html',{'jiraform':fm})
Метки: