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/
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/
Comments
Post a Comment