I want to change only <p> tag contents using javascript after a defined time delay. For example a

<p>messages</p>

should change depending on the no. of new messages came. As

<p>messages(1)</p>
<p>messages(2)</p>

I want to change only <p> tag contents using javascript after a defined time delay. For example a

<p>messages</p>

should change depending on the no. of new messages came. As

<p>messages(1)</p>
<p>messages(2)</p>

• javascript
• time
• tags
• delay
• paragraph

• 1 Where do these new message come from? How do you know they've arrived? I think that you don't really want a "time-delay" but should focus on tying the update into the code where the new messages are retrieved. – tvanfosson Commented Feb 18, 2012 at 12:55
• new messages are retrieved from the database using a JSP function that checks database for new messages. – Aishwarya Shiva Commented Feb 18, 2012 at 12:57
• Does the JSP function render some javascript the will update the page later or does it simply run each time the page is rendered. Are you looking for a way to re-run the JSP function periodically? If you want to update the page without a full request cycle, you'll need to use some AJAX to call back to the server. It's in the AJAX callback that you'll want to update your text. – tvanfosson Commented Feb 18, 2012 at 13:08
• Ya @tvanfosson I want that a JSP function should be called after a defined time limit and it will return an integer value that will be appended to the <p> tag content -> messages. – Aishwarya Shiva Commented Feb 18, 2012 at 13:11
• 1 But the JSP is executed server-side. What you need is some javascript that runs periodically and calls a server method via AJAX to get the updated data. The client has no way of running your JSP code (it doesn't even see it) directly. – tvanfosson Commented Feb 18, 2012 at 13:14

3 Answers 3

Write your <p> as:

<p class="messages">messages</p>

Your javascript:

function updateMessages() {
    var ps = document.getElementsByClassName("messages");
    for(var i = 0, len = ps.length; i < len; i++) {
        ps[i].innerHTML = "messages (" + messageCount + ")";
    }
}

setTimeout(updateMessages, 1000);

Where 1000 is the number of milliseconds to delay.

Or if you want to do it periodically every 15 seconds, you can use setInterval:

setInterval(updateMessages, 15000);

UPDATE:

I see your comment above:

new messages are retrieved from the database using a JSP function that checks database for new messages

In that case, I gather you want to retrieve that periodically, in effect polling that URL? If you already use a javascript framework, I suggest you look at their AJAX documentation.

$(document).ready({
 function updatePara() {        
      $('p').html('Content to set in para');
    }
 });

setTimeout(updatePara, no.of milisecond to delay);

jQuery make dom manipulation much easy :) The above code changes content of all the paragraph, So better to give the desired paragragh <p></p> some call name then filter the para to update with those name i.e $('p.classname').html('your content') OR $('.classname').html('Your content')
jQuery is AWESOME !!! :)

You can use setTimeout function:

var delay = 1000; // 1 second
setTimeout(function() {
  var pNodes = document.getElementsByTagName('p');
  for (var i=0, length=pNodes.length; i < length; i++) {
    pNodes[i].innerHTML = pNodes[i].innerHTML+"("+ (i+1) +")";
  }
}, delay);

getElementsByTagName is used just for example. The way of retrieving pNodes depends on structure of your html code.