Appended jQuery script not working on Safari (Mac)

Question

I found a weird problem.

I'm making first step to comet with my webapp. Long story short, I have a nice little script that polls another scripts which are sent by php controller.

Later on, i would work on both ways. Either as longpolling or just like it works now - on javascript intervals.

How it works on Chrome: On "ready" event first script sets an interval on function which sends an ajax request to controller (let's name it 'ping.php'). If ajax is made with success, msg should replace the html content of the div#wrapperForJs.

Ping.php checks database for updates and if it meet one script result with the script echo.

Text above was for humanists, now tl;dr:

jQuery code:

function pingThatApp(){
$.ajax({
        type: 'GET',
        url: '/ping', 
        success: function(msg){
            $('#pingWrapper').html(msg);
        }
    });
}
$(document).ready(function(){
window['pingLoop'] = setInterval(
    function(){
        pingThatApp(); 
    },4000
   );     
});

PHP echo:

$timeScrpt = '<script>';
    foreach ($timers['p'] as $k => $v) {
        $timeScrpt .= "$('#project-{$k} .pTime').fadeOut().attr('title', 'Time spent already: {$v}').html('{$v_short}').fadeIn();";

    }
    foreach ($timers['t'] as $k => $v){
        $timeScrpt .= "$('#timeSpent-task-{$k} b').fadeOut().html('{$v}').fadeIn();";
    }
    $timeScrpt .= '</script>';

Everything works great on Chrome. However Safari has some problems with that script. The problem looks like Safari can't find the jQuery objects.

I made some console.log test, checked the code - output looks good.

If I change the $k var and hardcode it with some int or overwrite the $k var in beggining of the iteration, it works on Safari also (jQuery finds the element).

I also make the console.log test with length of found elements:

el = $('#project-$k .pTime'); console.log(el.length);

Chrome outputs something like (0,0,0,1,1,1,0) [0 not found, 1 - found0 Safari always outputs 0s.

I writing here because have no idea what's going on with that precious browser. Maybe someone here has any solution.

And please, don't try to convince me that intervals are no good for data update purpose. I know that, hovever for now it's the best what I can implement.

"And please, don't try to convince me that intervals are no good for data update purpose." facepalm Your polling will never work correctly using setInterval(). This isn't a suggestion, it's just the correct way to implement it. — Brad M
Like I said before. I won't discuss that problem. It works on Chrome, Firefox, Opera Mobile. It don't properly on Safari. — sznowicki

Brad M Brad M · Accepted Answer · 2013-03-18T19:42:01

Safari (some versions of it) will simply not execute javascript code that is injected into the DOM. You can either use the dangerous eval() or put the javascript inside your ajax callback and modify it based upon either text/json you receive back from the server.

Appended jQuery script not working on Safari (Mac)

2 Answers