0

I'm loading a HTML page using jQuery's .load method:

$(document).ready(function() {
    $('#body_dynamic_css').load('/url/to/page');
});

I recently updated the version of jQuery to 1.7.2 from 1.4.2. I used to be able to use jGrowl after loading the additional page but now I can't. If I look at the console of the loaded page I have jGrowl and if I remove the load statement from the original page I have jGrowl but as soon as load is called I no longer have jGrowl. Even doing the following works.

$(document).ready(function() {
    $('#body_dynamic_css').load('/url/to/page', function() {
        $.jGrowl('Hello StackOverflow');
    });
});

The exact error message I'm getting is: 

Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'jGrowl'

This happens when the original page calls 

$(document).ready(function() {
    // Do stuff here
    $.jGrowl('message');
    // Do stuff here
});

From an externally loaded javascript file.

<script src="/assets/app.js" type="text/javascript" charset="utf-8"></script>

Any suggestions would be greatly appreciated.

JSP
  • 547
  • 1
  • 4
  • 18

1 Answers1

0

You can do this, take a look here for a working example: https://gist.github.com/stanlemon/5649378

Note that is very important whenever you are using $.load() that you are accessing your file over http(s) and not file:// When doing the latter you will run into 'Origin null' issues, see Origin null is not allowed by Access-Control-Allow-Origin for more information on that front.

Community
  • 1
  • 1
stanlemon
  • 399
  • 3
  • 10