1

after trying several ways of (first time) creating an extension to jQuery... and it doesn't work yet: 

(function($){ 
$.fn.fixInputWidthsForBlog = function() 
{ 
console.log('hi extension');
// var w = $('#newblogentryform input[name="headline"]').outerWidth();
// $('#newblogentryform textarea[name="text"]').outerWidth(w); 
// $('#newblogentryform submit[name="submit"]').outerWidth(w); 
}; // endFUNC
}(jQuery));

this (following) is where i get an error:

"jquery-3.1.0.min.js:2 Uncaught TypeError: $.fixInputWidthsForBlog is not a function"

$(document).ready(function(){

    $.fixInputWidthsForBlog(); 
    alert('ok1'); 
    $(window).on('resize', function(){ $.fixInputWidthsForBlog(); });
    $('.linkNewBlogEntry').on('click',function() { 
        $('#newblogentryformdiv').slideToggle().delay(1200).fixInputWidthsForBlog(); 
        // setTimeout("fixInputWidthsForBlog();",1200); 
        return false;   
        }); 
});

I also tried: 

$.fn.extend({
    fixInputWidthsForBlog = function() {} 
});

and simply: 

$.fn.fixInputWidthsForBlog = function() {};

but all of them result in this very same error:

"jquery-3.1.0.min.js:2 Uncaught TypeError: $.fixInputWidthsForBlog is not a function"

in the line where I try to execute: 

$.fixInputWidthsForBlog();

in one way or another.

eisbehr
  • 12,243
  • 7
  • 38
  • 63
davidman77
  • 331
  • 3
  • 12
  • Do you really mean to call this *not* on jQuery sets (`$.fixInputWidthsForBlog();`) rather than on jQuery sets (`$(...).fixInputWidthsForBlog();`)? – T.J. Crowder Sep 13 '16 at 09:05
  • thx @eisbehr: i tried the editing several times, i m still new to this :) – davidman77 Sep 13 '16 at 09:08
  • @Crowder : yes, i d like to chain (2nd option) - and don't yet quite understand the difference really, ... :( – davidman77 Sep 13 '16 at 09:11
  • [eisbehr's answer](http://stackoverflow.com/a/39466109/157247) should be useful then (look at the `onElements` part of it). I've also written up plugin examples [here](http://stackoverflow.com/questions/11227873/troubles-writing-a-proper-jquery-plugin/11227903#11227903) and [here](http://stackoverflow.com/questions/21626734/can-you-use-a-js-object-as-the-interface-for-a-jquery-plugin/21626778#21626778), FWIW. – T.J. Crowder Sep 13 '16 at 09:14

1 Answers1

2

Extending $.fn only works for element chains, not as own function of the jQuery object. For this you need to extend $ directly, without fn.

(function($) {
    // jQuery plugin
    $.fn.onElements = function() {
        console.log('hi, element chain plugin');

        // make chainable
        return this;
    };

    // jQuery object extension
    $.onjQuery = function() {
        console.log('hi, jQuery object extension');
    };
}(jQuery));

// will work
$('someElementSelector').onElements();
$('someElementSelector').onElements().onElements();
$.onjQuery();

// will not work
// $('someElementSelector').onjQuery();
// $.onElements();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
eisbehr
  • 12,243
  • 7
  • 38
  • 63
  • well,... so I got one last question: (how) would it be possible to use the same function for both? ... yet thinking about it, it's not necesary I guess, since I can find onElements solutions for every situation that I need. Thank you so much! :) – davidman77 Sep 13 '16 at 09:17
  • In general: `$.fn.myPlugin = $.myPlugin = function() {};`. But you need to implement everything compatible then. It's a bit tricky sometimes. ;) @davidman77 – eisbehr Sep 13 '16 at 09:20
  • very cooool! i had "imagined" sth like that, thanx! – davidman77 Sep 13 '16 at 09:22