How to access a Javascript constructor variable in a prototype function

Hi,

I got this code from stackexchange:
http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal

Just modified it by using an attribute data-src
function YouTubeVideosActions() {
    var oMyModaliFrame = $('#myModal iframe');
}

YouTubeVideosActions.prototype.onClick = function() {
    $('.youtube-videos').click(function () {
        //var src = '//www.youtube.com/embed/YwPpKxxBdsA?rel=0&autoplay=1';
        var sYoutubeSrc = $(this).attr('data-src');

        $('#myModal').modal('show');
        $('#myModal iframe').attr('src', sYoutubeSrc + '?rel=0&wmode=transparent&autoplay=1');
    });
};

$('#myModal').on('hide.bs.modal', function(e) {
    $('#myModal iframe').removeAttr('src');
});

$('#myModal button').click(function () {
    $('#myModal iframe').removeAttr('src');
});

Open in new window


1) I'm wondering how I can declare a variable in the constructor and then use that variable in the prototype functions.

2) Also, I have duplicate object names (according to the PHPStorm IDE). Can I do something like:

var oMyModal = $('#myModal');
oMyModal.find('button').click(function () {
    oMyModal.find('iframe').removeAttr('src');
});

Is that the most efficient way to do it or is there a better way?

TY and Father God bless<><,
Victor
Victor KimuraSEO, Web DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings vkimura2007, , not sure I follow your code work, and-or what you are trying to do with this.
First you declare an almost EMPTY Object creation function with -
     function YouTubeVideosActions() {

next, you try and do something that can I find puzzling with this line -
     YouTubeVideosActions.prototype.onClick = function() {

what could you mean by naming this new method "onClick"? ? ?>   "onclick" is a reference to a document element "Event", and you should avoid using DOM references in naming methods, to avoid confusion. You might name it "setClick" -
     YouTubeVideosActions.prototype.setClick = function() {

OK, as to your question #1 "declare a variable in the constructor"

In Javascript, you can use a function definition as an "Class or Object" definition, as in javascript, ALL functions are variables. In "Class-Object" there is the "this" reference, which places any property-method, into the created "Object" access.

I could not try this code to see if it works, but It should give you some Ideas to look into. You really need to go to some of the many, many Javascript tutorial web sites and learn the javascript procedures for creating Function - Objects, And how to use the .prototype and when you can just define a method in the Function definition.
function YouTubeVideosActions() {
    this.ModaliFrame = $('#myModal iframe');

  this.setClick = function () {
    $('.youtube-videos').click(function () {
     var sYoutubeSrc = $(this).attr('data-src');

     $('#myModal').modal('show');
     this.ModaliFrame.attr('src', sYoutubeSrc + '?rel=0&amp;wmode=transparent&amp;autoplay=1');
     });
  }

}

var utva = new YouTubeVideosActions();
utva.setClick();

$('#myModal').on('hide.bs.modal', function(e) {
    utva.ModaliFrame.removeAttr('src');
});

$('#myModal button').click(function () {
    utva.ModaliFrame.removeAttr('src');
});

Open in new window

Slick812Commented:
For this -
"Can I do something like:"

var oMyModal = $('#myModal');
oMyModal.find('button').click(function () {
    oMyModal.find('iframe').removeAttr('src');
});

I believe that would work, as you can get an often used element (the element with the id of "myModal", in your case) as a dom object into a variable, and use it without calling the function to get it again, with your -
     var oMyModal = $('#myModal');

as to wheather this is the most efficient way , would depend, on what could be done use other ways to do this, AND most important, how may times you need to use this element dom object in your code and the ways you might combine code to use less code.
It does not matter in short code work, but the method of .find( )  is not all that efficient, as it needs to search through ALL contained elements to "Find" the one needed, but if there are not many elements contained, then it makes little difference.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.