Add Task Button not responding

MKatereggaExigent commented 4 years ago

Hello here,

I am managed to integrate django-todo application in my app and everything works fine except the Add Task button that is not responding on click. I tried to inspect the page, edited its html collapse show and it worked, how can I resolve this in the base.html.

I do have jquery and bootstrap installed using pip and my header looks like this

`

My Ticketing Platform {% block extrahead %}{% endblock extrahead %} {% block extra_js %}{% endblock extra_js %}

`

shacker commented 4 years ago

The Add Task form is already present in the html, but is shown on click (as you've found). When you open your browser's inspector, do you not see any errors whatsoever? Just nothing? It almost sounds like you don't have jquery enabled at all. The sample HTML you showed there doesn't show it being loaded - can you show me where you're loading it and confirm there is no JS error in the console?

MKatereggaExigent commented 4 years ago

@shacker yes you are right, just checked the console, jquery is not installed. I installed it using pip install jquery but it doesn't seem to have worked.

Here is the header:

<head> <title>My Ticketing Platform</title>

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <link rel="stylesheet" type="text/css" href="/static/todo/css/styles.css">

<script src="/static/todo/js/jquery.tablednd_0_5.js" type="text/javascript"></script>

<script type="text/javascript"> function order_tasks(data) { // The JQuery plugin tableDnD provides a serialize() function which provides the re-ordered // data in a list. We pass that list as an object ("data") to a Django view // to save new priorities on each task in the list. $.post("/todo/reorder_tasks/", data, "json"); return false; };

$(document).ready(function() { // Initialise the task table for drag/drop re-ordering $("#tasktable").tableDnD();

$('#tasktable').tableDnD({ onDrop: function(table, row) { order_tasks($.tableDnD.serialize()); } });

});

// When adding a task, change the text of the Add Task button function handleClick() { console.log(this.innerHTML); this.innerHTML = (this.innerHTML == 'Add Task' ? 'Cancel' : 'Add Task'); } document.getElementById('AddTaskButton').onclick=handleClick; `

<script src="chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/prompt.js"></script></head>

MKatereggaExigent commented 4 years ago

@shacker jquery is setup but now I am getting this error in console:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

This is the error:

Uncaught TypeError: Cannot set property 'onclick' of null

MKatereggaExigent commented 4 years ago

@shacker I resolved the issue. jQuery must come before bootstrap in the header of the base.html i.e.

<head> <title>My Ticketing Platform</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="{% static "js/jquery-3.5.1.js" %}"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js" integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A=" crossorigin="anonymous"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="{% static "js/bootstrap.min.js" %}"></script> {% block extrahead %}{% endblock extrahead %} {% block extra_js %}{% endblock extra_js %} </head>

shacker commented 4 years ago

Yeah, that was really a general web dev question, no relation to this project.

shacker / django-todo

Add Task Button not responding #109