jQuery dynamically add script getting body is null

Question

I am writing a jQuery plugin that references another plugin, I dynamically add the reference to that plugin when mine is called:

var headID = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'js/jquery.genericplugin.js';
document.body.appendChild(script);

To call this plugin I use the following in my head tags:

<script type="text/javascript" src="path/to/myplugin.js" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#object').myplugin({
            option1: 1,
            option2: 2
         });
    });
</script>

I have tested this successfully on one page, however I'm trying to update another page that was using the code and I keep getting a document body is null error. I'm assuming this is because the body hasn't loaded before my plugin is trying to add the script to it. I changed my page code so that the reference to the plugin is also in the document ready event.

<script type="text/javascript">
    $(document).ready(function() {
        var headID = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'path/to/myplugin.js';
        document.body.appendChild(script);

        $('#object').myplugin({
            option1: 1,
            option2: 2
         });
    });
</script>

I no longer get the document body is null error, however I get an error telling me that $('#object').myplugin is not a function The page is an asp mess, I have verified that I am adding the information in the header of the page...so I'm kind of at a loss. I'm pretty certain I know what is happening, but not why or a solution.

EDIT Here is what my plugin looks like:

(function($) {
 var headID = document.getElementsByTagName('head')[0];
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'js/jquery.genericplugin.js';
 document.body.appendChild(script);

 $('.diag-close').live('click', function() {
  $.modal.close();
 });

 $.fn.photomodal = function(options) {

  var defaults = {
   iframeUrl: '',
   imageName: '',
   linkID: '',
   photoID: ''
  };

  var opts = $.extend(defaults, options);

  return this.each(function() {
   $this = $(this);

   $this.click(function() {
    buildModal({
     iframeUrl: opts.iframeUrl,
     photoID: opts.photoID,
     imageName: opts.imageName
    });
   });
  });
 };


 function buildModal(options) {
  var img = new Image();
  img.src = 'http://www.gravatar.com/avatar/' + options.imageName;

  var h = img.height + 310;
  var w = img.width + 110;

  var defaults = {
   bgcolor: '#fff',
   border: '4px solid #3B5998',
   height: h,
   width: w,
   padding: 0,
   top: 15,
   photoID: 'photoThumb'
  };
  var opts = $.extend(defaults, options);
  $.modal('<iframe src="' + opts.iframeUrl + '" height="' + opts.height + '" width="' + opts.width + '" style="border: 0" scrolling="no">', {
   closeHTML: '<img src="x.png" alt="close" style="cursor: pointer; float: right;" />',
   containerCss: {
    'background-color': opts.bgcolor,
    'border': opts.border,
    'height': opts.height + 10,
    'width': opts.width + 20,
    'padding': opts.padding,
    'top': opts.top
   },
   onClose: function(dialog) {
     dialog.data.fadeOut('slow', function() {
      dialog.container.slideUp('slow', function() {
       dialog.overlay.fadeOut('slow', function() {
        $.modal.close();
        if($('#' + opts.photoID).attr('src') != 'undefined')
        {
         var src = $('#' + opts.photoID).attr('src');
         var d = new Date();
         $('#' + opts.photoID).attr('src', src + '&' + d.getTime());
        }
       });
      });
     });
   },
   overlayClose: true,
   autoResize: true
  });
 }
})(jQuery);

It is successful on an asp page where the header and footer are being created in asp include files...however if I add it to a page where the header is in the same page it comes back document body is null.

Gabriele Petrioli · Accepted Answer · 2010-12-21 08:54:16Z

1

Since you are using jQuery why not use its .getScript() method that accepts a callback for when the script is loaded ?

$.getScript('path/to/myplugin.js', function(){
     $('#object').myplugin({
            option1: 1,
            option2: 2
      });
});

answered Dec 21, 2010 at 8:54

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

1 Comment

jon3laze Over a year ago

Awesome I wasn't aware of this method. Would you suggest using that method on the plugin as well?

lazycommit · Accepted Answer · 2010-12-21 08:54:25Z

1

use:

jQuery.getScript()

or

$.getScript()

to append script and apply it

with this you must remember that plugins has to be added to jQuery object some like that:

(function($){})(jQuery)

answered Dec 21, 2010 at 8:54

lazycommit

4145 silver badges18 bronze badges

Collectives™ on Stack Overflow

jQuery dynamically add script getting body is null

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related