8

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>
Christofer Eliasson
  • 32,939
  • 7
  • 74
  • 103
Aishwarya Shiva
  • 3,460
  • 15
  • 58
  • 107
  • 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 Feb 18 '12 at 12:55
  • new messages are retrieved from the database using a JSP function that checks database for new messages. – Aishwarya Shiva Feb 18 '12 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 Feb 18 '12 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

    tag content -> messages.

     – Aishwarya Shiva Feb 18 '12 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 Feb 18 '12 at 13:14
  • Thanks really nice comment :) and can you suggest me something that can help me in doing this?? some code, tutorial or something..?? – Aishwarya Shiva Feb 18 '12 at 13:15
  • Look at the ajax tutorials on http://jquery.com – tvanfosson Feb 18 '12 at 13:24
  • Aishwarya: When you say "a JSP function", do you mean that you have a `URL` where you can retrieve the number of messages? – Linus Thiel Feb 18 '12 at 13:27
  • ya and it may be a servlet also – Aishwarya Shiva Feb 18 '12 at 13:33

3 Answers3

10

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.

Linus Thiel
  • 38,647
  • 9
  • 109
  • 104
  • 1
    `document.getElementsByClassName` returns a `NodeList` which doesn't have a `text()` method. Perhaps you meant to iterate over the `NodeList` or take the first item in it and assign to `textContent`? – Chris Morgan Feb 18 '12 at 13:00
  • Thanks a lot Linus and Chris but I want to call a JSP function that returns the no. of messages. How can I do that? I mean calling a JSP function using javascript?? – Aishwarya Shiva Feb 18 '12 at 13:05
  • Thanks Chris, I realized that after I had (incorrectly) rewritten my previous jQuery version. I have updated it accordingly. – Linus Thiel Feb 18 '12 at 13:24
3
$(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 !!! :)

Vivek
  • 661
  • 1
  • 12
  • 23
2

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.

Molecular Man
  • 22,277
  • 3
  • 72
  • 89