Solved

First jQuery extension assistance

Posted on 2013-11-13

jQuery

1 solution

211 Views

Last Modified: 2013-12-05

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

Comment

Question by:tonelm54

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

2 Comments

LVL 30

Expert Comment

by:Alexandre Simões

ID: 396442882013-11-13

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

LVL 30

Accepted Solution

by:Alexandre Simões

Alexandre Simões earned 500 total points

ID: 396444942013-11-13

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

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Using Ajax in CodeIgniter

Article by: Marco

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.

Create a responsive confirmation popup using HTML, CSS, jQuery and Promises

Article by: Julian

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises

PHP, jQuery, and Form Actions

Video by: Marco

The viewer will learn how to dynamically set the form action using jQuery.

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)