How to dynamically add the content in jsp page using javascript?

Question

MyServlet forwards to Mypage.jsp as

request.getRequestDispatcher("/pages_homepage.jsp?value="+count).forward(request, response);

where count is an integer value generated

Below is my JSP code(Mypage.jsp),

<body  onload="getPage('<%request.getParameter("value");%>')">
    <div id="app"></div>
</body>

Below is my javascript code,

function getPage(match){
    var arr = new Array();
    var ele = document.getElementById('app');
    for(var i=0;i<match;i++){
        var newdiv = document.createElement("label");
        newdiv.id = arr[i];
        newdiv.value="Page";
        ele.appendChild(newdiv);
    }
}

What I want is that, I want 'Page' to be displayed 'match' number of times. But I'm not being able to do so by the above code. Their might be something wrong with my js code. Can anyone suggest me any corrections? Thanks in advance.

What is arr ? what should it contain? Interesting your nomenclatures, you named a var newdiv that actually is a <LABEL> element and you're trying to add a value attribute to a label element and an ID from an empty array.... Can you please enlighten us? — Roko C. Buljan
– Roko C. Buljan, Commented Jan 11, 2014 at 15:50
@RokoC.Buljan I was trying something to give an unique id to newdiv, but I know I have have written a messed up code. Can you suggest anything for it? — Saumil
– Saumil, Commented Jan 11, 2014 at 15:54
you mean something like: stackoverflow.com/questions/10126395/… ? — Roko C. Buljan
– Roko C. Buljan, Commented Jan 11, 2014 at 15:54
What is returned by <%request.getParameter("value");%>? Can you please preformulate your question and make it more clear about what you actually want? — Roko C. Buljan
– Roko C. Buljan, Commented Jan 11, 2014 at 15:56
@RokoC.Buljan <%request.getParameter("value");%> this returns a number. — Saumil
– Saumil, Commented Jan 11, 2014 at 15:58

Roko C. Buljan · Accepted Answer · 2014-01-11 16:10:35Z

4

LIVE DEMO

Taking in consideration that your page has something like:

<body  onload="getPage(5)">

function getPage(n) {

   var ele = $('#app');
   var labels = ""; // An empty string will be populated with labels elements:
   for(var i=0; i<n; i++){
       labels += '<label id="'+ i +'"> Page </label>'
   }
   ele.append( labels ); // append only once outside the loop!

}

The result will be:

 <label id="0"></label>
 <label id="1"></label>
 <label id="2"></label>
 <label id="3"></label>
 <label id="4"></label>

If you want to start from 1 instead of 0 use:

labels += '<label id="'+ (i+1) +'"> Page </label>'

_{Note: ID starting with (/ containing only) a number - is only valid in HTML5}

edited Jan 11, 2014 at 16:10

answered Jan 11, 2014 at 16:01

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

11 Comments

Saumil Over a year ago

yep your demo works perfectly fine, but the only thing is that I want to dynamically send a value to the function 'getPage(num)'. I have updated my question

TiiJ7 Over a year ago

IDs should start with a letter in HTML. Should probably add a prefix to the number.

Roko C. Buljan Over a year ago

@TiiJ7 I was about to write that ID starting with a number and containing only a number is perfectly valid in HTML5.

TiiJ7 Over a year ago

@RokoC.Buljan I looked it up and you are correct. My bad then :) Ref: dev.w3.org/html5/markup/datatypes.html#common.data.id

Roko C. Buljan Over a year ago

@SaumilSoni you want to dynamically send a value... you did not stated that inside your question (or I don't understand JSP) but instead you showed us you use a body onload handler... Than don't use the onload :)

|

sanjeev · Accepted Answer · 2014-01-11 16:37:13Z

1

Your Code is working and i have tested it

Since you don't have any content in the label tag hence it is not visible in browser

Secondly a small error in 6th line of js code

       newdiv.id = arr[i];

arr[i] is not given any value hence change it with

        newdiv.id = i;

enjoy your code

answered Jan 11, 2014 at 16:37

sanjeev

4,6512 gold badges22 silver badges28 bronze badges

1 Comment

Roko C. Buljan Over a year ago

this has already been daiscussed in the OP's Q comments section :)

Saumil · Accepted Answer · 2014-01-12 04:16:16Z

0

Thanks everyone for their help but I think I got the answer,

Instead of

<body  onload="getPage('<%request.getParameter("value");%>')">

I wrote,

<body onload="getPage('<%=Integer.parseInt(request.getParameter("value"))%>')">

But thanks everyone again for their useful pointers.

answered Jan 12, 2014 at 4:16

Saumil

2,5176 gold badges34 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to dynamically add the content in jsp page using javascript?

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related