CODEWITHSUNDEEP
javascriptjquery
m0a
m0a

Reputation: 1005

How do I grab this variable in a separate function? (jQuery)

I'm trying to use TsearchResultID in the last function but don't know how to access it... In this function ( $(document).on('click', '.slideYThumbnail', function(event) { )

    function QueryGetta0() {
        var TTsearchQuery = 'x';
        return TTsearchQuery;
    }

    function QueryGetta1() {
        return $.get(
            "https://www.googleapis.com/youtube/v3/search",{
            part: 'snippet',
            maxResults: 1,
            q: YTSearchQueryText,
            type: 'video',
            key: ''}
        );  
    } 

   $(document).on('click', '.lister ul span', function(event) {

        QueryGetta1()
        .done(function(data) {
            var TsearchResultID = data.items[0].id.videoId;
            var target = '<div class="slideYThumbnail"><img class="slideYThumbnailInside" src="http://img.youtube.com/vi/' + TsearchResultID + '/0.jpg"></img></div>';
        });
    }); 

    $(document).on('click', '.slideYThumbnail', function(event) {
        alert(TsearchResultID);
    });

Upvotes: 0

Views: 62

Answers (3)

SSS
SSS

Reputation: 92

Try using an array declared in the global scope.

var TsearchResultIDArray = []; //declaration of array

$(document).on('click', '.lister ul span', function(event) {

    QueryGetta1()
    .done(function(data) {
        TsearchResultIDArray.push = data.items[0].id.videoId;//push the value to the array
        var target = '<div class="slideYThumbnail"><img class="slideYThumbnailInside" src="http://img.youtube.com/vi/' + TsearchResultID + '/0.jpg"></img></div>';
    });
}); 

$(document).on('click', '.slideYThumbnail', function(event) {
    alert(TsearchResultIDArray[0]); // access the first element of the array.
});

OR

Use session storage to SET/GET the value.

$(document).on('click', '.lister ul span', function(event) {

    QueryGetta1()
    .done(function(data) {
        sessionStorage.setItem('TsearchResultID',data.items[0].id.videoId); //set the value in session
        var target = '<div class="slideYThumbnail"><img class="slideYThumbnailInside" src="http://img.youtube.com/vi/' + TsearchResultID + '/0.jpg"></img></div>';
    });
}); 

$(document).on('click', '.slideYThumbnail', function(event) {
    alert(sessionStorage.getItem('TsearchResultID')); //get the value from session
});

Upvotes: 1

Rajesh
Rajesh

Reputation: 24915

If you want to share variables across functions, you will have to define them outside functions. This usually involve Global Variables, but its not a good practice to contaminate global scope.

Alternate is, encapsulate all event bindings inside a function registerEvents() and here if you define a variable outside event handlers, you can access them across handlers but it will still be a part of function hence preventing contamination. Also this helps in keeping all bindings together, making debug easier.

Example

function registerEvents() {
  var sharableVar = null;

  $("#btnInit").on("click", function() {
    sharableVar = Math.floor(Math.random() * 10);
  });

  $("#btnNotify").on("click", function() {
    console.log(sharableVar);
  })
}

registerEvents()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnInit">Initialize</button>
<button id="btnNotify">Notify</button>

Upvotes: 1

Jai
Jai

Reputation: 74738

You can manage it with creation of an object outside in the global scope: 

var obj = {
   TsearchResultID : "" // <---declare it here.
};
function QueryGetta0() { 
  // other code as is.
}
function QueryGetta1() {
  // other code as is.
}
$(document).on('click', '.lister ul span', function(event) {

    QueryGetta1()
    .done(function(data) {
        obj.TsearchResultID = data.items[0].id.videoId; // <---put value here.
        var target = '<div class="slideYThumbnail"><img class="slideYThumbnailInside" src="http://img.youtube.com/vi/' + TsearchResultID + '/0.jpg"></img></div>';
    });
}); 

$(document).on('click', '.slideYThumbnail', function(event) {
    alert(obj.TsearchResultID); // now access it here.
});

Upvotes: 2

Related Questions