We Keep Coding

JavaScript is not executed in tracking form

I'm doing an e-commerce website for school and got the task to implement an order tracking system to display the status history of the order. I used a template for this, and half of the code is working. In the views.py file I fetch the information form the database and put it in json format.
However in my html file there is a js script that is supposed to display the iformation from the database and that is not working.
I unfortunately do not have any previous experience with web development, so I'm lost as to why it doesn't work because in the video that used the template it worked.
If someone could help me that would be fantastic as we have to hand the project in in two days.
PS.:
When I put in the ref code and email, it just gives back the HttpResponse with the json. I'm not sure what to do with the HttpResponse though. How does it interact with the script in the html file?
I put
jQuery.noConflict();
at the start of the script as I thought maybe the bootstrap js was overshadowing my script. It didn't do anything though.
Here is my views.py function:
def tracking(request):
if request.method == "POST":
ref_code = request.POST.get('ref_code', '')
email = request.POST.get('email', '')
try:
order = Order.objects.filter(ref_code=ref_code, email=email)
if len(order) > 0:
update = OrderUpdate.objects.filter(ref_code=ref_code)
updates = []
for item in update:
updates.append(
{'text': item.update_desc, 'time': item.timestamp})
response = json.dumps(updates, default=str)
return HttpResponse(response)
else:
return HttpResponse('Please enter a valid ref code and email address.')
finally:
print()
return render(request, 'order_tracking.html')
Here is the script from the order_tracking html file:
<script>
jQuery.noConflict();
$('#trackingForm').submit(function(event) {
$('#items').empty();
var formData = {
'ref_code': $('input[name=ref_code]').val(),
'email': $('input[name=email]').val(),
'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
};
print(ref_code)
$.ajax({
type: 'POST',
url: '/order-tracking/',
data: formData,
encode: true
})
.done(function(data) {
console.log(data)
updates = JSON.parse(data);
if (updates.length > 0 & updates != {}) {
for (i = 0; i < updates.length; i++) {
let text = updates[i]['text'];
let time = updates[i]['time'];
mystr = `
<li class="list-group-item d-flex justify-content-between align-items-center">
${text}
<span class="badge badge-primary badge-pill">${time}</span>
</li>`
$('#items').append(mystr);
}
} else {
mystr = `<li class="list-group-item d-flex justify-content-between align-items-center">
Sorry, We are not able to fetch this ref code and email. Make sure to type correct ref code and email</li>`
$('#items').append(mystr);
}
});
event.preventDefault();
});
</script>
And this is the rest of the html file, I'm not sure if it's relevant:
{% block content %}
<div class="container tracking">
<div class="col my-4">
<h2> Enter Your Order ID and Email address to track your order </h2>
<form method="post" action="#" id="trackingForm">{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputname">Ref Code</label>
<input type="text" class="form-control" id="ref_code" name="ref_code" placeholder="Ref Code">
</div>
<div class="form-group col-md-6">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<button type="submit" class="btn btn-primary">Track Order</button>
</div>
</div>
<div class="col my-4">
<h2>Your Order Status:</h2>
<div class="my-4">
<ul class="list-group" id="items">
</ul>
</div>
</div>
</div>
{% endblock content %}

how to dynamically show form input fields base on user selection from dropdown options

I have this form that is used to enter student grades per subject now on this form I have 3 dropdown boxes that are dependent on each other, what I want to accomplish is that after the user selects the classroom that the students are in, I want the input fields for each subject to appear on the same form that is only in that class that the user selected so that the user can enter the grades of the students per subject but I am having a hard time figuring out how to implement such behavior. in short,i want to show input fields for subjects base on the classroom the user selected
form.py
<div class="container-fluid">
<form id="result-form" method="post">
{% csrf_token %}
<!-- Modal -->
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel"> {% block modal-title%} Add Result {% endblock%}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12" id="msg8" style="font-size: 2rem; color:rgb(255, 144, 47)"></div>
<div class="col-md-12 form-group p-2">
<label class="form-label">Class Name</label>
{% render_field form.room class+="form-control" %}
</div>
<div class="col-md-12 form-group p-2">
<label class="form-label">Exam Name</label>
{% render_field form.exam class+="form-control" %}
</div>
<div class="col-md-12 form-group p-2">
<label class="form-label">Student</label>
{% render_field form.student class+="form-control select2" %}
</div>
<div class="hidden" id="subject-fields"></div>
<div class="form-group mb-3 pt-2">
<button type="button" id="resBtn" class="btn btn-info" title="Add">Submit</button>
</div>
</div>
</div>
</form>
</div>
{% block script%}
<script>
$(document).ready(function () {
$('#id_room').change(function(){
var url = "{% url 'load_exams' %}"
var class_id = $(this).val();
$.ajax({
url: url,
data: {
'room':class_id
},
success: function(data){
$("#id_exam").html(data)
}
})
})
$('#id_room').change(function () {
var url = "{% url 'load_students' %}"
var class_id = $(this).val();
$.ajax({
url: url,
data: {
'room': class_id
},
success: function (data) {
$("#id_student").html(data)
}
})
})
$('.select2').select2({
placeholder: 'Please Select Here',
width: '100%',
dropdownParent: $('#addmodal')
});
$('#resBtn').click(function () {
let room = $('#id_room').val();
let exam = $('#id_exam').val();
let student = $('#id_student').val();
let csr = $('input[name="csrfmiddlewaretoken"]').val();
if (room == '' && name == '') {
$('#msg4').html('All fields are required').fadeIn('slow');
$('#msg4').delay(7000).fadeOut('slow');
} else {
mydata = {
exam: exam, csrfmiddlewaretoken: csr, room: room, student: student
};
console.log(mydata)
$.ajax({
url: "{% url 'add-result' %}",
data: mydata,
type: 'POST',
success: function (data) {
if (data.status == 'Save') {
$('#msg8').html('Result Successfully Added').fadeIn('slow');
$('#result-form')[0].reset();
$('#msg8').delay(3000).fadeOut('slow');
setTimeout(function () {
$('#addmodal').modal('hide')
}, 3000)
location.reload()
} else {
alert('Error with saving form')
}
}
})
}
});
})
</script>
{% endblock%}
forms.py
# deal with entering results
class ResultForm(forms.ModelForm):
class Meta:
model = Result
fields = ["room", "exam","student","percentage"]
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["exam"].queryset = Exam.objects.none()
if "room" in self.data:
try:
class_id = int(self.data.get("room"))
self.fields['exam'].queryset = Exam.objects.filter(room=class_id).order_by('name')
except(ValueError,TypeError):
pass
elif self.instance.pk:
self.fields['exam'].queryset = self.instance.classroom.exam_set.order_by('name')
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["student"].queryset = Exam.objects.none()
if "room" in self.data:
try:
class_id = int(self.data.get("room"))
self.fields['student'].queryset = Student.objects.filter(room=class_id).order_by('name')
except(ValueError, TypeError):
pass
elif self.instance.pk:
self.fields['student'].queryset = self.instance.classroom.exam_set.order_by('name')
# deal with entering grade per subject
class MarkForm(forms.ModelForm):
class Meta:
model = Mark
fields = ["result", "course","grade"]

JavaScript submit not working Django From

I have a simple form that uses JavaScript to validate and submit the form using POST to the database.
The script works for 2 forms but won't submit for other forms for some reason and I can't work out why. I've even copied the existing form and JS replaced it with new names and it still doesn't work and I cannot figure out why. I've tried to debug, but I'm getting http200 for every request so not throwing any errors that I can see.
Working version:
var investor_form = document.getElementById("add-investor");
investor_form.addEventListener("submit", function (e) {
e.preventDefault();
if (validated(this)) {
this.classList.add("was-validated");
var i_name = document.getElementById("investor-name").value;
var i_website = document.getElementById("investor-website").value;
var i_portfolio = document.getElementById("investor-portfolio").value;
var i_comment = document.getElementById("ckeditor-classic").value;
const csrftoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
const formdata = new FormData();
formdata.append("investor_name", i_name);
formdata.append("investor_website", i_website);
formdata.append("investor_portfolio", i_portfolio);
formdata.append("investor_comment", i_comment);
const xhr = new XMLHttpRequest();
xhr.open("POST", "/apps/add_investor");
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.send(formdata);
xhr.onload = () => {
window.location.reload();
};
}
})
// Form validation
function validated(form) {
console.log(form)
var i_name = document.getElementById("investor-name");
var i_website = document.getElementById("investor-website");
var i_portfolio = document.getElementById("investor-portfolio");
i_name_value = i_name.value.trim();
i_website_value = i_website.value.trim();
i_portfolio_value = i_portfolio.value.trim();
if (i_name_value === "") {
message = "Please fill investor name field"
setErrorFor(i_name, message);
} else {
setSuccessFor(i_name)
}
if (i_website_value === "") {
message = "Please fill investor website field"
setErrorFor(i_website, message);
} else if (!isUrl(i_website_value)) {
message = "Website is not valid"
setErrorFor(i_website, message);
} else {
setSuccessFor(i_website)
}
if (i_portfolio_value === "") {
message = "Please fill investor portfolio field"
setErrorFor(i_portfolio, message);
} else if (!isUrl(i_portfolio_value)) {
message = "Porfolio is not valid"
setErrorFor(i_portfolio, message);
} else {
setSuccessFor(i_portfolio)
return true;
}
}
// For Display Eroor
function setErrorFor(element, message) {
element.classList.remove('is-valid');
element.classList.add('is-invalid');
parent = element.parentNode;
for (var i = 0; i < parent.childNodes.length; i++) {
if (parent.childNodes[i].className == "invalid-feedback") {
notes = parent.childNodes[i];
notes.innerHTML = message;
break;
}
}
}
// For success Message
function setSuccessFor(element) {
element.classList.remove('is-invalid');
element.classList.add('is-valid');
}
// Check URL Pattern
function isUrl(url) {
var re = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/;
return re.test(url)
}
Non-working version with name changes
// Project Form submit
var project_form = document.getElementById("add-project");
project_form.addEventListener("submit", function (e) {
e.preventDefault();
if (validated(this)) {
this.classList.add("was-validated");
var i_name = document.getElementById("project-name").value;
var i_website = document.getElementById("project-website").value;
var i_comment = document.getElementById("ckeditor-classic").value;
const csrftoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
const formdata = new FormData();
formdata.append("project_name", i_name);
formdata.append("project-website", i_website);
formdata.append("project_comment", i_comment);
const xhr = new XMLHttpRequest();
xhr.open("POST", "/apps/add_project");
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.send(formdata);
xhr.onload = () => {
window.location.reload();
};
}
})
// Form validation
function validated(form) {
console.log(form)
var i_name = document.getElementById("project-name");
var i_website = document.getElementById("project-website");
i_name_value = i_name.value.trim();
i_website_value = i_website.value.trim();
if (i_name_value === "") {
message = "Please fill project name field"
setErrorFor(i_name, message);
} else {
setSuccessFor(i_name)
}
if (i_website_value === "") {
message = "Please fill project website field"
setErrorFor(i_website, message);
} else if (!isUrl(i_website_value)) {
message = "Website is not valid"
setErrorFor(i_website, message);
} else {
setSuccessFor(i_website)
return true;
}
}
// For Display Eroor
function setErrorFor(element, message) {
element.classList.remove('is-valid');
element.classList.add('is-invalid');
parent = element.parentNode;
for (var i = 0; i < parent.childNodes.length; i++) {
if (parent.childNodes[i].className == "invalid-feedback") {
notes = parent.childNodes[i];
notes.innerHTML = message;
break;
}
}
}
// For success Message
function setSuccessFor(element) {
element.classList.remove('is-invalid');
element.classList.add('is-valid');
}
// Check URL Pattern
function isUrl(url) {
var re = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/;
return re.test(url)
}
I've just done a find and replace for investor to project and then I have created copies of the forms/model/views/urls etc and updated to project
but it just won't update the database.
If I go into Django admin I can manually add the records, so I know the migration has worked.
response when clicking submit
[30/Oct/2021 20:10:36] "GET /apps/add_project HTTP/1.1" 200 32840
[30/Oct/2021 20:10:59] "POST /apps/add_project HTTP/1.1" 200 59
[30/Oct/2021 20:10:59] "GET /apps/add_project HTTP/1.1" 200 32840
views.py
class addProjectView(View):
template_name = 'pages/add_project.html'
def get(self, request, *args, **kwargs):
return render(request, self.template_name)
def post(self, request, *args, **kwargs):
form = addProjectForm(request.POST)
if form.is_valid():
form.save()
data = {"success": "successfully added"}
else:
data = {"error": form.errors}
return JsonResponse(data, safe=False)
add_project_view = addProjectView.as_view()
Models.py
class Project(models.Model):
project_name = models.CharField(max_length=255, blank=False)
project_website = models.URLField(max_length=255, blank=False)
project_comment = models.TextField()
def __str__(self):
return str(self.project_name)
Forms.py
class addProjectForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(addProjectForm, self).__init__(*args, **kwargs)
class Meta:
model = Project
fields = '__all__'
form html add_project.html
{% extends 'partials/base.html' %}
{% load static %}
{% block head_title%}
<title>Add Project | Dashboard</title>
{% endblock %}
{% block content %}
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0 font-size-50">Add Project</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item">Pages</li>
<li class="breadcrumb-item active">Project</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
</div> <!-- container-fluid -->
</div>
<div class="card-body">
<form class="needs-validation" id="add-project" novalidate method="post" enctype="multipart/form-data" onsubmit="return false;">
{% csrf_token %}
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="project-name-label">Project Name</label>
<input type="text" class="form-control" id="project-name" placeholder="Project Name">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please fill project name.
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="project-url-input" class="form-label">Project Website</label>
<input class="form-control" type="url" placeholder="https://example.com" id="project-website">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please provide a valid web address.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Comments</h4>
<p class="card-title-desc">Please add any comments or notes</p>
</div>
<div class="card-body">
<textarea id="ckeditor-classic"></textarea><br>
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</div>
</div>
</form>
<!-- end col -->
</div>
<button type="button" class="btn btn-primary" id="toastMessage" hidden></button>
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
<div class="toast align-items-right text-white bg-primary border-0" id="toast-message" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Successfully added Project!
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
<!-- End Page-content -->
{% endblock %}
{% block extra_js %}
<!-- ckeditor -->
<script src="{% static 'libs/#ckeditor/ckeditor5-build-classic/build/ckeditor.js' %}"></script>
<!-- init js -->
<script src="{% static 'js/pages/form-editor.init.js' %}"></script>
<!-- pristine js -->
<script src="{% static 'libs/pristinejs/dist/pristine.min.js' %}"></script>
<!-- form validation and XHR call -->
<script src="{% static 'js/pages/project.init.js' %}"></script>
{% endblock %}
Any ideas why its not working or how I can debug this?
Thanks

Displaying comments using Ajax

i am working on a project using Django. There are lists of users posts in homepage and each post has a comment form. I was able to implement comment properly on views, but the issue now is when I submit a comment it display empty string instead of the comment, the comment display in chrome console. How do i display comment on each post by user when a form is submitted. I attached an image to my questioin to clarify my question.
home.html
<div id="newfeeds-form">
{% include 'ajax_newfeeds_comments.html' %}
</div>
ajax_newfeeds_comments.html
<!-- New Feeds comment Text -->
{% for post in all_images %}
<div class="container newfeeds-comment" id="display-comment">
{% for comment in post.comments_set %}
<div class="row">
<div class="col-1 col-md-1 col-lg-1">
{% if comment.user.profile.profile_pic %}
<img src="{{ comment.user.profile.profile_pic.url }}" class="d-flex rounded-circle" alt="image" height="28" width="28">
{% endif %}
</div>
<div class="col-10 col-md-10 col-lg-10 p-2 ml-1" id="user-commentpost">
<span class="comment-post truncate">
<span class="name text-lowercase">{{ comment.user }}</span>
{{ comment.comment_post }}</span>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
<span class="md-form">
<form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}" id="newfeeds-form{{ post.id }}">
{% csrf_token %}
<input type="hidden" value={{post.id}} name="post_comment">
<img src="{{ request.user.profile.profile_pic.url }}" class="rounded-circle avatar-img" height="28" width="28">
<textarea name="comment_post" class="textinput textInput animated fadeIn" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup=""></textarea>
<button type="submit" class="submit" id="submit1-{{post.id}}"><i class="fas fa-paper-plane"></i></button>
</form
</span>
Views:
def home_view(request):
#All posts in new feed
all_images = Post.objects.filter(
Q(poster_profile=request.user, active=True)|
Q(poster_profile__from_user__to_user=request.user, active=True)|
Q(poster_profile__to_user__from_user=request.user, active=True)|
Q(poster_profile__profile__friends__user=request.user, active=True)).distinct().exclude(
Q(hide_post=request.user, active=True)|
Q(poster_profile__profile__blocked_users__user=request.user, active=True))
#Comment form homepage
if request.method == 'POST':
post_id = request.POST.get("post_comment")
post_obj = Post.objects.get(pk=post_id)
form = CommentForm(request.POST)
if form.is_valid():
comment = form.save(commit=False)
comment.user = request.user
comment.commented_image = post_obj
comment.save()
# messages.info(request,'You submitted a comment')
#return redirect('/')
else:
form = CommentForm()
context = {
'form': form,
'all_images': all_images,
}
if request.is_ajax():
html = render_to_string('ajax_newfeeds_comments.html', context, request=request)
return JsonResponse({'form': html})
return render(request,'home.html', context)
Ajax:
<script type="text/javascript">
//HomeFeeds Comment
$(document).ready(function() {
$('.feeds-form').on('submit', onSubmitFeedsForm);
$('.feeds-form .textinput').on({
'keyup': onKeyUpTextInput,
'change': onKeyUpTextInput
});
function onKeyUpTextInput(event) {
var textInput = $(event.target);
textInput.parent().find('.submit').attr('disabled', textInput.val() == '');
}
function onSubmitFeedsForm(event) {
event.preventDefault();
console.log($(this).serialize());
var form = $(event.target);
var textInput = form.find('.textinput');
var hiddenField = form.find('input[name="post_comment"]');
$.ajax({
type: 'POST',
url: "{% url 'site:home' %}",
data: form.serialize(),
dataType: 'json',
beforeSend: function() {
form.find('.submit').attr('disabled', true);
},
success: function(response) {
$('#newfeeds-form' + hiddenField.val()).html(response.form);
textInput.val('');
var numberOfCommentsElement = $('#number-of-comments');
numberOfCommentsElement.text(parseInt(numberOfCommentsElement.text()) + 1);
},
error: function(rs, e) {
console.log(rs.resopnseText);
},
complete: function() {
textInput.trigger('change');
}
});
}
});
</script>

