Django remove certain parameter from GET - django

Question

I am doing filter using GET method and I would like to be able to remove only specific filters, how do I do that?
Now I have a form with token fields so I get id's of countries and towns:
<form id="search" method="GET" action="{% url 'selection'%}">
<div class="bg-grey text-center">
<input type="text" class="form-control" id="tokenfield1" name="country">
</div>
{% if filteredcountries %}
<table class="table table-list">
{% for c in filteredcountries %}
<tr>
<td><button type="button" class="btn btn-xs btn-danger" data-remove="{{c.id}}"><i class="fas fa-times"></i></button></td>
<td>{{c.country_name`}}</td>
</tr>
{% endfor %}
</table>
{% endif %}
<div class="bg-grey text-center">
<input type="text" class="form-control" id="tokenfield2" name="town">
</div>
{% if filteredtowns %}
<table class="table table-list">
{% for t in filteredtowns %}
<tr>
<td><button type="button" class="btn btn-xs btn-danger" data-remove="{{t.id}}"><i class="fas fa-times"></i></button></td>
<td>{{t.town_name}}</td>
</tr>
{% endfor %}
</table>
{% endif %}
</form>
views.py:
def hotel_view(request):
countries = request.GET.get('country')
if not countries:
countries = []
else:
countries = countries.split(', ')
towns = request.GET.get('town')
if not towns:
towns = []
else:
towns = towns.split(', ')
results = Hotel.objects.filter(Q(town_id__in = towns) | Q(country_id__in = countries))
context = {
'filteredcountries': countries,
'filteredtowns': towns,
'hotels': results
}
return render(request, 'myapp/hotels.html', context)
Now I want to click the button and remove the specific town or country from the GET and remain the others. Can you lead me to the solution?
example URL before button click:
..myapp/hotels?country=**2**%2C+**4**&town=2
url after button click with country id 2:
..myapp/hotels?country=**4**&town=**2**
or after button click with town id 2:
..myapp/hotels?country=**2**%2C+**4**&town=

Answer 1

This is a solution around using javascript and JQuery. The basic approach is as follows:
Store the current window.location.href in a variable on loading of page. Why?
Otherwise each manipulation of it would result in sending a new GET
request which is probably undesirable
Manipulate the string stored
in the mentioned variable depending on the button clicked.
Preventing the submit button from firing directly but using the
manipulated string
Here the script part with some comments:
<script>
var current_get = window.location.href // Store current url
var handleget = function(part_chooser, id){
// part_chooser = country or town, id = pk to remove
var parts = current_get.split('?');
if (parts.length < 2){ // No get params to manipulate
return;
}
var get_part = parts[1];
var get_parts =get_part.split('&');
var i; // To keep order of new href if important
var str_to_handle; // Part to manipulate
for (i = 0; i < get_parts.length; i++){
if (get_parts[i].startsWith(part_chooser)){
str_to_handle = get_parts[i];
break;
}
};
// Do manipulation and store new url
var get_arr = str_to_handle.split('=');
if (get_arr.length > 0){
params = get_arr[1].split('%2C+');
var index = params.indexOf(id.toString());
if (index >= 0){
params.splice(index, 1);
params = params.join('%2C+');
get_parts[i] = part_chooser + '=' + params;
current_get = parts[0]+'?'+get_parts.join('&');
console.log(current_get);
}
};
};
$('button[type=submit]').click(function(event){
event.preventDefault();
window.location.href = current_get;
})
$('.country-btn').click(function(){
var id = $(this).data('remove');
handleget('country', id);
});
</script>
Some remarks
I intentionally did not use long chains of JS to shorten the code as IMHO it is easier to read step by step
The string manipulation can probably be shortend by clever use of regular expressions.

Answer 2

If your tokenfields contain all the possible ids as a comma seperated list on loading a javascript for deleting the specific id from the tokenfield could look like this:
<script>
$('.country-btn').click(function(){
var id = $(this).data('remove');
var countries = $('#tokenfield1').val().split(',');
var index = countries.indexOf(id.toString());
if (index >= 0){
countries.splice(index, 1)
}
$('#tokenfield1').val(countries.join());
})
</script>
In order to fill your tokenfield with the ids returned in the context you could do something like
<input type="text" class="form-control" id="tokenfield1" name="country"
value="{% for c in filteredcountries %}{{c.id}}{% if not forloop.last %},{% endif %}{% endfor %}">