Question

So I am using the Jquery plugin called FormatCurrency to (this should be obvious) format some numbers in Currency format. The jQuery function is working great for the first row of numbers but the second row is having some issues.

Let me explain what I am doing first:

If I click on the tree and expand the row I want to select the tree opens up two more rows Capital and Expense. The jQuery works great on the capital row, the format is used and row is changed from 123456 to $123,456 but the Expense Row remains unchanged.

I also found that the Expense row does accept the formatCurrency style changes if I click on a different area, like if I expand another row with different numbers. So the Jquery is working, it just isn’t finishing the style change until I click on another row and if I go back to the original row that I had initially clicked on the style changes are removed again on only the Expense Row. I hope this all makes sense. I have posted my code below and I will be checking back often so feel free to ask any questions that could help with solving the issue. Thank you for your help!

pa_click = function (pa_label) {
            PA_ID = pa_label.getAttribute('pa_id');

            var pa_details = document.getElementById('pa-details-' + PA_ID);

            jQuery.getJSON('@Url.Action("getAjaxSCs")', { PA: pa_label.title }, function (SCS) {
                pa_details.innerHTML = "";
                jQuery.each(SCS, function (index, SC) {

                    months_html = '';
                    jQuery('.currency').formatCurrency({
                        colorize: true,
                        roundToDecimalPlace: -2,


                    });

                    for (var i = 0; i < 12; i++) {

                        index = index.replace(/\s/g, "-");
                        months_html +=
                                            '<div id="SC-' + index + '-' + months[i] + '" class="month-wrapper tree border-white currency">' + // This is where I add the currency class
                                            SC[i] + // This is the variable I need to replace with code to add currency to the amount  
                                            '</div>';
                    }

                    pa_details.innerHTML +=

                            '<div id ="Spend-Category-' + index + '" class="sc-wrapper tree border">' +
                                '<div id ="sc-title-' + index + '" class="sc-title">' +
                                    '<div class = "sc-label" title = "' + index + '" SC_id="' + index + '" onclick = "sc_click(this)">' + index + '</div>' +
                                    months_html +
                                '</div>' +
                                '<div id="sc-details-' + index + '" class = "pa-details" style = "display:none">' + index + '</div>' +
                            '</div>';
                })
            });
            jQuery('#pa-details-' + PA_ID).toggle('fast');

        };

Answer 1

Place the call to .formatCurrency after you’ve added all of your elements to the DOM.

For example, you could refactor like so:

pa_details.innerHTML = "";

jQuery.each(SCS, function (index, SC) {
  months_html = '';
  for (var i = 0; i < 12; i++) {
    ...
  }
  pa_details.innerHTML += "BIG CONCATENATION HERE";
});

jQuery('.currency').formatCurrency({
  colorize: true,
  roundToDecimalPlace: -2
});

This allows all elements to be present in the DOM before you try to format the element.