Tuesday, October 8, 2013

jQuery - Using bPopup plugin to display data in Django

I tried to display the data content in a form of popups, and I found the bPopup plugin of jQuery which is very useful and easy to use. So, I just hide the content and then add bPopup display to the click event of a button:

mypage.html
=========

        {% for msg in mail_logs %}
...
             <textarea readonly class="msgbody" id="msgbody-{{ msg.logid }}" value="" style="display:none;">{{ msg.body }}</textarea>
                <button class="showmsgbtn small button yellow" id="{{ msg.logid }}">Show Message</button>
...
        {% endfor %}
...
<script>
    jQuery('.showmsgbtn').each(function(){
        jQuery(this).click(function(){
            btnid = jQuery(this).attr('id');
            textareaid = 'msgbody-' + btnid;
            jQuery('#' + textareaid).bPopup();
        });
    });
</script>
...



References:
bPopup's homepage: http://dinbror.dk/bpopup/
bPopup's repo: https://github.com/dinbror/bpopup/