CODEWITHSUNDEEP
javascriptjqueryajax
Lucas Campos
Lucas Campos

Reputation: 515

Js how call function and pass params from another file

I'm trying to make a main file in js with some functions. I want to access geturl function from another js file inside my ajax call to post in my url. I did like this Ajax File:

**<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
(() => {
        'use strict'
$.ajax({
            url: getUrl('index','postData'),
            dataType: 'json',
                // query string parameters to append
                data: {
                  id: getId(),
              },
              type: "POST",
              success: (data) => {
                // success! we got the data!
                let card_markup = ''
                data.forEach((post) => {
                    card_markup += card(post);
                })
                $('.js-post').append(card_markup);
            }
        })
})()**

main file

**$( document ).ready(function() {

    'use strict'

    $('.back').click(function() { history.go(-1); });

    function getUrl (ctlr, act) {
        var baseurl = 'http://localhost:5002/';  
        return baseurl+'/'+ctlr+'/'+act;
    }

    function getId ()
    {
        var url = $(location).attr('href');
        var parts = url.split("/");
        var last_part = parts[parts.length-1];
        return last_part;
    }

});**

I got this error: 24781:143 Uncaught ReferenceError: getUrl is not defined at 24781:143 at 24781:184

What is the best way to do this?? thanks in advance!

Upvotes: 0

Views: 85

Answers (2)

Manwal
Manwal

Reputation: 23836

Your function should be outside of dom ready function, to be accessible in other JS file:

// Should be outside dom ready scope
function getUrl (ctlr, act) {
    var baseurl = 'http://localhost:5002/';  
    return baseurl+'/'+ctlr+'/'+act;
}

function getId ()
{
    var url = $(location).attr('href');
    var parts = url.split("/");
    var last_part = parts[parts.length-1];
    return last_part;
}

$( document ).ready(function() { // <--- Start scope of DOM ready

    'use strict'

    $('.back').click(function() { history.go(-1); });

    // function inside here won't be accessible 
});  // <--- End scope of DOM ready

For instance:

function test_function() {
   function inner_scope() {
    // some definition
   }
}

inner_scope(); // will give Uncaught ReferenceError

Understanding Javascript Scope will help you understanding scope in JS.

Upvotes: 3

T.J. Crowder
T.J. Crowder

Reputation: 1074989

getUrl and getId are entirely private to the anonymous callback you're passing into ready. If you want those functions to be accessible from outside that callback, you need to expose them in some way (for instance, by making them globals, although in general it's best to avoid globals):

'use strict'

$( document ).ready(function() {
    $('.back').click(function() { history.go(-1); });
});

function getId ()
{
    var url = $(location).attr('href');
    var parts = url.split("/");
    var last_part = parts[parts.length-1];
    return last_part;
}

function getUrl (ctlr, act) {
    var baseurl = 'http://localhost:5002/';  
    return baseurl+'/'+ctlr+'/'+act;
}

(Note I also moved the 'use strict' outside it so that getUrl and getId would still be in strict mode.)

If you're doing this a lot, you might look into using modules via RequireJS, Webpack, or any of several others, so you don't have to create a bunch of global variables. (Native JavaScript modules support is available in cutting edge browsers, but you probably need to support ones that don't have it yet.)

Upvotes: 1

Related Questions