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
– JF it, Commented Oct 3, 2014 at 10:24
@Steven Very interesting for beginners indeed. Have you seen this - learn.jquery.com/plugins/basic-plugin-creation — Leron
– Leron, Commented Oct 3, 2014 at 10:26
Get rid of the self references in previewObject.init(). There is no self. There is only this. :) — Achrome
– Achrome, Commented Oct 3, 2014 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: stackoverflow.com/questions/337878/var-self-this — Steven
– Steven, Commented Oct 3, 2014 at 10:37
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
– Achrome, Commented Oct 4, 2014 at 4:36

iCollect.it Ltd · Accepted Answer · 2014-10-03 10:43:37Z

3

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();

answered Oct 3, 2014 at 10:43

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

1 Comment

Steven Over a year ago

The <p> 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 :)

Collectives™ on Stack Overflow

How can I make JS objects into jQuery elements?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related