[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 226
  • Last Modified:

First jQuery extension assistance

I'm fed up of writing the same code over and over again, so trying to get to grips with doing my own jQuery extension to simplify and replace some of the most common repetitions.

So after reading a few webpages, a few chapters, and asking a few questions on here, Ive come up with the following code:-
	(function( $ ) {
		$.fn.tcDialogue = function(options) {
			$('body').append("hello");
			
            var closeDialogue = function(other_args) {
                alert("I would close if I was written");
            };
		};
	}(jQuery));

	$(document).ready(function (){
		var testDialogue = tcDialogue();
		testDialogue.closeDialogue();
    });

Open in new window


Which should (as far as I'm aware) put 'hello' into the body, and then display an alert, however all I get from my browser is 'tcDialogue' is not declared, so I'm obviously doing something wrong, but does anyone have any ideas as to what I've done wrong?

Thank you in advance
0
tonelm54
Asked:
tonelm54
  • 2
1 Solution
 
Alexandre SimõesManager / Technology SpecialistCommented:
This is what you might be looking for:
http://jsfiddle.net/BvssN/

(function ($) {
    $.fn.tcDialogue = function (options) {
        this.append("hello");
        
        var closeDialogue = function (other_args) {
            alert("I would close if I was written");
        };
        
        return {
            closeDialogue: closeDialogue
        };
    };
}(jQuery));

$(document).ready(function () {
    var testDialogue = $('body').tcDialogue();
    testDialogue.closeDialogue();
});

Open in new window

0
 
Alexandre SimõesManager / Technology SpecialistCommented:
I saw that you're planning to use options also.
Here's an example that uses it:
http://jsfiddle.net/BvssN/1/
(function ($) {
    $.fn.tcDialogue = function (options) {
        var defaultOptions = {
            name: 'John Doe'
        };
        var options = $.extend({}, defaultOptions, options);
        
        this.append("hello " + options.name);
        
        var closeDialogue = function (other_args) {
            alert("I would close if I was written");
        };
        
        return {
            closeDialogue: closeDialogue
        };
    };
}(jQuery));

$(document).ready(function () {
    var testDialogue = $('div').tcDialogue();
    testDialogue.closeDialogue();
    var testDialogue = $('div').empty().tcDialogue({ name: 'Maria' });
});

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now