How can I modularize this code to reuse the AJAX in different HTML files without needing to rewrite it each time?
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editar Aula</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Editar Aula</h2>
<!-- Formulário Principal -->
<form id="form-editar-aula" method="POST" enctype="multipart/form-data" action="{% url 'editar_aula' pk=plano.id %}">
{% csrf_token %}
<!-- Dados da Aula -->
{{ form.as_p }}
<!-- Lista de Arquivos Existentes -->
<h3>Arquivos já adicionados:</h3>
<ul id="lista-arquivos">
{% for arquivo in arquivos_existentes %}
<li id="arquivo-{{ arquivo.id }}">
{% if arquivo.arquivo %}
<a href="{{ arquivo.arquivo.url }}" target="_blank">{{ arquivo.arquivo.name }}</a>
{% else %}
<span>Arquivo não disponível</span>
{% endif %}
<button type="button" class="excluir-arquivo" data-id="{{ arquivo.id }}" style="color: red;">Excluir</button>
</li>
{% empty %}
<li>Nenhum arquivo adicionado ainda.</li>
{% endfor %}
</ul>
<!-- Formulário de Arquivos -->
<h3>Adicionar Arquivo</h3>
<input type="file" name="arquivo" id="input-arquivo" multiple>
<!-- Botão Salvar Alterações -->
<button type="submit" name="salvar_aula">Salvar Alterações</button>
</form>
<script>
$(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(
`<li id="arquivo-${novoArquivo.id}">
<a href="${novoArquivo.arquivo}" target="_blank">${novoArquivo.nome}</a>
<button type="button" class="excluir-arquivo" data-id="${novoArquivo.id}" style="color: red;">Excluir</button>
</li>`
);
},
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.');
}
});
});
});
</script>
</body>
</html>
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?