Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>These are the tools/methods that helped me to solve the problem. First, I have a helper utility method called <code>render_to_json</code>:</p> <pre><code># `data` is a python dictionary def render_to_json(request, data): return HttpResponse( json.dumps(data, ensure_ascii=False), mimetype=request.is_ajax() and "application/json" or "text/html" ) </code></pre> <p>I have a <code>messages.html</code> template to render the necessary html for the popup message(s):</p> <pre><code>{% for message in messages %} &lt;li{% if message.tags %} class="{{ message.tags }}"{% endif %}&gt;{{ message }}&lt;/li&gt; {% endfor %} </code></pre> <p>When create a message in response to an AJAX request, I use Django's <code>render_to_string</code> to package the message(s) into a string that gets stored in a <code>data</code> dictionary, which then uses my <code>render_to_json</code> to return an appropriate response:</p> <pre><code>def my_custom_view(request) # ... your view code data = { 'msg': render_to_string('messages.html', {}, RequestContext(request)), } return render_to_json(request, data) </code></pre> <p>Then, in my jQuery <code>$.post(...)</code> callback function, I check to see if the <code>response</code> object has a <code>msg</code> attribute, and then insert the contents of <code>response.msg</code> into the DOM where I want it needs to be, with jQuery transitions if desired. My <code>base.html</code> template contains the <code>&lt;ul&gt;</code> container for the messages:</p> <pre><code>&lt;ul id="popup-messages-content"&gt; {% include 'messages.html' %} &lt;/ul&gt; </code></pre> <p>Note that the above includes the <code>messages.html</code> for the case when you want to display messages on an actual page load (non-AJAX request) - it is blank if there are no messages, but the <code>&lt;ul&gt;</code> is still available to push AJAX-received messages into.</p> <p>The last piece is the Javascript function (requires jQuery) I use in any <code>$.post(...)</code> callbacks to show the messages:</p> <pre><code>function showPopupMessage(content) { var elMessages = $('#popup-messages-content'); if (elMessages.length &amp;&amp; content) { elMessages.html(content); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload