Featured post
plugins - jQuery dynamically add script getting body is null -
i writing jquery plugin references plugin, dynamically add reference plugin when mine 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 plugin use following in 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 on 1 page, i'm trying update page using code , keep getting document body null error. i'm assuming because body hasn't loaded before plugin trying add script it. changed page code reference plugin in 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 document body null error, error telling me $('#object').myplugin not function
page asp mess, have verified adding information in header of page...so i'm kind of @ loss. i'm pretty know happening, not why or solution.
edit here 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 successful on asp page header , footer being created in asp include files...however if add page header in same page comes document body null.
since using jquery why not use .getscript()
method accepts callback when script loaded ?
$.getscript('path/to/myplugin.js', function(){ $('#object').myplugin({ option1: 1, option2: 2 }); });
- Get link
- X
- Other Apps
Comments
Post a Comment