0

I have used a plugin to make a percentage loader circle. following is the js used after initializing that plugin:

$("#test-circle").circliful({
                animation: 1,
                animationStep: 5,
                foregroundBorderWidth: 15,
                backgroundBorderWidth: 15,
                percent: 35,
                textSize: 28,
                textStyle: 'font-size: 12px;',
                textColor: '#666',
                multiPercentage: 1,
                percentages: [10, 20, 30]
            });

I want the user to change the value of percent. For this i have used:

$("#submit").click(function(){
                var deg = ("#input").val();
                var degree = deg;
            });

Now I have the value from user , but i don't know how to pass it to plugin. I am very new to jquery, and having a some trouble in doing this,

Anil
  • 3,722
  • 2
  • 24
  • 49
pratteek shaurya
  • 850
  • 2
  • 12
  • 34

1 Answers1

1

You can override some options of circliful in your click handler:

  var options = {  
    percent: 39
  };
  $("#test-circle").circliful(options);

  $('#submit').on('click', function() {
    var deg = $('#input').val();
    options.percent = deg;
    $("#test-circle").find('svg').remove();
    $("#test-circle").circliful(options);
  });

Example

P.S.: You are using the ID submit in you click handler, if this element is a submit button and you are submitting a form, you have to work around the reload triggered by the form submit. Either use e.prevenDefault in the click handler and submit the form e.g. via ajax or save the percentage and apply it after form submit. If this applies to you of course.

empiric
  • 7,825
  • 7
  • 37
  • 48
  • thnx, this works fine. But just one is problem is there, everytime I click , it makes a duplicate circle – pratteek shaurya Mar 23 '17 at 07:25
  • Everytime you click submit button you can remove the previous one before drawing i guess. You can do something like $('#test-circle').remove() before circle.circliful({percent:deg}); – AKSHAY JAIN Mar 23 '17 at 07:34