title: How to set flask url_for in JQuery
body: <p>Setting <code>url_for()</code>'s in a Jinja2 template is pretty straightforward (as long as it's in the HTML). I've been trying to set it from inside JQuery like so:</p>
  
  <pre><code>&lt;script&gt;
      function my_func(key) {
          var newHref = sprintf("{{url_for('fig', selector='%s')}}", key);
          $('#my_id').attr('href', newHref);
      }
  &lt;script&gt;
  </code></pre>
  
  <p>Where <code>sprintf</code> is just a standard string formatting function for JQuery. </p>
  
  <p>Nothing happens now.</p>
  
  <p>I also tried it with an <code>onClick</code> function instead of an <code>href</code>. It looked like this:</p>
  
  <pre><code>function my_Clicked(key) {
      $.ajax({
          type: 'GET',
          url: sprintf("{{ url_for('fig', selector = '%s')}}", key)
      });
  }
  </code></pre>
  
  <p>Again, nothing happens when the <code>&lt;button&gt;</code> is clicked. </p>
  
  <p>Is this even possible? The Jinja2/Flask markers <code>{{ }}</code> only seem to appear in the HTML and a processed when the page is loaded. However, I don't see why it isn't possible that you set a dynamic URL after the page has loaded, so that when you click it, the request is just sent back to the server.</p>
  
  <hr>
  
  <p><strong>EDIT</strong>
  After using the extension suggested by odai alghamdi, I have reached a perplexing problem. </p>
  
  <p>I am going with an <code>onClick</code> AJAX call for the <code>&lt;button&gt;</code>. It now looks like this:</p>
  
  <pre><code>function cropzoneClicked(key) {
      $.ajax({
          type: 'GET',
          url: flask_util.url_for('fig', {selector:key})
      });
  }
  </code></pre>
  
  <p>However, nothing happens when the button is clicked. I know that the function is being called because I can stick an alert in there. But, nothing is being rendered and the <code>'GET'</code> request isn't returning a successful callback</p>