javaajaxjspservletsckeditor

Data saving from ckeditor appears empty in my database even when successfull


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.


Solution

  • 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.');
            }
            
        });