JSP + Dynamic CSS on button click

Question

I am trying to create a jsp page that generates a list of questions. The questions are received from the database correctly and the appropriate div is created. There are 55 questions.

What i want to do is make only the first questionDiv visible and set the rest hidden. Then on the submit button click the current question [1] is hidden and the question [2] is made visible.

Nothing i try in the javascript seems to have any affect. Can someone please point me in the right direction?

                <div id="questionContainer">
                    <%                        for (int ques = 1; ques < 56; ques++) {
                            out.println("<div id ='question" + ques + "' name='question" + ques + "'class='questionVisible'>");
                            out.println("<h2 class='page-header'>Question" + ques + "</h2>");
                            if (iterate.hasNext()) {

                                //out.println(row[0]);
                                //out.println(row[1]);                                                                                   
                                //out.println(row[0]);
                                String[] row = (String[]) iterate.next();
                                if (row[0].equals("1")) {
                                    out.println("<p id='question'>" + row[1] + "</p><br/>");
                                    out.println("<p id='ansA'><input type='radio'  name='answer" + ques + "' value='A' checked>" + row[2] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='B' checked>" + row[3] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='C' checked>" + row[4] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='D' checked>" + row[5] + "</p>");
                                    out.println("<button class='btn' id='btnPAQues" + ques + "' type='button' name='btnPAQues" + ques + "' onclick='onSubmitBtn();'>Submit</button>");
                                } else if (row[0].equals("2")) {
                                    out.println("<p id='question'>" + row[1] + "</p><br/>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='A' checked>" + row[2] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='B' checked>" + row[3] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='C' checked>" + row[4] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='D' checked>" + row[5] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='E' checked>" + row[6] + "</p>");
                                    out.println("<button class='btn' id='btnPAQues' type='submit' name='submit' onsubmit='onSubmitBtn'>Submit</button>");
                                } else if (row[0].equals("3")) {
                                    out.println("<p id='question'>" + row[1] + "</p><br/>");
                                    out.println("Answer: <p id='ansA'><input type='text' name='answer" + ques + "'</p><br/><br/>");
                                    out.println("<button class='btn' id='btnPAQues' type='submit' name='submit' onsubmit='onSubmitBtn'>Submit</button>");
                                }
                            }
                            out.println("</div>");
                        }
                    %>

                </div>


<script>

for(int x= 2; x <56; x++)
{
     document.getElementById("question"+x).style.visibility = "questionHidden;";
}

    document.getElementById("btnPAQues1").onclick = onSubmitBtn();
    function onSubmitBtn() {
        document.getElementById("question1").style.visibility = "hidden;";
    }
</script>

Taha · Accepted Answer · 2016-06-13 17:20:37Z

1

try this idea : firstly display all the questions add a div to each question

<div class="trigger" > <p id="question">...Submit</button> </div>

then add this JS code :

$(".trigger:first").show();

$("button").click(function() {
    var $next = $(".trigger:visible").hide().next(".trigger");
    if (!$next.length)
        $next = $(".trigger:first");

    $next.show();
});

example : http://jsfiddle.net/huH7p/9/

answered Jun 13, 2016 at 17:20

Taha

1,2922 gold badges17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LF13 Over a year ago

This works in the example, but it doesn't work when implemented on the page. Could the jsp generating the html somehow prevent javascript from interacting with the elements?

Taha Over a year ago

Normaly no put JS code before </body> tag in <script > tag

LF13 Over a year ago

I tried putting it at the end before the body and above in the header. Neither work. I also can't get the jsfiddle example to work straight copy pasted into a new jsp page. Could netbeans, Tomcat, jsp have a problem with the way this works?

LF13 Over a year ago

I found the solution. There was an additional ' that was causing a problem. Thank you for your help, it did in fact work.

markbernard · Accepted Answer · 2016-06-13 14:49:09Z

0

Don't use Javascript to write out the questions. Place all the questions in standard HTML with a CSS class that makes them initially hidden, except question one. Then on each submit make the appropriate one visible while hiding the previous one.

Can you use web services? The common way to do this is use the JSP to set up the page, then use Javascript to call web services for each question. So when the page loads call for the first question. When the user clicks submit call for the next one. And so on.

edited Jun 13, 2016 at 14:49

answered Jun 13, 2016 at 14:43

markbernard

1,4099 silver badges19 bronze badges

6 Comments

LF13 Over a year ago

Ideally I would prefer not to. Any idea if it is possible without web services?

LF13 Over a year ago

This would mean that if any questions are change or upated, or the number increased or decreased there would be extensive code manipulation needed. Hence the use of a database and dynamic creation of questiondivs

markbernard Over a year ago

Sorry when I looked at your code it looked like the Javascript was writing out the questions. Are you doing a round trip for each question?

LF13 Over a year ago

I am getting a result set which is being sent through to the page as a vector. Then creating an iterator to use the vector accordingly. Reading each line, the (each set of 8 is a question, the first is a type indicator) and printing an appropriate div.

Taha Over a year ago

row is an array in [0]: contain the number of question [1]:the question [2]:choice 1 [3]:choice 2 ... ?

|

Collectives™ on Stack Overflow

JSP + Dynamic CSS on button click

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related