0

So I have a filter form on a page that show paginated results. Currently when you apply the filter settings using a get request everything works but when you try to switch pages it resets. I have thought of passing a url from one page to another using a script like the one below. This copies the url but does not actually change the page, just copies the string. You can see in the urls below that the url does change page but the actual webpage stay on the first page regardless of the url. I am using Django and Django filters. Maybe a there is a better jQuery solution, Any suggestions?

script

document.querySelectorAll('.fqs')
    .forEach((el) => el.attributes.href.value += window.location.search);

Url

Without script:

/relations/?createdBy=&occursIn=&createdAfter=&createdBefore=&terminal_nodes=&project=1

With Script:

/relations/?page=2?createdBy=&occursIn=&createdAfter=&createdBefore=&terminal_nodes=&project=1

Next Page Link

<a class="fqs" href="?page={{ relations.next_page_number }}">Next &raquo;</a>

Url when pressing previous button

?page=1&page=2&createdBy=&occursIn=&createdAfter=&createdBefore=&terminal_nodes=&project=1
Taylor
  • 1,223
  • 1
  • 15
  • 30

2 Answers2

1

If I understand correctly you're adding pagination server-side ?page={{...}} and you adding already existing url parameters via js.

The resulting urls have two ? in it which may be why the link doesn't give you the correct page.

location.search includes the ? so to add that to your ?page=x you'd have to replace ? with &:

document.querySelectorAll('.fqs')
    .forEach((el) => el.attributes.href.value += window.location.search.replace("?", "&"));

EDIT: if this works it may stop working on next pages as location.search would then include page=x giving duplicate page query parameters.

To filter out page parameter from location.search you could do something like:

document.querySelectorAll('.fqs')
  .forEach((el) => {
    var params = window.location.search.replace("?", "&").split("&");
    params = params.filter((v) => v.indexOf("page") == -1).join("&");
    el.attributes.href.value += params;
  });

BTW, note that arrow functions don't work in legacy browsers like IE11.

yezzz
  • 2,990
  • 1
  • 10
  • 19
  • Ah that is whats happening, any ideas on how to get around that? Is it possible to maybe remove the &page=2 from the url? It would seem that the unwanted value would be the second query in the string. I also added the url when pressing the previous button – Taylor Sep 07 '17 at 23:18
  • It's possible using regex or split and some filtering. – yezzz Sep 08 '17 at 01:29
  • That not doing the trick as well. I have been trying to use this [post](https://stackoverflow.com/questions/2405355/how-to-pass-a-parameter-to-a-javascript-through-a-url-and-display-it-on-a-page) but haven't gotten it to work. I will try to combine your code and that to hopefully get something to work – Taylor Sep 08 '17 at 16:23
  • Maybe need to look at the links you produce on the server and what params the server needs to return proper results. Anyway, here's how the js works, for you to play around with: https://jsfiddle.net/j7jLs7n2/1/ – yezzz Sep 08 '17 at 18:23
  • The answer on the page you linked creates an object like `{"page":"1", "createdBy": "", "project": "1" }` , not a string like what we're doing – yezzz Sep 08 '17 at 18:37
0

In order to accomplish this I decide to not use any javascript at all and use python instead. I added 

gt = request.GET.copy()
if 'page' in gt:
    del gt['page']

    context = {
        'paginator': paginator,
        'relations': relations,
        'params': urlencode(gt),
        'filter': filtered,
        }

to my view. It copies the params, then deletes the param matching page and encodes in the context.

Taylor
  • 1,223
  • 1
  • 15
  • 30