Loading Django views inside template with JQuery

[Ricardo Cataldi]

Hy guys, you all right?

I have a problem that it seems not to be any answer in Stack Overflow.

I need to load three views inside a template, and i decided to do that based on html tags and JQuery. The bellow image shows how the front end will look like:

What happens is that the tabs should load a view separately, I've searched on ways of doing that with JQuery but i didn't found any that would work...

Can anyone tell me how exactly I can load a view with JQuery inside a html tab? In case it is not possible, can you give me an alternative?

The html following:

{% block header %}
<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <h2 class="font-alt title text-center">{% trans "Gerenciamento de Produtos" %}</h2>
            <div class="nav-container nav-center">
                <ul class="nav nav-pills nav-pills-icons nav-pills-primary" role="tablist">
                    <li class="">
                        <a href="{% url 'portfolio:catalogue:catalogue_dashboard:dashboard-product-list' %}" role="tab" data-toggle="tab" data-target="#ListProduct">
                            <i class="material-icons">list</i>
                            Listar Produtos
                        </a>
                    </li>
                    <li class="">
                        <a href="{% url 'portfolio:catalogue:dash_catalogue:dashboard-attribute-option-group-list' %}" role="tab" data-toggle="tab" data-target="#ListOptions">
                            <i class="material-icons">view_list</i>
                            Listar Opções
                        </a>
                    </li>
                    <li class="">
                        <a href="{% url 'portfolio:catalogue:dash_catalogue:dashboard-attribute-option-group-credashboard-class-listate' %}" role="tab" data-toggle="tab" data-target="#CreateOptions">
                            <i class="material-icons">add_box</i>
                            Adicionar Opções
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{% endblock header %}

{% block content %}
<div class="tab-content">
    <div class="tab-pane" id="ListProduct">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                {% block productlist %}

                {% endblock %}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tab-content">
    <div class="tab-pane" id="ListOptions">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                {% block listtoptions %}

                {% endblock %}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tab-content">
    <div class="tab-pane" id="CreateOptions">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                {% block createoptions %}

                {% endblock %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

I want to load the views inside all those blocks.

Thanks in advance!!

[shiva kumar]

I think you want to load the data from view to html using jQuery. 

I hope ajax concepts will used. Once try it.

--
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...@googlegroups.com.
To post to this group, send email to django...@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/55f946c1-53de-4c2d-984e-5d9e774e03b2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[official...@gmail.com]

I am new to django, not tried it before just logicaly saying this should work.
Try doing this:
3tabs
Tab A = Tab 1
Tab B = Tab 2
Tab C = Tab 3

Tab A extend it view to Tab B
Tab B has a inner block to accept Tab B content and also extend it tab to Tab C
Tab C applies the same principle as Tab B and extend to the layout view.

[Nelson Varela]

Use iframes which loads the three different views