Search code examples
javascriptdjangosammy.js

SammyJS not working with Django


I am using KnockoutJS with SammyJS for client-side templating, and Django framework In the topbar of my application, there is a dropdown menu for user logout. This is the code for it -

<div class="pull-right user">
    <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
        <p><span id="topbar_first_name"></span></p> 
        <b class="caret"></b>
        <ul class="dropdown-menu" role="menu">
            <li><a tabindex="-1" href="{% url 'user:logout' %}">Logout</a></li>
        </ul>
    </a>
</div>

Before I started using SammyJS, the logout link worked. But now, only the url of the browser changes to 'http://localhost:8000/user/logout/' ( this is the correct url of the link ). Only after reloading the page, the user is able to logout.

In my JS file, this is the only function of Sammy -

Sammy(function() {
    this.get('#:folder', function() {
        self.chosenFolderId(this.params.folder);
        $.get('/tasks/get', { folder: this.params.folder }, function(data) {
            self.tasks_list(data);
        });
    });

    this.get('', function() {
        this.app.runRoute('get', '#Active')
    });
}).run();

I tried changing the 'href' to an external link ( like 'www.stackoverflow.com' ). After this, the url of the browser changes to 'http://localhost:8000/www.stackoverflow.com' but it doesn't work. How to remove this problem ?


Solution

  • The line:

    this.get('', function() {
        this.app.runRoute('get', '#Active')
    });
    

    is messing your links. This tells SammyJS to intercept all links. What are you trying to achieve with this? What I would do is :

    Sammy(function() {
       this.get('#:folder', function() {
           self.chosenFolderId(this.params.folder);
          $.get('/tasks/get', { folder: this.params.folder }, function(data) {
            self.tasks_list(data);
           });
        });
    
    }).run('#Active');