JQuery Custom Plugin Function not recognized

Question

I am working on a plugin to replace window.showmodalDialog. However, whenever I try to call my plugin function I am receiving the typical and dreaded "Object does not support this method".

I've boiled down my plugin to show a simple alert box.

( function ( $ )
{
    $.fn.showAlert = function ()
    {
        alert( "Hello There" );
    }
} )( jQuery );

This is placed in a separate JavaScript file, included on the page from which I want to call the function and I call the function as such: $.showAlert();

The execution of that line causes the error.

If I boil the code down even further and make it an immediate function,

( function ( $ )
{
    alert( "Hello There" );
} )( jQuery );

the alert box pops up as soon as the page loads.

I am certain I am doing something wrong, but I cannot figure out what it is. I have googled this error and looked through SO and everything I can determine is I am constructing my plugin correctly.

EDIT

In an effort to provide full disclosure. In our application, we have a JavaScript file, optionActions.js, that provides several different ways to open new windows. One of the functions is to open a modal dialog, openModal. This function takes several parameters used to define the modal window. The basic structure of this function is

function openModal(strCategory, objParam, strFeatures, strModule)
{
    //Various code and function calls to format the incoming data for the modal window
    
    //Provides a single object containing the necessary parameters and data for the modal window
    var objDialogIn = new OBJDIALOGIN( objParam );         
    
    return window.showModalDialog(strUrl, objDialogIn, strFeatures);
}

So modifying this function to use what should be my new plugin would look like this.

//Include the JS file containing the definition for "showAlert"
document.write( "<script LANGUAGE=JavaScript src='/js/ModalDialog.js'></script>" );

function openModal(strCategory, objParam, strFeatures, strModule)
{
    //Various code and function calls to format the incoming data for the modal window
    
    //Provides a single object containing the necessary parameters and data for the modal window
    var objDialogIn = new OBJDIALOGIN( objParam ); 
    
    $( "body" ).showAlert();
}

Based on the responses thus far, the ModalDialog.js file contains the following.

( function ( $ )
{
    $.fn.showAlert = function ()
    {
        alert( "Hello There" );
    }
} )( jQuery );

Now the optionActions.js file is included in every other html page in our application.

So, using the recommendations, I added a selector to attach the showAlert function. The selector is not null or undefined, by my method is.

So basically, I have an html module which includes the optionActions.js file. optionActions.js contains the function openModal. openModal is called from a script block in the html module. optionActions includes the ModalDialog.js module, which contains the showAlert function.

Therefore, as the html module loads the call to openModal should trigger the showAlert, but showAlert is undefined.

I appreciate the responses. I understand the basis for them. However, I have tried both and still my function is undefined. This code is in it's own JavaScript file and that file is included within the module from which I am calling the desired function. Any other possible ideas? I need to find some sort of work around. we are now using IE 11 and we pop up a lot of "modal" screens. We are unable to debug these because when we set a break point it breaks at the call to window.showModalDialog. — Paul Stoner
– Paul Stoner, Commented Dec 23, 2014 at 14:40
Without seeing a demo of the problem. It is impossible to help you out. Code above showed you were calling it wrong or defining it wrong. That is all we have to go off on. — epascarello
– epascarello, Commented Dec 23, 2014 at 14:57
I absolutely understand and I agree. Unfortunately, I do not know how to provide you with an example. I will edit my question and try to provide some more information. — Paul Stoner
– Paul Stoner, Commented Dec 23, 2014 at 15:00
I would really like to be able to accept both answers as each has helped. — Paul Stoner
– Paul Stoner, Commented Dec 24, 2014 at 16:06

Ted · Accepted Answer · 2014-12-22 21:12:38Z

2

Because $.fn is expecting a selector. Using your code, this works fine: $('body').showAlert();

This does not:

$.showAlert();

To create it on the jquery object, drop the .fn

(function($){
    $.showAlert = function (){
        alert( "Hello There" );
    }
})(jQuery);

$.showAlert();//works

answered Dec 22, 2014 at 21:12

Ted

14.9k2 gold badges43 silver badges58 bronze badges

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

1 Comment

Paul Stoner Over a year ago

thank you for your response. Please see my comment above

epascarello · Accepted Answer · 2014-12-22 21:55:30Z

1

It works fine when you use fn as an instance method.

(function($) {
      $.fn.showAlert = function() {
        alert("Hello There");
      }
    })(jQuery);

    $("body").showAlert();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

answered Dec 22, 2014 at 21:55

epascarello

208k20 gold badges206 silver badges246 bronze badges

2 Comments

Paul Stoner Over a year ago

thank you for your response. Please see my comment above

Paul Stoner Over a year ago

thank you for the assist. I was able to get this working

Collectives™ on Stack Overflow

JQuery Custom Plugin Function not recognized

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related