Hi,
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">×</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 {'searched':searched})
The problem is this relies on the page being refreshed that closes the modal, so i have tired to use jquery
<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 %}
This probably isn’t the right place to ask this, as i think its more jQuery issue, but any ideas where im going wrong?
Thanks