Hi everyone,

Having a Bootstrap/jQuery with Django issue so hope that someone might be 
able to help.

I'm rendering a part of my page to make a Bootstrap 'tab' (docs: link here 
<http://bootstrapdocs.com/v2.3.0/docs/javascript.html#tabs>) - however the 
content under the first heading isn't loading initially (img 1); it only 
renders when I select another heading then going back to it (img 2).

<https://lh3.googleusercontent.com/-q9Lr6yjUwns/WPJ-bXW7WHI/AAAAAAAAH3M/t9zyWLaXLygwxzTw9fpEByvu8UZ3l-pAACLcB/s1600/img%2B1.png>

*Img 1: Initial page loading*


<https://lh3.googleusercontent.com/-I2t5dMdIyho/WPJ-fpa9n6I/AAAAAAAAH3Q/mJ9nEGFf7IkcDaWyleeDGjAXWBX42QmRwCLcB/s1600/img%2B2.png>

*Img 2: Going back to 'Singing' after selecting a different tab.*


Any thoughts on this? The code works just fine when I hard code it, it's 
just when the page is being rendered via forloops that the issue occurs.

<!-- HEADINGS -->
<ul class="nav nav-tabs" id="myTab">
 {% for p in page.tuitionpage.tuitioncontent.all %}
 <li {% if forloop.first %}class="active"{% endif %}>
 <a href="#{{ forloop.counter}}" data-toggle="tab">{{ p }}</a>
 </li>
 {% endfor %}
</ul>


<!-- CONTENT -->

<div class="tab-content">
 {% for p in page.tuitionpage.tuitioncontent.all %}
 <div class="tab-pane" id="{{ forloop.counter}}">
 {{ p.content|richtext_filters|safe }}
 </div>
 {% endfor %}
</div>


<script>
  $(function () {
    $('#myTab a:first').tab('show');
  })
</script>

Bootstrap v2.3.0
Django v1.8

Cheers!

Rich

-- 
You received this message because you are subscribed to the Google Groups 
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to django-users+unsubscr...@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-users/91df4f2b-3b06-466f-862d-06594c59059a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to