モーダルでの処理結果をモーダルに返す Ajax,Modal

前提・実現したいこと

モーダル画面内で検索画面を表示して検索処理結果をモーダル画面に表示して
その検索結果の中からデータを選択して元の画面に結果を返すことをやりたいです。

私はAjaxを使用し始めたばかりで完全には理解しきれていないレベルです。
よろしくお願いします。

発生している問題・エラーメッセージ

モーダル内に処理ボタンを配置して処理を実行させるとモーダル画面ではなく新規画面で
処理結果が表示されてしまいます。

私なりに調べてみて、<head>内で<base target="_self">を追記すると可能との記載を見つけたのですが
上手くいきませんでした。

<head>
<base target="_self">
</head>

私のソースは以下になります。
Ajax記述部

html
1function getCookie(name) {
2    var cookieValue = null;
3    if (document.cookie && document.cookie !== '') {
4        var cookies = document.cookie.split(';');
5        for (var i = 0; i < cookies.length; i++) {
6            var cookie = jQuery.trim(cookies[i]);
7            // Does this cookie string begin with the name we want?
8            if (cookie.substring(0, name.length + 1) === (name + '=')) {
9            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
10            break;
11            }
12        }
13    }
14return cookieValue;
15}
16var csrftoken = getCookie('csrftoken');
17function csrfSafeMethod(method) {
18    // these HTTP methods do not require CSRF protection
19    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
20}
21
22$.ajaxSetup({
23    beforeSend: function (xhr, settings) {
24        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
25            xhr.setRequestHeader("X-CSRFToken", csrftoken);
26        }
27    }
28});
29
30$(function(){
31    $('#edit_foo').on('click', function (event) {
32        event.preventDefault();
33        var form = $('form')[0];
34        var formData = new FormData(form);
35        var form = $(this);
36        $.ajax({
37            type: 'POST',
38            url: form.prop("action"),
39            data: {
40                html: '<form id="form_foo"><input type="submit"></input></form>',
41                delay: 1,
42                },
43        })
44            //success: function (data, textStatus, jqXHR) {
45        .done(function(data) {
46            $('#foo_modal').find('.modal-body').html(data);
47            $('#foo_modal').modal('show');
48        })
49    });
50});

モーダル記述部①

HTML
1<div class="modal fade" id="foo_modal" tabindex="-1" role="dialog">
2    <div class="modal-dialog">
3        <div class="modal-content">
4            <div class="modal-header">検索</div>
5            <div class="modal-body"></div>
6            <div class="modal-footer"></div>
7        </div>
8    </div>
9</div>

モーダル記述部②
（別HTMLになります。store_filter.html）

HTML
1{% load static %}
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6    <!-- Required meta tags always come first -->
7    <meta charset="utf-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9    <meta http-equiv="x-ua-compatible" content="ie=edge">
10    <title>{% block title %}{% endblock %}</title>    
11    <!-- Bootstrap CSS -->
12    <link rel="stylesheet"
13    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
14        crossorigin="anonymous">  
15    {% load bootstrap4 %}
16    {% bootstrap_css %}
17    {% bootstrap_javascript jquery='full' %}
18    {{ filter.form.media }}
19    
20</head>
21
22<body class="container">
23
24{% load crispy_forms_tags %}
25
26
27<div>
28    <!--検索条件-->
29    <form action="{% url 'storesearch'%}" method="get">
30        {{ form2|crispy}}
31       
32        <button class="btn btn-primary mt-1" type="submit" id="modal_search">検 索</button>
33
34    </form>
35</div>

処理部

view
1class Search(FilterView):
2    model = Store
3    filterset_class = StoreFilter
4    #template_name = 'filter.html'  ←元の画面のURL    
5  
6    queryset = Store.objects.all()     # templateのnameに紐づけ    
7 
8    strict = False
9  
10    paginate_by = 10
11
12    def get(self, request, **kwargs):        
13        if request.GET:
14            print("実行")
15            request.session['query'] = request.GET
16            print("query",request.session['query'])
17        else:
18            request.GET = request.GET.copy()
19            if 'query' in request.session.keys():
20                for key in request.session['query'].keys():
21                    request.GET[key] = request.session['query'][key]
22
23        return super().get(request, **kwargs)

モーダルを表示させる画面で使用しているclassは別のclassになります。
モーダル内で違うクラス、class Searchを使用するために元のクラスで強引ですが以下の処理をしています。
（より良い方法があれば教えて下さい）

view
1class IndexView(LoginRequiredMixin,FilterView):
2    model = Order
3    filterset_class = OrderFilter
4    template_name = 'Order_filter.html'
5 
6    queryset = NetBMS_Order.objects.all()
7
8    strict = False
9
10    paginate_by = 10
11 
12    def get(self, request, **kwargs):        
13        if request.GET:
14            request.session['query'] = request.GET
15            print("query",request.session['query'])
16        else:
17            request.GET = request.GET.copy()
18            if 'query' in request.session.keys():
19                for key in request.session['query'].keys():
20                    request.GET[key] = request.session['query'][key]
21
22        return super().get(request, **kwargs)
23    
24    def post(self, request, *args, **kwargs):
25        context = {
26            'form2' :  StoreForm(),
27        }
28 
29        return render(request,'main/store_filter.html',context)
30    
31    # GETオーバーライド    
32    def get_context_data(self, **kwargs):
33        context = super().get_context_data(**kwargs)
34        context['form2'] = StoreForm()
35        
36        return context