CODEWITHSUNDEEP
javascriptjquery
cecilgol
cecilgol

Reputation: 83

jQuery dynamic selector returning undefined

I'm sure that I have overlooked something, but this is confounding to me.

starting html:

<div id="col-header-1"> ... </div>

Using Instafeed (js plugin) to get instagram images - working fine. outputs the following correctly (within col-header-1):

<div class="instagram-headers" data-highres="http://origincache-frc.fbcdn.net/10175356_1376290249321406_570358524_s.jpg"></div>

this does not work, url returns undefined:

function replaceCssBackgroundWithImage(target){
  var url = $('#' + target + ' > .instagram-headers').attr('data-highres');
  $('#' + target).css('background-image','url(' + url + ')');
}

result

<div style="background-image: url('undefined');" id="col-header-1">

so it gets target correctly.

Stepping through in (firefox's) console yields the correct result:

target = 'col-header-1' //=>"col-header-1"

var url = $('#' + target + ' > .instagram-headers').attr('data-highres'); //=> undefined

url //=> "http://origincache-frc.fbcdn.net/10175356_1376290249321406_570358524_s.jpg"

$('#' + target).css('background-image','url(' + url + ')'); //=> [object Object]

result

<div style="background-image: url("http://origincache-frc.fbcdn.net/10175356_1376290249321406_570358524_s.jpg");" id="col-header-1">

im at a loss, any help is appreciated,

thanks!

UPDATE: Instafeed Constructor

function getMultipleFeeds(targets){
var feeds = [];
var opts = {};
for (var i=0,len=targets.length;i<len;i++){
if (targets[i].match('header')){
    opts = {
        tagName: "TAG",
        target: targets[i],
        limit: '1',
        get: 'tagged',
        user:'USER',
        clientId:'CLIENTID',
        template:'<div class="instagram-headers" data-highres="{{image}}"></div>',
        useHttp:true,
        before: replaceCssBackgroundWithImage(targets[i]),
    };
...
feeds.push(new Instafeed(opts));
  }
return feeds;
}

var myFeeds = getMultipleFeeds(['col-header-1','col-header-2','col-header-3','instafeed','banner']);

for(var i=0, len=myFeeds.length; i < len; i++) {
  myFeeds[i].run();
}

Upvotes: 0

Views: 383

Answers (1)

presidentnickson
presidentnickson

Reputation: 1085

From looking at the instafeed documentation, you probably want to call replaceCssBackgroundWithImagemethod in the after callback, rather than the before callback. Try changing before to after :

function getMultipleFeeds(targets){
var feeds = [];
var opts = {};
for (var i=0,len=targets.length;i<len;i++){
if (targets[i].match('header')){
opts = {
    tagName: "TAG",
    target: targets[i],
    limit: '1',
    get: 'tagged',
    user:'USER',
    clientId:'CLIENTID',
    template:'<div class="instagram-headers" data-highres="{{image}}"></div>',
    useHttp:true,
    after: replaceCssBackgroundWithImage(targets[i]),
};
...
feeds.push(new Instafeed(opts));
  }
return feeds;
}

var myFeeds = getMultipleFeeds(['col-header-1','col-header-2','col-header-3','instafeed','banner']);

for(var i=0, len=myFeeds.length; i < len; i++) {
  myFeeds[i].run();
}

The reason being that the element you are trying to target hasn't been added to the DOM at the point you are trying to access it, thus returning undefined.

Upvotes: 1

Related Questions