access a Url with a query inside a modal

Question

I want to open the content of a page inside a modal, but this page is accessed by a query string like:

http://127.0.0.1:8003/dados/add_dados?filter=crew

So, my modal needs to access the page, but I can't include a url, just a html page:

<button id="myBtn">+ Add</button>
<div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
     {% block survey_index %}

      {% include 'add_data?filter=crew' %} #It doesn't work

     {% end block %}
    </div>
</div>

This way doesn't work since the include expects me to pass a html page like:

{% block sample_unit_type_index %}

    {% include 'inv/index/example.html' %}

{% endblock %}

How to access the page that is in add_data?filter=crew

url code:

path('add_data', add_data, name="add_data"),

views.py return

return render(request, 'inv/add_new.html', context)

So the page add_new.html has the content accessed by the queries. Example:

<a href="add_dados?filter={{path_info}}" class="btn3 add" role="button">Add</a>

Any suggests to access the add_data?filter=crew page content in modal?

Answer 1

If you just want to include the HTML template add_new.html then you can use:

{% block survey_index %}
      {% include 'inv/add_new.html' %}
{% end block %}

If you want to get the HTML from the URL then you can use an AJAX call as described in this answer:

HTML:

<button id="myBtn">+ Add</button>
<div id="myModal" class="modal">
    <div id="modal-content"></div>
</div>

<script>
document.getElementById('myBtn').onclick = function(){
    $.ajax({
       url:"{% url 'add_data' %}?filter=crew">,
       type:'GET',
       success: function(data){
           $('#modal-content').html(data);
       }
    });
}
</script>