I separated my JavaScript code from the .html file and placed it in a static folder, then imported it. However, after this change, my AJAX stopped working. How can I make my ajax.js reusable across different pages without rewriting it?
This was the working code that handled the editing of classes, receiving, and processing files.
I should mention that I’m working on a Django project, and this is the first JS file I’m including in the project. The idea of separating it is so that the same AJAX functionality can be used for the adicionar_aula URL.
Here is the code:
`
Editar Aula
Editar Aula
{% csrf_token %}
{{ form.as_p }}
Arquivos já adicionados:
{% for arquivo in arquivos_existentes %}
{% if arquivo.arquivo %}
{{ arquivo.arquivo.name }}
{% else %}
Arquivo não disponível
{% endif %}
Excluir
{% empty %}
{% endfor %}
Adicionar Arquivo
Salvar Alterações
$(document).ready(function() {
// Enviar novos arquivos via AJAX
$(‘#input-arquivo’).on(‘change’, function() {
var formData = new FormData();
$.each($(this)[0].files, function(i, file) {
formData.append(‘arquivo’, file);
});
formData.append(‘csrfmiddlewaretoken’, ‘{{ csrf_token }}’);
$.ajax({
url: ‘{% url “editar_aula” pk=plano.id %}’, // URL para a view de edição
type: ‘POST’,
data: formData,
processData: false,
contentType: false,
success: function(response) {
// Adicionar o novo arquivo na lista de arquivos sem recarregar a página
var novoArquivo = response.novo_arquivo; // Espera-se que a view retorne os dados do novo arquivo
$(‘#lista-arquivos’).append(
`
${novoArquivo.nome}
Excluir
`
);
},
error: function(xhr, status, error) {
alert(‘Ocorreu um erro ao enviar o arquivo. Tente novamente.’);
}
});
});
// Excluir arquivos via AJAX
$(document).on(‘click’, ‘.excluir-arquivo’, function() {
var arquivoId = $(this).data(‘id’);
var listItem = $(this).closest(‘li’);
$.ajax({
url: ‘{% url “excluir_arquivo” %}’, // URL para a view de excluir arquivo
type: ‘POST’,
data: {
‘arquivo_id’: arquivoId,
‘csrfmiddlewaretoken’: ‘{{ csrf_token }}’
},
success: function(response) {
// Remover o arquivo da lista após exclusão
listItem.remove();
},
error: function(xhr, status, error) {
alert(‘Ocorreu um erro ao excluir o arquivo. Tente novamente.’);
}
});
});
// Submeter o formulário de edição de aula via AJAX
$(‘#form-editar-aula’).on(‘submit’, function(event) {
event.preventDefault();
var formData = new FormData(this);
$.ajax({
url: $(this).attr(‘action’),
type: ‘POST’,
data: formData,
processData: false,
contentType: false,
success: function(response) {
alert(‘Alterações salvas com sucesso!’);
window.location.href = ‘/’; // Redireciona para a página inicial após o sucesso
},
error: function(xhr, status, error) {
alert(‘Ocorreu um erro ao salvar as alterações. Tente novamente.’);
}
});
});
});
`
I separated the AJAX, created an ajax_arquivos.js file, and imported it into the HTML. After separating it, none of the AJAX functionalities are working, although the file is imported correctly, and I haven’t noticed anything unusual in the console.
So, how can I modularize this code to reuse the AJAX in different HTML files without needing to rewrite it each time?