I'm working on a web application where I'm using CKEditor to allow users to input questions and multiple-choice options. I'm trying to save this data to a MSSQL database via a Java Servlet.
Here’s what’s happening:
The data is being sent from the frontend using an AJAX request.
The servlet processes the request and returns a "Data saved successfully!" message.
However, when I check the database, the data isn’t actually saved.
Here’s the code I’m using in the servlet:
@WebServlet("/SubmitExamServlet")
public class SubmitExamServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String examTitle = request.getParameter("title");
String subject = request.getParameter("subject");
String question = request.getParameter("question");
String option1 = request.getParameter("option1");
String option2 = request.getParameter("option2");
String option3 = request.getParameter("option3");
String option4 = request.getParameter("option4");
int correctOption = Integer.parseInt(request.getParameter("correctOption"));
String DB_URL = "jdbc:sqlserver://THE_NOOB_BANANA;Database=ExamPortal;encrypt=false;integratedSecurity=true";
try {
Connection conn = DriverManager.getConnection(DB_URL);
String sql = "INSERT INTO ExamQuestions (ExamTitle, Subject, QuestionText, Option1, Option2, Option3, Option4, CorrectOption) VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
PreparedStatement stmt = conn.prepareStatement(sql);
stmt.setString(1, examTitle);
stmt.setString(2, subject);
stmt.setString(3, question);
stmt.setString(4, option1);
stmt.setString(5, option2);
stmt.setString(6, option3);
stmt.setString(7, option4);
stmt.setInt(8, correctOption);
stmt.executeUpdate();
conn.close();
response.sendRedirect("success.jsp");
} catch (SQLException e) {
e.printStackTrace();
response.sendRedirect("error.jsp");
}
}
}
And my jsp script:
<script>
function initializeCKEditors() {
var editorConfig = {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML'
};
function suppressNotification(editor) {
editor.on('instanceReady', function () {
editor.showNotification = function (message, type) {
if (message.id !== 'editor-is-not-secure') {
return this.showNotification.original.call(this, message, type);
}
};
editor.showNotification.original = editor.showNotification;
});
}
var questionEditor = CKEDITOR.replace('question', editorConfig);
suppressNotification(questionEditor);
var option1Editor = CKEDITOR.replace('option1', editorConfig);
suppressNotification(option1Editor);
var option2Editor = CKEDITOR.replace('option2', editorConfig);
suppressNotification(option2Editor);
var option3Editor = CKEDITOR.replace('option3', editorConfig);
suppressNotification(option3Editor);
var option4Editor = CKEDITOR.replace('option4', editorConfig);
suppressNotification(option4Editor);
}
function sendDataToServlet() {
// Collecting the correct option value
var correctOption = $("input[name='correctOption']:checked").val();
$.ajax({
type: 'POST',
url: 'SubmitExamServlet',
data: {
question: CKEDITOR.instances.question.getData(),
option1: CKEDITOR.instances.option1.getData(),
option2: CKEDITOR.instances.option2.getData(),
option3: CKEDITOR.instances.option3.getData(),
option4: CKEDITOR.instances.option4.getData(),
correctOption: correctOption
},
success: function(response) {
alert('Data saved successfully!');
},
error: function() {
alert('An error occurred while saving the data.');
}
});
}
document.addEventListener('DOMContentLoaded', function() {
initializeCKEditors();
// Bind the AJAX submission to the publish button
document.querySelector('.publish-btn').addEventListener('click', function(event) {
event.preventDefault();
sendDataToServlet();
});
});
</script>
Am I not getting the data right from the CKEditor?
Here’s what I’ve tried/checked:
The database connection string and credentials are correct.
No exceptions or errors are being caught in the servlet.
I fixed it, how i used the getData() method was correct I had to send all the data through AJAX properly that was all and get them in the servlet.
$.ajax({
type: 'POST',
url: 'SubmitExamServlet',
data: {
title: examTitle,
subject: $('#subject').val(),
question: CKEDITOR.instances.question.getData(),
option1: CKEDITOR.instances.option1.getData(),
option2: CKEDITOR.instances.option2.getData(),
option3: CKEDITOR.instances.option3.getData(),
option4: CKEDITOR.instances.option4.getData(),
correctOption1: $("input[name='correctOption1']").is(':checked') ? "1" : "0",
correctOption2: $("input[name='correctOption2']").is(':checked') ? "1" : "0",
correctOption3: $("input[name='correctOption3']").is(':checked') ? "1" : "0",
correctOption4: $("input[name='correctOption4']").is(':checked') ? "1" : "0"
},
success: function(response) {
console.log('Data saved successfully!');
resetFormAndEditors();
},
error: function() {
console.log('An error occurred while saving the data.');
}
});