/    Sign up×
Community /Pin to ProfileBookmark

detecting when a div is loaded?

Copy linkTweet thisAlerts:
Sep 24.2009

I have an RSS feed populating a DIV, and I have a JQuery plugin that I want to style that feed with. The problem is my .js runs before the feed is loaded therefore none of the feed gets styled.

Is there any way of detecting when a feed has finished loading into the DIV? I don’t want to have to modify the script that’s actually calling the feed because I want this plugin to work on any feed.

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@jamesbcox1980Sep 24.2009 — You're probably using Ajax to grab the RSS. Not sure if you're using jQuery's Ajax or your own. You can try to find the function that is actually populating the RSS into the div and put the call to your jQuery styling function at the end of it.

Also, since you're using jQuery, you can try the ready() function. Call whatever function begins the RSS population, and then just after that, use $(element).ready(function(){ whateverFunctions(); someMoreFunctions();}).

So, if your DIV's id is "rss_content", it would look like this:
[CODE]$(document.getElementById("rss_content")).ready(function(){
stylingFuncton();
});[/CODE]
I have no idea if this will work. It's just an idea. You may not even have any idea where the functions that call the RSS or the styling are, but if you do, you can try this. Let me know if it works. If not, we'll try something else.
Copy linkTweet thisAlerts:
@jamesbcox1980Sep 24.2009 — Actually change that, I forgot about jQuery's DOM selector... You don't even need document.getElementById()... You just call it like in CSS. it would be:
[CODE]$('#rss_content').ready(function(){
stylingFunction();
});[/CODE]
Copy linkTweet thisAlerts:
@JericoauthorSep 24.2009 — thanks for the reply, but this doesn't work. I think because the DIV element loads instantaneously, while the RSS feed populates the DIV after it's been detected as "ready". Somehow i need to detect when the javascript that's pulling the feed is finished executing, and I need to do this externally from that script - I don't know it it's possible ?
Copy linkTweet thisAlerts:
@jamesbcox1980Sep 24.2009 — Well, thing is, the jQuery styling should be creating CSS, not directly changing the elements' styles. So the styles should always apply, no matter [I]when[/I] it runs. I could be wrong about that... Nevertheless, the ready() function needs to occur AFTER the RSS beings populating. Why don't you try creating your own stylesheet, so you can be sure that it is done in global CSS, and not in the inline styles. Once global CSS is created, it applies retroactively and proactively.
Copy linkTweet thisAlerts:
@JericoauthorSep 24.2009 — because for the purpose on this application, i need to change the DOM after the feed is loaded. might not be possible..
Copy linkTweet thisAlerts:
@jamesbcox1980Sep 24.2009 — Ah... I see. Ok, is there anyway to modify the function that loads the RSS so that [B]IT[/B] triggers the function that does your jQuery styling? Maybe add the styling function to the [I]end[/I] of the RSS function... I tried recreating the scenario, and using onDomReady, but that script is sort of needy and didn't work.

I'm stumped...
Copy linkTweet thisAlerts:
@JericoauthorSep 24.2009 — I certainly could add function to the RSS script, but I'm creating a plugin that i want to work against any div you name, and no matter what is being loaded into it.
Copy linkTweet thisAlerts:
@jamesbcox1980Sep 24.2009 — I have an idea. I'm going to try something using a combination of the DOMContentLoaded event and the DOMNodeInserted event. This may require that your RSS fill in the DIV using appendChild() instead of innerHTML, but we'll see. I'm going to write it up and test it real quick. It may also be limited to actual loading...
Copy linkTweet thisAlerts:
@jamesbcox1980Sep 24.2009 — Nope, that didn't work. The DOMContentLoaded event only registers during the actual download of the page. I was able to watch for the DOMNodeInserted event though, so I was trying to write a function that runs every 10 milliseconds and if 10 milliseconds passes without a change to the div, it will fire the styling function. But then it siginifcantly slowed the script down (that's sort of obvious now, in retrospect).

So I'm all out of ideas. Anyone else?
Copy linkTweet thisAlerts:
@JericoauthorSep 25.2009 — jamesbcox1980 - thanks for looking into this. Looks like I might have to rethink this thing - it seemed like there had to be a way to do this...
×

Success!

Help @Jerico spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...