trying to make a checkbox cause a redirect using javascript

Question

I have a Django app in which I'm trying to have some checkboxes in one of my pages redirect to a view that does some operations in my databse (toggling the boolean column that corresponds to the information that the checkbox is representing). I found this page on javascript redirects How to redirect to another webpage in JavaScript/jQuery? but none of the suggestions are doing anything. Here's my relevant code.

My Template

<script>
    function toggleCompletion(task_id){
        window.location.replace("/maintenance/tasks/{{ maintenance.id }}/toggleCompletion/"  str(task_id) + "/";
    }
</script>

...
...

<input type="checkbox" onclick="toggleCompletion({{ task.id }});" />

My urlconf

urlpatterns = patterns('MaintenanceTracker.views',
url(r'^tasks/(?P<main_id>\d+)/toggleCompletion/(?P<task_id>\d+)/', 'toggleCompletion'),

The View that the template tries to redirect to is effectively empty right now (just has a return line with a test string in an HttpResponse). Clicking on the checkbox in question causes the checkbox to change state and I confirmed that it's entering the JS with an alert but nothing further happens. I also tried modifying windows.location.href and location.href to solve this as per the page I found's recommendations. Thanks in advance for any help, if you need any more information please ask and I will provide.

EDIT: as per abarnert's request here are the page source before and after clicking on a checkbox.

Before:

<head>
    <title>Task List</title>
    <style>
        table {
            margin-left: 100;
            margin-top: 15;
        }
        h1 {
            margin-left: 100;
            margin-top: 75;
        }
        h3 {
            margin-left: 100;
            margin-top: 50;
        }
        .indent {
            margin-left: 100;
        }
        .navigator {
            position:absolute;
            right:25px;
            top:15px;
        }
        .navigator-panel {
            position:absolute;
            right:25px;
            top:60px;
        }
        .user-info {
            position:absolute;
            left:25px;
            top:15px;
        }
        .logout {
            position:absolute;
            left:25px;
            top:60px;
        }
    </style>
    <script>
        //redirects to toggleCompletion view to toggle the value of one of the tasks isDone field
        function toggleCompletion(task_id){
            alert(task_id);
            location.href = "/maintenance/tasks/2/toggleCompletion/" + str(task_id) + "/";
            //window.location.replace("/maintenance/tasks/2/toggleCompletion/" + str(task_id) + "/");
        }
    </script>
    <h1>Task List for July 2013 Maintenance</h1>
</head>
<!--Create a User info panel-->
<p class="user-info">You're logged in as jgreen</p>
<form class="logout" method="post" action="/maintenance/logoutResolve/">
    <input type='hidden' name='csrfmiddlewaretoken' value='3vJTLWV0aIqAYfPIX2toBSPPFTVnE7Ll' />
    <input type="submit" value="Logout" />
</form>
<!--Display table of the Maintenances-->
<body>
    <table border="2">
        <tr>
            <th>Time</th>
            <th>Task Description</th>
            <th>Owner</th>
            <th>Notes</th>
            <th>Done?</th>
        </tr>

            <tr>
                <td>July 16, 2013, 10:25 a.m.</td>
                <td>Add a Task</td>
                <td>jgreen</td>
                <td>adlfjalkds</td>

                    <td><input id="1Checkbox" type="checkbox" value="False" onclick="toggleCompletion(1);" /></td>

            </tr>

            <tr>
                <td>July 16, 2013, 10:26 a.m.</td>
                <td>Weird Task</td>
                <td>jgreen</td>
                <td></td>

                    <td><input id="5Checkbox" type="checkbox" checked="yes" onclick="toggleCompletion(5);" /></td>

            </tr>

            <tr>
                <td>July 16, 2013, 10:28 a.m.</td>
                <td>Add another Task</td>
                <td>jgreen</td>
                <td>aaa</td>

                    <td><input id="2Checkbox" type="checkbox" value="False" onclick="toggleCompletion(2);" /></td>

            </tr>

            <tr>
                <td>July 16, 2013, 10:29 a.m.</td>
                <td>Add yet another Task</td>
                <td>jgreen</td>
                <td>asdfasdf</td>

                    <td><input id="3Checkbox" type="checkbox" value="False" onclick="toggleCompletion(3);" /></td>

            </tr>

            <tr>
                <td>July 16, 2013, 12:21 p.m.</td>
                <td>The Last Task</td>
                <td>jgreen</td>
                <td></td>

                    <td><input id="4Checkbox" type="checkbox" value="False" onclick="toggleCompletion(4);" /></td>

            </tr>

    </table>
    <div class="indent" style="width:20%;overflow:hidden;margin-top:2px">
        <form style="float:left" method="post" action="/maintenance/index/">
        <input type='hidden' name='csrfmiddlewaretoken' value='3vJTLWV0aIqAYfPIX2toBSPPFTVnE7Ll' />
            <input type="submit" value="Back" />
        </form>
        <form style="" method="post" action="/maintenance/tasks/2/addTask/">
        <input type='hidden' name='csrfmiddlewaretoken' value='3vJTLWV0aIqAYfPIX2toBSPPFTVnE7Ll' />
            <input type="submit" value="Add Task" />
        </form>
    </div>
</body>

After:

<head>
    <title>Task List</title>
    <style>
        table {
            margin-left: 100;
            margin-top: 15;
        }
        h1 {
            margin-left: 100;
            margin-top: 75;
        }
        h3 {
            margin-left: 100;
            margin-top: 50;
        }
        .indent {
            margin-left: 100;
        }
        .navigator {
            position:absolute;
            right:25px;
            top:15px;
        }
        .navigator-panel {
            position:absolute;
            right:25px;
            top:60px;
        }
        .user-info {
            position:absolute;
            left:25px;
            top:15px;
        }
        .logout {
            position:absolute;
            left:25px;
            top:60px;
        }
    </style>
    <script>
        //redirects to toggleCompletion view to toggle the value of one of the tasks isDone field
        function toggleCompletion(task_id){
            alert(task_id);
            location.href = "/maintenance/tasks/2/toggleCompletion/" + str(task_id) + "/";
            //window.location.replace("/maintenance/tasks/2/toggleCompletion/" + str(task_id) + "/");
        }
    </script>
    <h1>Task List for July 2013 Maintenance</h1>
</head>
<!--Create a User info panel-->
<p class="user-info">You're logged in as jgreen</p>
<form class="logout" method="post" action="/maintenance/logoutResolve/">
    <input type='hidden' name='csrfmiddlewaretoken' value='3vJTLWV0aIqAYfPIX2toBSPPFTVnE7Ll' />
    <input type="submit" value="Logout" />
</form>
<!--Display table of the Maintenances-->
<body>
    <table border="2">
        <tr>
            <th>Time</th>
            <th>Task Description</th>
            <th>Owner</th>
            <th>Notes</th>
            <th>Done?</th>
        </tr>

            <tr>
                <td>July 16, 2013, 10:25 a.m.</td>
                <td>Add a Task</td>
                <td>jgreen</td>
                <td>adlfjalkds</td>

                    <td><input id="1Checkbox" type="checkbox" value="False" onclick="toggleCompletion(1);" /></td>

            </tr>

            <tr>
                <td>July 16, 2013, 10:26 a.m.</td>
                <td>Weird Task</td>
                <td>jgreen</td>
                <td></td>

                    <td><input id="5Checkbox" type="checkbox" checked="yes" onclick="toggleCompletion(5);" /></td>

            </tr>

            <tr>
                <td>July 16, 2013, 10:28 a.m.</td>
                <td>Add another Task</td>
                <td>jgreen</td>
                <td>aaa</td>

                    <td><input id="2Checkbox" type="checkbox" value="False" onclick="toggleCompletion(2);" /></td>

            </tr>

            <tr>
                <td>July 16, 2013, 10:29 a.m.</td>
                <td>Add yet another Task</td>
                <td>jgreen</td>
                <td>asdfasdf</td>

                    <td><input id="3Checkbox" type="checkbox" value="False" onclick="toggleCompletion(3);" /></td>

            </tr>

            <tr>
                <td>July 16, 2013, 12:21 p.m.</td>
                <td>The Last Task</td>
                <td>jgreen</td>
                <td></td>

                    <td><input id="4Checkbox" type="checkbox" value="False" onclick="toggleCompletion(4);" /></td>

            </tr>

    </table>
    <div class="indent" style="width:20%;overflow:hidden;margin-top:2px">
        <form style="float:left" method="post" action="/maintenance/index/">
        <input type='hidden' name='csrfmiddlewaretoken' value='3vJTLWV0aIqAYfPIX2toBSPPFTVnE7Ll' />
            <input type="submit" value="Back" />
        </form>
        <form style="" method="post" action="/maintenance/tasks/2/addTask/">
        <input type='hidden' name='csrfmiddlewaretoken' value='3vJTLWV0aIqAYfPIX2toBSPPFTVnE7Ll' />
            <input type="submit" value="Add Task" />
        </form>
    </div>
</body>

Can you show what the generated HTML looks like (by doing a View Source in your browser and copying and pasting)? Because [this trivial example](http://pastebin.com/bvGqdmgi) saved as `winrep1.html`, and the equivalent swapping `winrep1` and `winrep2` and saved as `winrep2.html`, works as expected. — abarnert, Jul 16 '13 at 19:08

score 1 · Accepted Answer · answered Jul 16 '13 at 22:44

This issue is related to javascript.

The str function does not exist in javascript. So if it is in a template use :

location.href = "/maintenance/tasks/2/toggleCompletion/" + task_id + "/";

Bonus :

Please, do not use alert to debug your code, prefer console.log method.

trying to make a checkbox cause a redirect using javascript

1 Answers1