Getting div content in realtime using jquery

JavaScript
1

Life savers,

please i need help in getting contents from a div into another div in real time and also how to get values from sessions and show it in another div in real time.

I have a div #messageLog as id and it gets its content in ajax call so the page never reloads, but div #shownewMessage is a static empty html div and i want to pass the ajax contents from #messageLog into #shownewMessage.

I did

var getnew = $('#messageLog').val();
$('#shownewMessage').html(getnew);

The above shows the content but only works when page reloads, and since #messageLog is using ajax to get its contents it makes the other div not to get the real time values since the page is not reloading.
please any work around on this?

also i have the same contents in session and can i write jquery function that will get those session values in realtime and put its contents in #shownewMessage div without page reload.
helps is highly appreciated.
Thanks.

2

Am considering using setInterval and set it to run every 10secs as to output the content but i dont if such looping while affect my website and loading speed?

3

I’ll move this to the Javascript section, as there is no PHP content in here.

4

You can use setInterval for this. I recommend an update time of 250ms which is enough to appear fast, without overly taxing the web browser.

var timer = setInterval(function () {
    var getnew = $('#messageLog').val();
    $('#shownewMessage').html(getnew);
}, 250);

Later on if you want to remove it you can use clearInterval:

clearInterval(timer);
1 Like
5

Hi @pandglobal, so #messageLog is an input element? In this case you can add a regular event listener; change events will not only get dispatched by user input, but also when setting the value with JS:

$('#messageLog').on('change', function () {
  $('#shownewMessage').html(this.value)
})

// Mocking AJAX updates...
setInterval(function () {
  $('#messageLog').val(Date.now())
}, 1000)

But then again, why don’t you just update the #shownewMessage HTML right within your AJAX callback where you are also setting the #messageLog value?

PS: BTW you can also monitor any DOM updates using a mutation observer; this would also work if #messageLog is not an input element:

var message = document.getElementById('shownewMessage')
var log = document.getElementById('messageLog')

var observer = new MutationObserver(function () {
  message.innerHTML = log.innerHTML
})

observer.observe(log, { childList: true })
6

Thanks alot was bothered about its effect on my site but now you confirmed am good at 250ms

7

I sincerely love this method, so lovely i will try it out now.

I which i can get this to work in getting a session variable.

I have a session variable $_SESSION [‘response’] and i don’t know how to read that content and get it to display in a html using JavaScript. So as to have the realtime change effect.

8

Am new to this flow, does it work in all browsers and can work with getting session variables too?

Thanks alot am grateful for your superb contributions

9

Yep, check the browser compatibility table in the link I provided… for convenience:

No, getting your server session variables is a different matter altogether; you’ll need to expose them to your frontend, and using AJAX would indeed be an option.

1 Like
10

okay thanks, but is there a thread on it already here on sitepoint so i can look at it but if not i can open a new thread on it and see if i can get help on it.

1 Like
11

Not one I’m immediately aware of, but there’s always the search function. :-)

12

Yes i used the search function but nothing related was found, but i have found the solution using ajax like you said.
Thanks

13

This method works for me.
but i want to know if it will hurt my site.

I first created a php function that pulls the session details.

then i run a Ajax call in jquery to call the function i created in php.

the i setinterval in jquery to 250ms as earlier suggested Here.

Every thing works fine but i will like to know regarding that php function being called every 250ms won’t it hurt my server, i understand jquery 250ms for event is okay but what am currious to know is if is okay too with php as it is okay with jquery on 250ms

14

Well if you experience a performance impact you can always increase the polling interval… how often is that session supposed to get updated though?

15

once any form in the site is submitted either contact, login or just any form, then a session for that form is opened and with other none sensitive data. so the jquery keeps checking the site to know when a form has opened for processing. then it run some functions based on data from the session

16

Am thinking something different now, incase there is a performance issue i will write different onclick function for each of the forms but thats lots of work though.
and then set the jquery to start running once the form is clicked and then i set a settime out function to halt the set interval.
Something like a count down if the script runs the check every 250ms after a button was clicked and then once it does that check for 90 times then i will call a function halt checking.

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.