You don't need ajax actually, you can simply:
let value = $('myInput').val();
$('myCommentContainer').prepend(`
Format the comment as you want ${value}
`)
$('myInput').val('') // To empty the value
now call the ajax normally:
$({
type: 'POST',
url: "{% url 'site:home' %}",
data: form.serialize(),
dataType: 'json',
beforeSend: function() {
form.find('.submit').attr('disabled', true);
},
success: function(response) {}
})
Done, leave the success empty
appending it within the ajax success will make it slower anyway!

Login Ajax form not working, redirecting to another page

I have created a Ajax form to handle the errors in my login form, but instead of showing errors in the form area, it directs me to another page with the json error response
<div class="container-fluid bg-primary" id="login">
<div class="row">
<div class="col-lg-3 text-center">
</div>
<div class="col-lg-6 text-center">
<h1> </h1><h3> </h3>
<h2 class="section-heading">Login to your profile</h2>
<hr>
</div>
<div class="col-lg-3 text-center">
</div>
<h2> </h2>
<h2> </h2>
<h2> </h2>
</div>
<div class="col-md-4 col-md-offset-4 ">
<form id='loginform' action='/users/login/' method='post' accept-charset='UTF-8'>
{% csrf_token %}
<fieldset >
<div class="form-group">
<input type="text" name="mobile_number" id="mobile_number" tabindex="1" class="form-control" placeholder="Mobile Number" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Enter Password">
</div>
</fieldset>
<button type="submit" class="btn btn-primary btn-xl btn-block">LOG IN</button><br><br>
<span class="login-error"></span>
<h1> </h1><h1> </h1>
</form>
</div>
My ajax code
$("#loginform").on('submit', function(event) {
event.preventDefault();
alert("Was preventDefault() called: " + event.isDefaultPrevented());
console.log("form submitted!");
var url = "/users/login-ajax/";
$.ajax({
type: "POST",
url:url,
data: $("#loginform").serialize(),
success: function(data)
{
console.log(data);
var result = JSON.stringify(data);
if(result.indexOf('errors')!=-1 ){
console.log(data);
if(data.errors[0] == "Mobile number and password don't match")
{
$('.login-error').text("Mobile number and password don't match");
}
else if(data.errors[0] == "Entered mobile number is not registered")
{
$('.login-error').text("Entered mobile number is not registered");
}
}
else
{
window.open("/users/profile/");
}
//var result = JSON.stringify(data);
// console.log(result);
}
})
});
My code for the action in views.py
def login(request):
if request.method == 'POST':
mobile_number = request.POST.get('mobile_number', '')
password = request.POST.get('password', '')
data = {}
user_queryset = User.objects.filter(mobile_number=mobile_number)
if len(user_queryset) == 0:
data['error'] = []
data['error'].append("Entered mobile number is not registered")
# return JsonResponse(data)
elif len(user_queryset) == 1:
email = user_queryset[0].email
user = auth.authenticate(email=email, password=password)
if user is not None:
auth.login(request, user)
else:
data['error'] = []
data['error'].append("Mobile number and password don't match")
return JsonResponse(data)