Javascript (load and setInterval)?

Question

I have a function on the index page where the div #atualiza load on the home page.php and update in x time.

index php.

var auto_refresh = setInterval (function()
    {$('#atualiza').load('home.php');
    cache:false;
    return false;
},60000);

On the home.php page I have another script for users to put emoticons in posts.

home php.

<script type="text/javascript" src="js/jquery.emotions.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $(".postagem").emotions();
});

</script>

The problem is this when opening the index page for the first time everything works normal but when the div #atualiza if you update it no longer reads the script from the home page.php. I heard that load does not read the function ready jQuery, I searched and found no solution.

How do I make the home.php page function continue running? Thank you in advance!

Answer 1

The problem is quite simple in fact: the use of the resource $('.postagem').emotions(); must be asynchronous.

To solve your problem, every time div #atualiza is updated by the method .load(), you must reestablish the definition of .emotions() for .postagem. To do this, we’re going to tweak the way you update the #atualiza. So this is it:

var auto_refresh = setInterval (function()
    {$('#atualiza').load('home.php');
    cache:false;
    return false;
}, 60000);

You must turn this around:

var auto_refresh = setInterval (function () {
    $.ajax({
        url: 'home.php',
        success: function (response) {
            $('#atualiza').html(response);
            $('.postagem').emotions();
        }
    });
}, 60000);

In this case, I used the method .ajax jQuery to make a request of type GET - it is possible to view the property TYPE is therefore absent, .ajax assumes that the request is of the type GET (read more) - and the response (response) then is made available through the .html to the div #atualiza.

In less technical words, each time an update is made, the mechanism of .emotions() is recharged.

Regarding the use of $('.postagem').emotions() on dialling $(document).ready([...]);, you can and must keep, that is, keep the rest as you have so far and only change what has been given to you.

Heed!

You are using the function setTimeout() to make a temporal request and this practice is relatively bad because it generates several parallel requests - depending on the number of customers on your site or app - causing processing to be wasted for information traffic.

One option you have is to use websockets to keep a live connection between the application’s two terminals: the client and the server.