It would be quite impressive if you could provide an answer to my current dilemma. Currently, I am developing a full stack web application that comprises of three main components:
- A collection of Articles stored in MongoDB
- A backend developed in Java 8
- A front end implemented in JavaScript
The functionality of the program should follow this sequence:
- The user accesses the webpage and enters text into a form specifying the title, authors, genre, and content.
- Upon clicking the "addArticle" button, the data should be serialized into raw JSON and sent to the addArticle endpoint.
- The data is then sanitized and submitted to the database as an article.
I am encountering multiple issues, which are as follows:
Despite having
in place, JavaScript keeps refreshing the page when I click the submit button.$(document).on("submit", "#add-Article", function(e) {e.preventDefault();}It seems like the endpoint is not being hit at all.
No data is being saved in the database.
What I know works and what I have attempted:
I have successfully tested adding to the "articles" collection through Postman.
I have confirmed that JavaScript is connected by placing an alert at the beginning of main.js.
After extensive research, I have discovered that I can use plain JavaScript to perform tasks like "articles.save" on the front end. However, I want the data to be processed through Java for sanitation and ObjectIds incrementation.
Relevant code snippets:
Form
<form id="add-article">
<input type="text" id="title"/>
<label for="title">Title </label>
<input type="text" id="authors"/>
<label for="authors">Author(s) </label>
<input type="text" id="genre"/>
<label for="genre">Genre </label>
<input type="text" id="content"/>
<label for="content">Content </label>
<button id="addArticle">Submit Article for Peer Review</button>
</form>JavaScript
alert('JS is linked to page!');
// JavaScript code block
Controller Endpoint
`@RestController
@RequestMapping("/articles") public class ArticleController { // Java code block
Having struggled with this issue for more than a day, any assistance would be greatly appreciated. I suspect there might be an issue with the JavaScript implementation.