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 `` 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, Jan 11 '14 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, Jan 11 '14 at 15:54
you mean something like: http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id ? — Roko C. Buljan, Jan 11 '14 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, Jan 11 '14 at 15:56
@RokoC.Buljan <%request.getParameter("value");%> this returns a number. — Saumil, Jan 11 '14 at 15:58

Roko C. Buljan · Answer 1 · 2014-01-11T16:10:35.423

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 '14 at 16:10

answered Jan 11 '14 at 16:01

Roko C. Buljan

196,159
39
305
313

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 – Saumil Jan 11 '14 at 16:07
1

IDs should start with a letter in HTML. Should probably add a prefix to the number. – TiiJ7 Jan 11 '14 at 16:08
2

@TiiJ7 I was about to write that *ID starting with a number* and *containing only a number* is **perfectly valid** in **HTML5**. – Roko C. Buljan Jan 11 '14 at 16:09
@RokoC.Buljan I looked it up and you are correct. My bad then :) Ref: http://dev.w3.org/html5/markup/datatypes.html#common.data.id – TiiJ7 Jan 11 '14 at 16:11
@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 :) – Roko C. Buljan Jan 11 '14 at 16:13
@RokoC.Buljan I apologize for that, but now that you know can you tell me how to pass the value dynamically? – Saumil Jan 11 '14 at 16:17
@SaumilSoni dynamically ... on what event? You mean you have a timer that's calling your function? You can try to use `.html()` instead of `.append()` to make sure the old stuff is cleared before adding new things. And call your function `getPage()` inside that dynamic whatever of yours. – Roko C. Buljan Jan 11 '14 at 16:22
@RokoC.Buljan I'm planning to call my function through onload event within body tag – Saumil Jan 11 '14 at 16:41
@SaumilSoni Sorry, but... What's the issue you're encountering? – Roko C. Buljan Jan 11 '14 at 16:42
@RokoC.Buljan sorry for not expressing myself clearly. What I'm trying to do here is generate value 'count' in a servlet and transfer the value of 'count' by writing request.getRequestDispatcher("/pages_homepage.jsp? value="+count).forward(request, response); So within my jsp page I could get the value of count by writing request.getParameter("value"). Now I want to pass this value to my function as getPage('<%request.getParameter("value")%>'). Now I want to call the function by onload event. Now within the function I want to execute the 'for' loop 'match' number of times – Saumil Jan 11 '14 at 16:45
@RokoC.Buljan hey man thanks for your help, I have just posted an answer to my post. – Saumil Jan 12 '14 at 04:19

score 1 · Answer 2 · answered Jan 11 '14 at 16:37

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 '14 at 16:37

sanjeev

4,405
2
19
27

this has already been daiscussed in the OP's Q comments section :) – Roko C. Buljan Jan 11 '14 at 16:39

score 0 · Accepted Answer · answered Jan 12 '14 at 04:16

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.

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

3 Answers3