Django/Python: Pulling value from template into views.py

Question

I currently have a search function in my views.py file like so:

def json_search(request):
    query = request.GET.get('query')
    api_key = locu_api
    url = 'https://api.locu.com/v1_0/venue/search/?api_key=' + api_key
    locality = query.replace(' ', '%20')
    category = 
    final_url = url + "&locality=" + locality + "&category=" + category
    json_obj = urllib2.urlopen(final_url)
    decoded_data = json.load(json_obj)
    return render(request, 'loc_search.html',
                       {'objects': decoded_data['objects']})

What I have set up is a drop-down search bar whereby I want the category variable within my json_search() function to automatically be assigned to the selected option on the drop-down bar before the form is submitted using the submit button. The search bar looks like this :

And the code like this:

<form action="{% url 'search' %}">
<div class="input-group">
        <input name="query" input id="address" type="textbox" placeholder="City or Zipcode" class="form-control datebox">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit" id="addressSearch">Search</button>
            <button name = "category_query" tabindex="-3" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" >
                <li><a href="restaurants">Resturant</a></li>
                <li><a href="active">Activities</a></li>
                <li><a href="bars">Bar / Club</a></li>
                <li class="divider"></li>
                <li><a href="other">other</a></li>
            </ul>
        </div>
    </div>
</form>

Is this even possible?

Answer 1

You would have to get the value back to the backend view code in some fashion in order for that to happen.

It would be possible to do so prior submitting the form. For example, you could use an Ajax call within the template code to hit the same URL serviced by the json_search function, passing category in the URL, and then pulling it out of request.GET .

If you wanted it to be assigned upon dropdown selection, you would want to attach a click event handler via jQuery to that dropdown, and then in that handler's function, get the selected value, and then add it to the Ajax call back to your json_search function.

In your json_search code, you'll want to differentiate handling the submit (which should be a POST ) vs. general GET handling (perhaps based on whether various parameters are present in the URL ).

Edit in response to comment from OP:

It's certainly not trivial, especially if you've not worked with Ajax before, but it shouldn't be too bad overall (and once you get the hang of it, this paradigm can be used for all sorts of interaction with other modules like Datatables and many others, not to mention your own Django backend).

While there are many different ways to do this, I'm a fan of using jQuery 's when in conjunction with done (used in examples on the same page). The when lets you fire off multiple asynchronous Ajax requests, and the done acts as a join point where you wait for them to finish before proceeding.

Answer 2

Yes, this is possible, you would make all the links in the dropdown have a onclick handler which would need to save the category. Then instead of a url for the form you would use a submit function which would send your form data + the category .

That is something easy to do with angular + ui.bootstrap .

---

with jQuery

http://plnkr.co/edit/iBY2n9dq8Tn95IUGwNAB?p=preview

You need to transform your links not to have a valid href and instead call a function, eg:

<a href="#" onclick="setCategory('restaurant')">Restaurant</a>

and add a hidden field for the category

<input name="category" input="" id="category" type="hidden" placeholder="Category" class="form-control" />

and some easy javascript

function setCategory(category) {
  alert('category (hidden) = ' + category);
  $('#category').val(category);
}