Javascript - unable to call function from another file

Question

I'm trying to call a function from one file in another js file.

general.js

function delete_post(post_id, post_type, nonce) {
    $.post(Ajax.ajaxurl, { action: 'delete_post', post_id: post_id, nonce: nonce, post_type: post_type}, function (data) {
        var result = $.parseJSON(data);
        if (result.status == 'error') {
            $('#post_'+post_id).prepend('<div class="alert alert-danger">' + result.message + '</div>');
        }
        if (result.status == 'success') {
            $('#post_'+post_id).fadeOut(1000, function(){

                $(this).remove();
            });
        }
    });
}

details.js

$('body').on('click', '.remove-row', function (e) {
    e.preventDefault();
    var post_id = $(this).attr('data-target');
    var nonce = $(this).attr('data-nonce');
    var parent_id = $(this).attr('data-parent');
    var post_type = $(this).attr('data-post_type');
    bootbox.confirm(Ajax.are_you_sure, function(result) {
        if (result) {

            delete_post(post_id, post_type, nonce);

        }
    });
});

On the page they are loaded in the correct order:

<script type='text/javascript' src='http://domain.com/js/general.js?ver=3.9.1'></script>
<script type='text/javascript' src='http://domain.com/js/details.js?ver=3.9.1'></script>

However, when I click on the remove-row button, I get Uncaught ReferenceError: delete_post is not defined.

What am I missing?

This doesn't make sense. in your details.js put : alert(typeof delete_post) --- does it alert? — Royi Namir
– Royi Namir, Commented Jun 1, 2014 at 7:57
are you sure the <script tag is excat paste ? no defer/async attributes ? — Royi Namir
– Royi Namir, Commented Jun 1, 2014 at 8:00

T.J. Crowder · Accepted Answer · 2014-06-01 08:01:19Z

1

That error tells us that you haven't shown all of general.js, and in particular that your function declaration for delete_post is inside another function (one possible example below). So it's not a global.

If you want to make it a global, you can do that by putting this line in general.js:

window.delete_post = delete_post;

The properties of the window object are globals.

In general, I would recommend keeping globals to a minimum, so you might want to have a single global object you use for all your stuff, along these lines:

if (!window.myApp) {
    window.myApp = {};
}
window.myApp.delete_post = delete_post;

...and then instead of

delete_post(post_id, post_type, nonce);

...in your other file, use

myApp.delete_post(post_id, post_type, nonce);

When I say it's inside another function, here's one example of that:

$(document).ready(function() {

    function delete_post() {
        // ...
    }

});

Your example may look slightly different, but that's the gist.

answered Jun 1, 2014 at 8:01

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1049961 Over a year ago

Thanks, that was it. I had the definition of the function in jQuery(document).ready(function($){})...

Collectives™ on Stack Overflow

Javascript - unable to call function from another file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related