Initialize Anonymous function after ajax call

Question

Hi I have a template where the scripts are initialized in this file like this

;(function ($) {

"use strict";

var $body = $('body');
var $head = $('head');
var $header = $('#header');
var transitionSpeed = 300;
var pageLoaded = setTimeout(addClassWhenLoaded, 1000);
var marker = 'img/marker.png';

The problem is i have tried to name the function and call it in my ajax code, with no luck

here is my ajax code, how can i initialize again so tabs and bootstrap progress bar work again. in the loaded code?

$(document).ready(function(){
  var form = $('#prevjob_form');
  var submit = $('#prevjob_submit');

  form.on('submit', function(e) {
    // prevent default action
    e.preventDefault();
    // send ajax request
    $.ajax({
      url: '<?php echo $this->make_url("user/prevjobs/"); ?>',
      type: 'POST',
      cache: false,
      data: form.serialize(), //form serizlize data
      beforeSend: function(){
        // change submit button value text and disabled it
        submit.val('Añadiendo...').attr('disabled', 'disabled');
      },
      success: function(data){
        // Append with fadeIn see http://stackoverflow.com/a/978731
        var item = $(data);
        $('.prevjobs').empty().append(item);
        //ready();

       // progress();
       //I try to name it progress and call it here, but this wont work

var objDiv = document.getElementById("prevjobs");
objDiv.scrollTop = objDiv.scrollHeight;
        // reset form and button



        form.trigger('reset');
        submit.val('Añadir Gol').removeAttr('disabled');

      },
      error: function(e){
        console.log(e);
      }
    });
  });

});

I try to wrap the progress bar code just to test, and name a function.

like this

<script>
    function progress(){
    $('.progress-bar').each(function () {

    var $this = $(this),
        progress = $this.data('progress');

    if (!$this.hasClass('no-animation')) {
        $this.one('inview', function () {
            $this.children('.progress-bar-inner').children('span').css('width', progress + '%');
        });
    } else {
        $this.children('.progress-bar-inner').children('span').css('width', progress + '%');
    }

    if ($this.hasClass('toggle')) {
        $this.children('.progress-bar-toggle').on('click', function (event) {
            event.preventDefault();

            if (!$this.hasClass('active')) {
                $this.children('.progress-bar-content').slideDown(250, function () {
                    $this.addClass('active');
                });
            } else {
                $this.children('.progress-bar-content').slideUp(250, function () {
                    $this.removeClass('active');
                });
            }
        });
    }

});

}




    </script>

But again after the Ajax call progress bar are not working.

Looks like that is an self-invoking function which is also a anonymous function. You should declare a function functionname(){} and call it by your self in the first time. — Roger Dwan, Nov 27 '15 at 07:55
I just edited cause i have tried that also, maybe with an error, code is there now — Moncho Chavez, Nov 27 '15 at 08:00
Wait, I think I misunderstood your issue. When you call `success: function(data){ ..... progress();....` are you expecting that to continuously update your progress bar as the ajax call is being processed? If so that will not work, the success callback is only called once when the ajax call successfully returns. — Wesley Smith, Nov 27 '15 at 08:20
No its simple than that, i have a div where you put "skills" like "spanish 90%" etc, after you add one skill via ajax, all the progress bars went back to 0, cause the script is not initialized to that new DOM, after i reload the page it look fine until i make an ajax call, because i replace all skills in the ajax success. — Moncho Chavez, Nov 27 '15 at 21:32

Wesley Smith · Answer 1 · 2015-11-27T08:07:30.930

Your issue is that your function and the call to it are in different scopes.

When you define a function or a variable inside an on load function like this $(document).ready(function(){ .... or like this ;(function ($) {... you can only access those function or variables from within the scope of that closure.

Here is an example:

$(document).ready(function(){
    function myFunction(msg){
        console.log(msg);
    }
   
    myFunction('this will work')
    
    
});

$(document).ready(function(){
    
    myFunction('but this never will');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You'll need to move the function to the global scope or move the call to it to the same scope as the function itself

Another solution would be to access the function through the document object like this:

;(function ($) {

    $.fn.myFunction = function (msg) {
        console.log(msg);
    }
    

})(jQuery);

$(document).ready(function(){
    
     $(document).myFunction('called from outside the original scope');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I will edit my post, i try to wrap the code of progress bar, naming the function, just like your example. But that is not working etheir, why? — Moncho Chavez, Nov 27 '15 at 07:58
@MonchoChavez what is `addClassWhenLoaded` is that some function that initializes plugins or simething? — Wesley Smith, Nov 27 '15 at 08:11
yes i think its a semi-big file main.js there are a lot of functions, some has name other are not named, thats why i thougth it would be easier to initialise the whole file again, or that main function, but i cant — Moncho Chavez, Nov 27 '15 at 08:19

Initialize Anonymous function after ajax call

1 Answers1