调用html内的javascript页面函数

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

Answer 1

...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. Eg:

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.)

Answer 2

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.