call javascript page function inside ajaxed html

Question

I have a page where i use jQuery to load some content into a div element

<div id="contents-box-in"></div>

jQuery code in page

$(document).ready(function() {

        $("#contents-box-in").load("new-01.php", function() {               
            $('#contents-box-in').fadeIn(120);              
        });

        var updateBoxData = function(data) {

            $('#contents-box-in').fadeOut(100, function() {
                $('#contents-box-in').html(data).fadeIn(130);
            });

        }

    });

the content that i load is a form that needs to load a new page sending collected data from form

            $('#form-buttons-next').click(function(e) {

                var formData = new FormData($(this)[0]);

                var formS = $.ajax({
                    url         : 'new-02.php',
                    type        : 'POST',                   
                    data        : formData,
                    async       : false,
                    cache       : false,
                    processData : false,
                    contentType : false
                });

                formS.done(function(data) {

                   if (data != null) {

                        updateBoxData(data);

                    }

                });

                formS.fail(function(jqXHR, textStatus) {

                    alert("error");

                });

            });

since i do this in different step i would like to use a shared function contained in page that is loading the ajax content but i get updateBoxData is undefined

I guess that ajaxed content can't see parent container function

The easy way would be to load a different .js file containing shared function, i was wondering if is possible to access the updateBoxData from ajaxed contents

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

...i would like to use a shared function contained in page that is loading the ajax content but i get updateBoxData is undefined

I guess that ajaxed content can't see parent container function

No, that's not why. Your updateBoxData variable is scoped to the function it's declared in (your ready) callback. If you want it accessible globally, you'll need to make it global instead.

The problem is, though, the global namespace is already incredibly crowded. So if you put all of your useful functions there as globals, you're going to run into conflicts sooner or later.

For that reason, for now until browsers support ES2015 modules (which will take a while), I suggest giving yourself just one global symbol, something unlikely to conflict with other things, and assigning an object to it with properties for your various utility functions. E.g.:

var MyNiftyUtils = {
    updateBoxData: function() {
        // ...
    }
};

Then you call that via MyNiftyUtils.updateBoxData. If the verbosity bothers you, no worries, just use a scoping function and assign it to a local:

(function() {
    var u = MyNiftyUtils;

    // ....
    u.updateBoxData(/*...*/);
})();

(There are about 18 variations on that theme, this is just one of them.)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 19, 2016 at 13:48

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

al404IT Over a year ago

i'm so dumb and so used to jQuery i did not notice i was inside document ready i will accept Ali since is more related to fix the issue even if your answer add some great suggestions.

T.J. Crowder Over a year ago

@al404IT: You're welcome to accept any answer you choose. :-) I will just point out that that's what I said to do: Make it a global, not a local to the ready callback.

Ali Motevallian · Accepted Answer · 2016-07-19 13:56:44Z

The function updateBoxData is defined inside a callback function you passed to .ready and hence its scope is limited to that function. Let us call this callback function Fx.

The click handler (the function passed to .click in the second part), which we call it Fy is defined outside of Fx and as a result does not have access to the variables defined in Fx (remember updateBoxData is a variable inside Fx).

That is why your code does not work. To get it working simply take updateBoxData out of the callback in .ready function:

$(document).ready(function() {
    $("#contents-box-in").load("new-01.php", function() {               
        $('#contents-box-in').fadeIn(120);              
    });
});
function updateBoxData(data) {
    $('#contents-box-in').fadeOut(100, function() {
        $('#contents-box-in').html(data).fadeIn(130);
    });
}
...

The rest is the same.

Collectives™ on Stack Overflow

call javascript page function inside ajaxed html

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related