Onclick of update table button want to show form as a popup in Django

user_15853459 0
Viewed 695

I'm trying to use modal popup as a edit form but I don't know good way.

Currently my views.py is like this.

#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})

Here's the template files for the view:

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

</style>
<div id="myModal1" class="modal1">
    <div class="modal-content1">
        <span class="close1">&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 %}

I want some this like that onclick on my view button enter image description here

django python
2 Answers

The way I do this that I let the view returns the snippet of the form html and using Ajax when the user clicks update button, we put the html in a modal and open the modal for the user.

user_8714100

Create one HTML file for your form:

<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>

The Main HTML file should have something like this:

<div id="myModal1" class="modal1">
    <div class="modal-content1">
        <span class="close1">&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>

In your js file:

$(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');
            }
        }
    )
});

in your views.py file:

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})
user_144493370
Related