This and ajax

[Igor-Yavych]

Hello. So designer used your plugin (which is nice, thank you for your work) but I've encountered a problem. When I load things it uses with AJAX for the first time, it works fine. But after that, after all subsequent AJAX calls, it throws 'Calling "value" method on not initialized instance is forbidden'. What should I do in this case?

[kottenator]

Hi!

You should find where the circle is initialized and make sure that it's before your AJAX call.

I can't tell you more because the problem is specific to your code. You may create some code snippet (demo) that reproduces your case.

[Igor-Yavych]

Hi, thanks for replying. Code for animation initialization is below, it was written by designer. Our page, due to calls to essential API that can take a bit to process is loaded with just HTML . On document.ready, AJAX call is fired to get the data from this API. So if I call initCircleProgress after (if I call it before, nothing happens) I insert HTML from AJAX response for the first time, it works perfectly. Then, we have another AJAX call, which replaces previous data on demand. If I call initCircleProgress after I insert HTML from this response, I get the error. If I don't call it - nothing happens.

function initCircleProgress()
{
    var win = jQuery(window);
    jQuery('.circle').each(function ()
    {
        var circle = jQuery(this);
        var
                progress = circle.find('.percentage'),
                startValue = parseFloat(circle.attr('data-start-value')),
                value = parseFloat(circle.attr('data-value')),
                color = circle.attr('data-color'),
                fractionalNum = circle.attr('data-fractional-num'),
                fraction = parseInt(circle.attr('data-fraction')) || 0;

        circle.circleProgress({
            value: startValue,
            size: 162,
            startAngle: 4.7,
            emptyFill: 'rgba(255, 255, 255, .2)',
            fill: {
                color: color
            }
        });

        circle.on('circle-animation-progress', function (event, animationProgress, stepValue)
        {
            if (!fractionalNum)
            {
                progress.html((stepValue * 100).toFixed(fraction) + '%');
            }
            else
            {
                progress.html((stepValue * 100 / 20).toFixed() + '/5');
            }
            ;
        });

        var animationCall = function ()
        {
            if (circle.offset().top - win.scrollTop() < win.height())
            {
                circle.circleProgress('value', value);
                win.off('scroll', animationCall);
            }
        };
        win.on('scroll load', animationCall);
    });
}

[kottenator]

I'd be great to see what you do with AJAX and how do you insert HTML from it (and call initCircleProgress)

[Igor-Yavych]

Just simple

$('#results-container').html(e.html);    
initCircleProgress();

[kottenator]

what's in e.html? (after first and after second AJAX call)

[Igor-Yavych]

Response from ajax call

$.ajax({type: "post", dataType: "json", url: mc_grader_ajax_object.ajax_url, data: request}).done(function (e)
{
    $('#results-container').html(e.html);    
    initCircleProgress();
}

[kottenator]

Could you show the e.html content from both calls?

[Igor-Yavych]

They're exactly the same. Relevant part looks like this.

<div class=\"circle\" data-start-value=\"0\" data-value=\"0\" data-color=\"#FC393C\" data-fraction=\"0\" data-fractional-num>
    <span style=\"background: #FC393C;\" class=\"percentage rating-value\">0%<\/span>
<\/div>

[kottenator]

I see a problem with your initCircleProgress. You do:

function initCircleProgress() {
  // ...
  win.on('scroll load', animationCall);
}

On the first run everything is fine.
But after second AJAX call you replace old circles (HTML) with new ones.
But the event handlers for the old circles are still running.
Probably that's the case.

[kottenator]

And BTW, I recommend to use jquery.appear to detect when the circle appears - see #8. Also see #79

[Igor-Yavych]

Thanks, unbinding that event before binding it again solved the problem.
Also, thanks for recommendation, I'll look into this jquery plugin

[kottenator]

You're welcome! ;)