How to write a jQuery widget to add 'Hello world' to the selected div

Question

I need some help writing a jQuery widget.

As an exercise, I am trying to create a widget which adds a 'Hello World' message to the selected element when the page is loaded.

The below code should append "Hello World" to div with class "123", but nothing happens. Can anyone see what I did wrong?

jQuery/javascript:

$.widget("custom.hwLoader",{

    options: { 
    clear:null
    },

    _create: function() {
        this.element;
        this.name; 
        this.namespace; 
        this.element.on("load"+this.eventNamespace,
            function(){
                $("<h1>Hello World</h1>").appendTo(this.element);
            }
        )
    },

    _setOption: function( key, value ) {

        this._super("_setOption", key, value );
    },

    _destroy: function() {
        this.element.unbind('.'+this.eventNamespace);
    }

});

HTML:

$("<div  class='addHere'></div>").appendTo("body");
$(".addHere").hwLoader();

score -1 · Accepted Answer · edited Jun 20 '20 at 09:12

You can use jQuery text method: http://api.jquery.com/text/

$(document).ready(function(){
    $('#selected_element').text('Hello World');
});

Here's a fiddle: http://jsfiddle.net/7zq2kvw0/1/

and it's safer to start a class or id name with a letter (see this question: What are valid values for the id attribute in HTML?)

With a widget:

Widget factory is a jQuery UI functionality. A simple function woud be much more adapted for this usage. If you really want to use a widget, make sure you link both jQuery and jQuery UI scripts on your page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

In this case, the simple following code works well:

$.widget("custom.HW_Loader",{
    _create: function() {
        this.element.text('Hello World');
    }
});

And you can call the widget with $('#element').HW_Loader();

Here in action: http://jsfiddle.net/7zq2kvw0/3/

Thanks for your advice but i really need to do it via my widget. — wrath1888, Apr 08 '15 at 07:19
I'm not convinced by the utility of jQuery UI widgets in general, but if you really need to use it, see the updated answer. — Raoulito, Apr 08 '15 at 13:38
Great Thanks! It's exacly what I need. Adding 'Hello World' this way is a great example of what I need. So I can continue making this task. — wrath1888, Apr 09 '15 at 08:39

How to write a jQuery widget to add 'Hello world' to the selected div

1 Answers1

With a widget: