Search Box results within Modal

Question

I am trying to build some search functionality within a modal. When a user clicks a button it will open a modal with a search box. I then want the results of the search to be shown within the same modal?

<div class="modal" id="select2modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title">Search for product to add</h6><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <h6>product Search</h6>
                <div class="card-body pb-2">
                    <form method=POST action="{% url 'searchproduct' %}">
                        {% csrf_token %}
                        <div class="input-group mb-2">
                                <input type="text" class="form-control border-right-0 pl-3" name="search" placeholder="Enter product Name" value="">
                                <span class="input-group-append">
                                <button class="btn ripple btn-primary" type="submit"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn ripple btn-primary" type="button">Add product</button>
                <button class="btn ripple btn-secondary" data-dismiss="modal" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

view

def search_product(request):
    searched = request.POST['searched']

    return render(request, 'index.html',{'searched':searched})

I don't think i should be doing return render(request, 'index.html',{'searched':searched}) think I should just be returning searched

The problem is this relies on the page being refreshed that closes the modal.

So what is the correct way - Do I need to use JavaScript or something.

UPDATE: I have added jquery now

        <script type="text/javascript">
            $(document).on('submit','#post-form', function(e){
                e.preventDefault();

                $.ajax({
                    type:'POST',
                    url: '/searchproduct',
                    data:{
                        searched:$('#search').val(),
                        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
                    },
                    success: function (){

                    }

                });
            });

        </script>

Which seems is doing a POST and returning 200 but the data returned data isn't being shown in the modal.

def search_product(request):
    searched = request.POST['searched']
    returned_products = Product.objects.filter(product_name__contains=searched)

    return {'searched':searched,'returned_products':returned_products}

and then within my modal i am using:

{% for t in returned_products %}
{{t.product_name}}
{% endfor %}

UPDATE 17/02

I think i have made some progress, but i still not getting the results back within the modal, but my search is returning a 200 rather than a error now.

In my AJAX:

<script type="text/javascript">
    $(document).on('submit','#post-form', function(e){
        e.preventDefault();

        $.ajax({
            type:'POST',
            url: '/searchproducts',
            data:{
                searched:$('#search').val(),
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            },
            success: function (data){
                $('jresponse').html(returned_products);
            }

        });
    });

I'm returning returned_products and within my modal I have

<div id="jresponse">
{{ returned_products }}
</div>
```
My view
```
def products(request):
    searched = request.POST['searched']
    returned_products = Product.objects.filter(product_name__contains=searched).values()

    return JsonResponse({"returned_products":list(returned_products)})
```




 

Answer 1

I think the best way to approach this is to use JavaScript and Ajax calls in your frontend/template and HTTP responses with JSON data in your view/backend. You would not do a form submit but instead POST HTTP calls via Ajax to your view (which most likely would be triggered by the button you already have in place). Your view would then respond with a HTTP response which has to be interpreted and incorporated again by JavaScript in your frontend. A good way to structure your response is using JSON format, which can be easily interpreted using JavaScript. Django Rest Framework can make this easier for bigger projects, but it might be good enough to build the JSON responses more or less manually at small projects.