Javascript function not defined but it does

Question

My page's code is:

<!--Custom JavaScript -->
// --> This Script contains the initLoadMore function <--
<script src="/static/js/custom.min.js"></script>    

<script src="/static/js/moment.min.js"></script>
<script src="/static/js/material-datetimepicker.js"></script>
<script>
   $(function(){
      initLoadMore("btnLoadMoreEvents","events-list");
   });
</script>

the Script custom.min.js contains:

$(function(){
function initLoadMore(btnLoadMore,container){
    let num_page = 2;
    $("#"+btnLoadMore).click(function(){
        $.get("?p="+num_page).done(function(data) {
            $("#"+btnLoadMore).prop("disabled",true);
            if(data.last_page == true){
                $("#"+container).append(data.content);
                $("#"+btnLoadMore).remove();
            }else{
                $("#"+container).append(data.content);
                num_page = num_page + 1;
            }
       }).fail(function(xhr){
            swal("Error", "Ha ocurrido un error al cargar m\u00E1s contenido. Por favor, int\u00e9ntalo de nuevo.", "error");
       }).always(function(){
           $("#"+btnLoadMore).prop("disabled",false);
       });
    });
}
});

The console says Uncaught ReferenceError: initLoadMore is not defined. The function only works if I delete the $(function(){ ... });(document ready) in the custom.min.js Script.

Why does this happen?

`initLoadMore` is _local_ function, accessible inside the container function scope. — Tushar, May 30 '18 at 11:27
As @Tushar mentioned, the fact that you're using a `$(function(){})` wrapper, the function `initLoadMore()` gets its own scope which means it is not visible from the outside. *Do you require the* `$(function(){})` *wrapper and if so, why is it necessary?* — Alex, May 30 '18 at 11:29
You don't need to wrap the `initLoadMore` function in `ready`. Because, you're defining it, not invoking it. — Tushar, May 30 '18 at 11:31
Why are you even using this `(function() {})();` encapsultation? It does nothing else but declaring `initLoadMore` — Guillaume Georges, May 30 '18 at 11:34
Use `$(function(){})` when you are invoking something straight away. `function(){}` or `() => {}` or `arg => {}` are `anonymous` functions which means they get invoked at runtime. — Alex, May 30 '18 at 11:35

Ramesh Rajendran · Answer 1 · 2018-05-30T11:31:42.937

1

initLoadMore is local function You you can't acces it from other side

if you remove $(function(){} then it's works well.

$(function(){} is like a private access modifier. So you can call the defined function only inside the scope itself.

edited May 30 '18 at 11:31

answered May 30 '18 at 11:28

Ramesh Rajendran

37,412
45
153
234

3

_The function only works if I delete the $(function(){ ... });_ – Tushar May 30 '18 at 11:29
@Tushar Updated :) – Ramesh Rajendran May 30 '18 at 11:31

Daniël Camps · Answer 2 · 2018-05-30T13:01:24.623

1

Your function is encapsulated in another function, so it is not globally available.

If you remove the $(function(){ ... }); part around the function, you declare it as a global function and other scripts will be able to call it.

In order to encapsulate the function, while still calling it last, perhaps you could call the script last, and invoke it directly like this:

(function(){
//do something
}());

edited May 30 '18 at 13:01

answered May 30 '18 at 11:29

Daniël Camps

1,737
1
22
33

Javascript function not defined but it does

2 Answers2