CODEWITHSUNDEEP
pythonangularjsdjango
Catherine
Catherine

Reputation: 251

Staying on same tab after a form is submitted in django and angular

I've got a boards.html page and on that page I have 3 tabs (written with angular); Your Boards, Join Board, and Create Board. Under the Join Board tab there is a join board button (which is a django function) that, when clicked, reloads the page so it goes back to the default Your Boards tab, I want it to stay on the Join Board tab. Here is a bit of my code:

app.js TabController

app.controller('TabController', ['$scope', '$http', function($scope, $http){
    this.tab = 1;
    this.setTab = function(newValue){
        this.tab = newValue;
    };

    this.isSet = function(tabName){
        return this.tab === tabName;
    };
    $http.get('/checklogin/').success(function(data) {
        console.log('Current User: ' + data.user_id);
        $scope.user = data;
        $scope.userid = data.user_id;
    }).error(function(data) {
        console.log('error: ' + data);
    });

}]);

views.py join_board function

def join_board(request, board):
    boardObj = Board.objects.get(board_name=board)
    if Profile.objects.filter(pk=request.user.profile.id, boards__pk=boardObj.id).exists():
        messages.error(request, 'Cannot join a board you are already a member of.')
    else:
        request.user.profile.boards.add(boardObj)
        boardMemberGroup = Group.objects.get(name=board + ' member')
        request.user.groups.add(boardMemberGroup)
    return boards(request)

relevant parts of boards.html

<section ng-controller="TabController as tab">
<ul class="nav nav-pills nav-justified">
    <li ng-class="{ active:tab.isSet(1) }">
        <a href ng-click="tab.setTab(1)">Your Boards</a>
    </li>
    <li ng-class="{ active:tab.isSet(2) }">
        <a href ng-click="tab.setTab(2)">Join Board</a>
    </li>
    <li ng-class="{ active:tab.isSet(3) }">
        <a href ng-click="tab.setTab(3)">Create Board</a>
    </li>
</ul>

<!--  Your Boards Tab's Content  -->
<div ng-show="tab.isSet(1)">
    ...
</div>
<!--  Join Board Tab's Content  -->
<div ng-show="tab.isSet(2)">
    <h2>Boards you can join</h2>
    {% if found_entries %}
        {% for board in found_entries %}
            <h4> {{board.board_name}} </h4>
            <form action="/join/{{board.board_name}}/">
                {% csrf_token %}
                {% if board not in userBoards %}
                    <button id="join" type="submit" value="Delete"> {% trans "Join Board" %} </button>
                {% endif %}
            </form>
        {% endfor %}
    {% else %}
            <h4> No Boards Found </h4>
    {% endif %}
</div>
</section>

I've tried

<form action="/join/{{board.board_name}}/" ng-class="tab.setTab(2)">

and that keeps it on the Join Boards tab after I click the join board button or refresh the page, but it also makes it so that I can't get to the other tabs. I have read things about using ngCookie, but all of my tabs are on the same html page and all of those examples were for remembering a username or if someone is logged in, which is not relevant to my problem. Also I am trying to avoid jQuery so I'd love to have any suggestions using just Angular and/or Django.

Upvotes: 3

Views: 1219

Answers (1)

AncientSwordRage
AncientSwordRage

Reputation: 7615

Your whole page is reloading. That means you lose all the information you had on the page unless you store it somewhere. If you want to stay with Django forms I'd recommend adding query params to your angular routing, so that you can jump straight there when the page is loaded.

You're url would looks like www.awesomeboards.com/boards?tab=2 then you'd look at your params on controller load and then switch to those params.

Otherwise you could look into django-angular, specifically the section on forms. I've not used it but it might help?

Upvotes: 1

Related Questions