How to reset progressbar in Jquery

Question

When I add a card to the inbox list, it is possible to double click on the card to open a modal dialog. In the dialog it is possible to add some checkboxes dynamically. When the checkboxes are checked the progress bar changes value.

The issue is, lets say, I create 2 checkboxes and then check one of them, the progress bar will show 50% done. After that, I save the data and press the save button. The dialog closes.

Then, when I add a new one card to the inbox list and double click on it to open dialog, the progress bar still shows the value of 50%. You can see the problem in the image below:

I have tried to fix it by my self using the code below: But it doesn't seem to work.

$('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());

Live Demo

How can I reset the progress bar after adding a new card?

HTML:

<!--Modal Dialog-->
<div id="modalDialog">
    <form>

        <input type="button" id="Save" value="Save Data" />
        <hr/>
        <br/>
        <label>Add checkBox</label>
        <br />
        <div id="progressbar"></div>
        <br />
        <input type="text" id="checkBoxName" />
        <input type="button" id="btnSaveCheckBox" value="_Ok" />

    </form>
</div> 

Jquery:

$(function () {
    // Click function to add a card
    var $div = $('<div />').addClass('sortable-div');

    var cnt = 0,
        $currentTarget;
    $('#AddCardBtn').click(function () {
        var $newDiv = $div.clone(true);
        cnt++;
        $newDiv.prop("id", "div" + cnt);

        $newDiv.data('checkboxes', []);

        $('#userAddedCard').append($newDiv);
        //      alert($('#userAddedCard').find("div.sortable-div").length);        
    });

    // Double click to open Modal Dialog Window
    $('#userAddedCard').dblclick(function (e) {
        $currentTarget = $(e.target);

        $('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());

        $('.allcheckbox').remove(); // Remove checkboxes
        $('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */

        /* Add checkboxes from card data */
        $.each($currentTarget.data('checkboxes'), function (i, checkbox) {
            addCheckbox(checkbox.name, checkbox.status);
        });

        $('#modalDialog').dialog({
            modal: true,
            height: 600,
            width: 500,
            position: 'center'
        });
        return false;

    });
    $("#datepicker").datepicker({
        showWeek: true,
        firstDay: 1
    });

    $("#Save").on("click", function () {
        /* Copy checkbox data to card */
        $currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes')); 

        $('#modalDialog').dialog("close");
    });

    // Add a new checkBox
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    function addCheckbox(name, status) {
        status = status || false;

        var container = $('#modalDialog');
        var inputs = container.find('input');
        var id = inputs.length + 1;
        var data = {
            status: status,
            name: name
        };

        var div = $('<div />', { class: 'allcheckbox' });
        $('<input />', {
            type: 'checkbox',
            id: 'cb' + id,
            value: name
        }).prop('checked', status).on('change', function () {
            data.status = $(this).prop('checked');
        }).appendTo(div); /* set checkbox status and monitor changes */

        $('<label />', {
            'for': 'cb' + id,
            text: name
        }).appendTo(div);

        div.appendTo(container);

        container.data('checkboxes').push(data);

        updateProgress();
    }

$(document).on('change', 'input[type="checkbox"]', updateProgress);

    $("#progressbar").progressbar({
        value: 0,
        max: 100
    });        


function updateProgress() {
    var numAll = $('input[type="checkbox"]').length;
    var numChecked = $('input[type="checkbox"]:checked').length;

    if (numAll > 0) {
        var perc = (numChecked / numAll) * 100;
        $("#progressbar").progressbar("value", perc)
        .children('.ui-progressbar-value')
        .html(perc.toPrecision(3) + '%')
        .css("display", "block");
    }
}   


});

Answer 1

When you click Save button just reset #progressbar value like this:

$('#progressbar').progressbar('option', 'value', 0);

You can see documentation at http://api.jqueryui.com/progressbar/#option-value