[Fixed]-Create onClick content after the click in the html

The answer is no, not within the template. Your template variables are filled in on the server. By the time the browser gets it, everything is filled in.

If you want to get hold of some data only after the user clicks, you will need to make a special view which returns the extra data you want (either as json or however you like). Then in your click handler you can do an ajax request to that view.

Think of this problem in terms of where the data is located and when it travels.

1) You would like to first load a page into the users browser, which does not contain any of this large data.. it only contains a button for the user to press to get the large data. The way this happens is, the browser connects to the server/url, django looks at urls.py and decides what view to execute. The view then, using the template, generates the html which diplays the button.. which travels back to the browser and is displayed.

That is the end of the request and your first template and first view have done their job and exited.

2) Then, only if the user presses a button, you want to load the data up into the existing page. This is ANOTHER REQUEST. When the button is pressed, the click handler must execute code which makes another connection to the server, a different url, different view, different template.. since you are returning different data. Then in your javascript you take this new html and load it into the part of the existing page that you would like…

It’s classic AJAX, it is two different requests but instead of loading a whole new page you’re only loading part of it. Since you are not clear on how this works just yet the easiest way to do this is to just write two totally separate Django views each with their own template, own url etc. Then you can test each one separately. One returns the page with the button and the javascript but no data. The other returns just the part of the page that would normally contain the data. Then once you have got that working, write the jQuery/javascript code which loads the data.

For example, in your first template:

<script>
    $(document).ready(function()
    {   
        $(document).on("click", "#loadusers", function () {
            $( "#user_select" ).load( "/myapp/loadusers/" ); 
        });
    });
</script>

<form>
<input type="button" id="loadusers" value="Load User Choices">
<select id="user_select" name="user"></select>
</form>

In your loadusers template:

{% foreach user in users %}
<option value="{{user.pk}}">{{user}}</option>
{% endfor %}

This would result in the first view rendering a page which contains an empty select. If you then click the button it will load the options from the second view.

Try the following code:

$(document).ready(function()
{   
   var template = {{users}}; // Storing the template in a variable
   $(document).on("click", ".open-infoDialog", 
      function (l_template) {
         return function() {
           // This function will be called on click.
           // Do the stuff here. using l_template 
         };
      }(template)
});

The template will contain your data. Here, We are returning a function instead of value.
That returned function will be called on click callback.

You can use l_template in the returned function.