Closed MKatereggaExigent closed 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?
@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">
<!-- CSS and JavaScripts for django-todo -->
<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>
@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
@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>
Yeah, that was really a general web dev question, no relation to this project.
Hello here,
I am managed to integrate
django-todo
application in my app and everything works fine except theAdd Task
button that is not responding on click. I tried toinspect
the page, edited its htmlcollapse show
and it worked, how can I resolve this in thebase.html
.I do have
jquery
andbootstrap
installed usingpip
and my header looks like this`
`