TypeError: 'undefined' is not a function

[Ram]

Dear Appery,

i'm using this function for some CSS progressBar anumation:

precode
(function( $ ){
$.fn.animateProgress = function(progress, callback) {
return this.each(function() {
$(this).animate({
width: progress+'%'
}, {
duration: 2000,

Code: Select all

     easing: 'swing', 

     step: function( progress ){ 
       var labelEl = $('.ui-label', this), 
           valueEl = $('.value', labelEl); 

       if (Math&#46;ceil(progress) < 20 && $('&#46;ui-label', this)&#46;is(":visible")) { 
         labelEl&#46;hide(); 
       }else{ 
         if (labelEl&#46;is(":hidden")) { 
           labelEl&#46;fadeIn(); 
         }; 
       } 

       if (Math&#46;ceil(progress) == 100) { 
         labelEl&#46;text('Done'); 
         setTimeout(function() { 
           labelEl&#46;fadeOut(); 
         }, 1000); 
       }else{ 
         valueEl&#46;text(Math&#46;ceil(progress) + '%'); 
       } 
     }, 
     complete: function(scope, i, elem) { 
       if (callback) { 
         callback&#46;call(this, i, elem ); 
       }; 
     } 
   }); 
 }); 

};
})( jQuery );
/code/pre

when placing the above code in a JS asset file there's no problem and it's working well, however i need it to be placed inside mapping js function, if i put the same code there i get the following error:

TypeError: 'undefined' is not a function (evaluating '$('#progress_bar .ui-progress').animateProgress(n)')

can you please point me on tweak the code to work from within the mapping js code?

Many thanks in advance!
Best.
R.

[Maryna Brodina]

Hello! We can't reproduce it. Could you give us your public app link?

[Ram]

this app is shared with you "No Name Yet"
on page AddressBookDataGetContacts (service name)mappingresponse

many thanks dear!!

[Maryna Brodina]

Hi, looks like you understand code you've posted in a wrong way. It shouldn't be in mapping, it should be in a separate JS asset. In mapping you just need to use animateProgress function defined with this code the way you do this pre$('#progress_bar .ui-progress').animateProgress(n);/preBut code you've posted goes after pre$('#progress_bar .ui-progress').animateProgress(n);/preso you call animateProgress before function is defined. Please place it in JS asset.

[Ram]

Dear Maryna,

thank you for taking the time to review my app, i truly appreciate it!

i tried moving the function back into a JS asset file and also tried to move it above the the code inside the mapping JS, in both cases there was no error however in both cases the progress bar do not get refreshed (filling) although the value increase... i'll try using a simple progressbar instead without any animation and hope i'll get some visual progress to this contact list populating process...

again, thank you very much!!
Best,
R.

[Maryna Brodina]

Ok, let us know if you have any question.