Flask URL routing : url_for only passes first argument

Question

I have jQuery tabbed panel that loads pages within the tab on click. This works fine. What I want now is to pass additional arguments to the url such as the title of the tab being clicked. The script to load is the following:

$(document).ready(function(){
$( "#content" ).load( "{{url_for(xyz, query=query)}}" );
var tabs = $('.tabs > li');
tabs.on("click", function(){
  tabs.removeClass('active');
  $(this).addClass('active');
  $( "#content" ).load( "{{url_for(xyz, query=query)}}" );
})
});

The html is the following:

<ul class="tabs clearfix" >
<li> 
  <a href=# >All</a> 
</li>
<li class=active >  
  <a href=# >You</a> 
</li>
<li>
  <a href=# >Me</a>
</li>

I would like to pass the tab title as another parameter to my flask url_for. Also, What is the best way to inspect the properties of objects. I mean, in python I can use dir(object) to list everything about that object. Is there a simple way of showing the attributes of a clicked tab object somewhere in the browser. Thanks

UPDATE This is what I came up with:

var index = $(this).children('a')[0].title;

If you want the title of the a tag Or

var index = $(this).children('a')[0].innerHTML;

Now the problem is that I am unable to pass this js variable to the url_for function. Or rather it shows up as None inside the function in my view

UPDATE TWO I now have a conditional since as per my understanding I cannot pass js variable to jinja.

if(index=='a'){
  $( "#content" ).load( "{{url_for('xyz', index='a', query=query)}}" );
  }
  else if(index=='b'){
  $( "#content" ).load( "{{url_for('xyz', index='b', query=query)}}" );
  }
  else{
  $( "#content" ).load( "{{url_for('xyz', query=query)}}" );
  }

The problem now is that flask only passes the first argument while the second is None. So in the if blocks the values of index goes through while the query is None while in the else block the query has a value. The function inside view is

@app.route('/xyz')
def xyz():
    query = request.args.get("query")
    index = request.args.get('index')

UPDATE 3 I have figured out what the problem is. I am using the string inside jQuery load function to load up the content from the page. url_for creates a url of the form

/respanes?index=a&query=b

which is what I need but then when its enclosed in the quotation marks the ampersand is converted into & which the browser does not read properly

/respanes?index=a&query=b

So now I need to just be able to escape it properly. I tried to wrap the string in encodeURI but that didnt help.

So I finally had to use replace to exactly have the string as I want it.

 $( "#content" ).load('{{url_for('.xyz, index=a, query=query)}}'.replace('&','&'));

Hopefully someone can come up with a better way of doing this. All I wanted was to have tabbed panel that will load a page in it through ajax. i am not sure going through all this hoopla is what's required but hopefully some noob like me can glean from my struggles :)

Answer 1

I'm a little late to the party, but I encountered this same problem. The proper solution is pretty straightforward: use the Jinja2 safe filter to force it output the raw string instead of formatting it with web-safe entities.

{{url_for('x.y', index=a, query=query) | safe}}

More information on the filter is available here: http://jinja.pocoo.org/docs/dev/templates/#safe