Question

I’m creating a wall that, should look and act like Facebook’s wall. The problem I’m facing is, that I would like to make it able to comment on posts. But I can’t seem to figure out, how to make a comment form appear (a input field with type=text) to the posts.

So I have a block of code to print out all posts and the following comments from the database to the site through a while loop. But I don’t know how to make it print a line with a button to create a input form onclick.

The code is below, first the Danish-English translation:

• beskeder = the table in my MySQL database containing the posts
• kommentarer = the table in my MySQL database containing comments to the posts
• navn = name
• besked = message
• kommentar = comment

The JSP code:

<%
    if (wallrs != null) {
        while(wallrs.next()) {
%>
            <br><b><%=wallrs.getString("navn")%></b>
            <br><%=wallrs.getString("besked") %>
<%
            int wallrsid = wallrs.getInt("id");
            dbconnect.getKommentarResultset(wallrsid);
            ResultSet kommentarrs = dbconnect.getKommentarRS();

            if (kommentarrs != null) {
                while (kommentarrs.next()) {
%>
                    <Blockquote>
                        <b><%=kommentarrs.getString("navn") %>:</b>
                        <br><%=kommentarrs.getString("kommentar") %>
                    </Blockquote>
<%
                }
            }
%>
            <form id="besked<%= wallrsid%>"></form>
            <button type="submit" onclick="show_form()">Kommenter</button>
<%
        }
    }
%>

The JavaScript function it’s linking to:

function show_form() {
    document.getElementById("besked").innerHTML = "<input type=text value=Skriv>";
}

The JavaBean:

public void createMessage(String besked, String ip) {
    try {
        PreparedStatement pstmcreateMessage = con.prepareStatement("INSERT INTO beskeder(navn, besked, ip) VALUES(?,?,?)");
        pstmcreateMessage.setString(1, getName());
        pstmcreateMessage.setString(2, besked);
        pstmcreateMessage.setString(3, ip);
        pstmcreateMessage.executeUpdate();
        System.out.println("SUCCES! ");
    } catch(Exception e) {
        e.printStackTrace();
        System.out.println("Can't create message");
    }
}

public void createComment(String kommentar, String ip, int beskedid) {
    try {
        PreparedStatement pstmcreateComment = con.prepareStatement("INSERT INTO kommentarer(navn, kommentar, ip, beskedid) VALUES(?,?,?,?)");
        pstmcreateComment.setString(1, getName());
        pstmcreateComment.setString(2, kommentar);
        pstmcreateComment.setString(3, ip);
        pstmcreateComment.setInt(4, beskedid);
    } catch(Exception e) {
        e.printStackTrace();
        System.out.println("Can't create comment");
    }
}

// Returner hele væggen i et result set
private ResultSet wallRS;
public void getWallResultset() {
    PreparedStatement getWall;
    try {
        getWall = con.prepareStatement("SELECT * FROM beskeder");
        wallRS = getWall.executeQuery();
    } catch (SQLException e) {
        System.out.println("Error in resultset wall rs");
        // e.printStackTrace();
    }
}

public ResultSet getWallrs() {
    return wallRS;
}

// Returner kommentarer
private ResultSet kommentarRS;
public void getKommentarResultset(int beskedid) {
    PreparedStatement getComment;
    try {
        getComment = con.prepareStatement("SELECT * FROM kommentarer WHERE beskedid=?");
        getComment.setInt(1, beskedid);
        kommentarRS = getComment.executeQuery();
    } catch(Exception e) {
        e.printStackTrace();
    }
}

public ResultSet getKommentarRS() {
    return kommentarRS;
}

As you see the form with id="besked" isn’t unique, so I can’t make them show individually. How can I solve it?

Answer 1

You’d need to pass the form ID to the JS function so that it can locate the right form.

Replace

<button type="submit" onclick="show_form()">Kommenter</button>

by

<button onclick="show_form('besked<%= wallrsid%>')">Kommenter</button>

and replace

function show_form() {
    document.getElementById("besked").innerHTML = "<input type=text value=Skriv>";
}

by

function show_form(id) {
    document.getElementById(id).innerHTML = '<input type="text" name="kommentar" value="Skriv">';
}

---

Unrelated to the concrete problem, scriptlets are considered poor practice and your JDBC code is leaking DB resources.