Wednesday, June 20, 2018

Use query result from semantic UI inside Django URL Template tag

By Hường Hana 9:30 PM , , Leave a Comment

I'm using Django and semantic UI to create a search box. Everything works fine except for the URL parameters.

$('.ui.search').search({          type          : 'standard',         minCharacters : 2,                       apiSettings   : {             onResponse: function(parcelleResponse) {                                         //DO Something                 return response;             },             url: "/myUrl/{query}"         }            });

I would like to use the URL template tag system to specify the URL :

{% url 'searchParcelle' {query} %}

But as the results returned by Semantic UI are stored inside a variable {query}, I've got a template error :

Could not parse the remainder: '{query}' from '{query}'

Do you know how I could resolve that? I could keep it like this, but as my Prod URL (virtual host) is a bit different, I have to change it every time.

Thanks for your help

2 Answers

Answers 1

There are two problems with your code:

  1. you do not have quotes around {query}, so Django does not treat it like a string
  2. the curly brackets in the URL will be escaped, resulting in a URL like this: /myUrl/%7Bquery%7D/

Additionally, your URL definition might only allow alphanumeric characters and not match with the argument {query}.

The proper way to do this would be to get the URL pattern and transform it into the template URL format, but that would require diving deep into the internals of Django's URL resolving and is probably not worth the hassle.

A more pragmatic approach would be to reverse the URL with a placeholder, which you then replace in JavaScript.

var url = "{% url 'searchParcelle' 'QUERYPLACEHOLDER' %}".replace(     'QUERYPLACEHOLDER', '{query}' ) $('.ui.search').search({      type          : 'standard',     minCharacters : 2,                   apiSettings   : {         onResponse: function(parcelleResponse) {                                     //DO Something             return response;         },         url: url     }        });

Answers 2

A more pragmatic approach would be to reverse the URL with a placeholder, which you then replace in JavaScript.

In fact I did exactly what you have suggested and it working as expected now ! Thanks for your help Daniel Hepper.

_urlSearch  = "{% url 'search'  '--MySearchValue--' %}"; _urlDisplay = "{% url 'display' '--MySearchValue--' %}";     $('.ui.search').search({   ...  url: _urlSearch.replace('--MySearchValue--', '{query}') });
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment