How can I make JS objects into jQuery elements?

Question

I'll admit that I don't really know what I'm doing. But I'm trying to work with JS in an OO way.

I have a form field where I input data. On the right side I have a "preview" of how the special offer will look like.

As I add text in the input fields, I want it to show in the preview.

I've tried using the following code, but I'm not being very successful. I think there are some basic knowledge / understanding I'm missing here.

mirrorText: function(){
    var self = this;
    $('#title').keyup(function(){
        self.previewObject.title.text($(this).val());
     });
},

previewObject: {
    img: null,
    title: null,
    dateRange: null,
    address: null,

    init: function(){
        self.img = $('.offer-container .promo-img');
        self.title = $('.offer-container h3');
        self.dateRange = $('.offer-container .valid-through');
    }
}

See the full code here (jsfiddle).

so.. on key up of the input field, you want to call previewObject? so confused — JF it, Oct 03 '14 at 10:24
@Steven Very interesting for beginners indeed. Have you seen this - http://learn.jquery.com/plugins/basic-plugin-creation/ — Leron, Oct 03 '14 at 10:26
Get rid of the `self` references in `previewObject.init()`. There is no `self`. There is only `this`. :) — Achrome, Oct 03 '14 at 10:29
@Leron I'm no beginner at coding, just not steady on using JS objects. I've created many jQ plugins. @JS, am I calling it? Or just setting the property of an object? @Achrome: I'm using `self` because others have adviced it: http://stackoverflow.com/questions/337878/var-self-this — Steven, Oct 03 '14 at 10:37
@Achrome Read more about not using `this` here as well: http://www.smashingmagazine.com/2014/01/23/understanding-javascript-function-prototype-bind/. But maybe it does not apply in my case? — Steven, Oct 03 '14 at 10:39
`self` is used when you need to retain the outer scope in the inner scope. For example, the ideal way to use `self` is what you have done in `mirrorText()`. Also, in your case, self was undeclared in the scope of `previewObject` as well as `previewObject.init()`, which is where you would get `ReferenceErrors`. — Achrome, Oct 04 '14 at 04:36

score 3 · Accepted Answer · answered Oct 03 '14 at 10:43

You can't have DIVs inside a P (paragraph) so the elements were not found. I changed that to another div for the example.

You also referenced self in one place where I think it should have been this (inside init).

JSFiddle: http://jsfiddle.net/TrueBlueAussie/w0nn5Ls9/6/

Promo = {

    init: function(){
        var self = this;
        self.previewObject.init();
        self.mirrorText();
    },

    mirrorText: function(){
        var self = this;
        $('#title').keyup(function(){
            self.previewObject.title.html($(this).val());
         });
    },

    previewObject: {
        img: null,
        title: null,
        dateRange: null,
        address: null,

        init: function(){
            this.img = $('.offer-container .promo-img');
            this.title = $('.offer-container h3');
            this.dateRange = $('.offer-container .valid-through');
        }
    }
}    

Promo.init();

The `
` was just hasty lazy coding from me in jsFiddle. What I actually didn't know (an surprised me) is that jQuery couldn't find `.offer-container .promo-img` because the container was a not a block element. Thanks for today's lesson :) — Steven, Oct 03 '14 at 13:35

How can I make JS objects into jQuery elements?

1 Answers1