Как вернуть результат обработки Modal в Modal

Я хочу отобразить экран поиска в модальном экране и отобразить результаты обработки поиска на этом модальном экране. Отображение результатов поиска завершено в модальном окне. Но когда я нажимаю кнопку обработки в модале, результат отображается не в модале, а на другом экране. Что мне делать?

Я использую Modal с Ajax в Django. В Ajax я новичок.

Я нашел это в результате своих исследований, но это не сработало.

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

Ajax

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
            }
        }
    }
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

$(function(){
    $('#edit_foo').on('click', function (event) {
        event.preventDefault();
        var form = $('form')[0];
        var formData = new FormData(form);
        var form = $(this);
        $.ajax({
            type: 'POST',
            url: form.prop("action"),
            data: {
                html: '<form id="form_foo"><input type="submit"></input></form>',
                delay: 1,
                },
        })
            //success: function (data, textStatus, jqXHR) {
        .done(function(data) {
            $('#foo_modal').find('.modal-body').html(data);
            $('#foo_modal').modal('show');
        })
    });
});

modal

<div class="modal fade" id="foo_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">検索</div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

обработка модального тела

{% load static %}
<!DOCTYPE html>
<html lang="ja">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{% block title %}{% endblock %}</title>    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        crossorigin="anonymous">  
    {% load bootstrap4 %}
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
    {{ filter.form.media }}

</head>

<body class="container">

{% load crispy_forms_tags %}


<div>
    <!--検索条件-->
    <form action="{% url 'storesearch'%}" method="get">
        {{ form2|crispy}}

        <button class="btn btn-primary mt-1" type="submit" id="modal_search">検 索</button>

    </form>
</div>

Как вы убедились, добиться этого с помощью AJAX довольно сложно. Если вы хотите отправить форму, которая находится внутри модала, и отобразить результат в том же модале, гораздо проще использовать HTMX вместо AJAX: https://htmx.org/

Второй пример кода на странице введения делает то, чего вы хотите достичь, всего в нескольких строках кода.

Вернуться на верх