/    Sign up×
Community /Pin to ProfileBookmark

innHTML, ajax and lightboxes (tearing my hair out)

Copy linkTweet thisAlerts:
Apr 21.2009

Hi there.

I wonder if anyone can put me out of my misery.

I am writing a CMS page which outputs a list of items. When you initially go to the page, the php spits out the list of items. If you add a new item, the ajax adds the item and does an innerhtml replace on the list to effectively update it. Works fine.

However (you know this was coming!), I am trying to get a lightbox to work also. Each item has an ‘edit’ link, when clicked a lightbox appears with a form in. This works find when you first go to the page (i.e. when the list has not been innerhtml’d), but as soon as you add a new item, the javascript behind the onlick function on the ‘edit’ links is rendered useless.

I would SOOO appreciate some help right now.

Any ideas?

James

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 21.2009 — Every time you update the DOM, with Ajax/innerHTML, you must re-initialize Lightbox.
Copy linkTweet thisAlerts:
@thatboyjimauthorApr 21.2009 — Thank you so much for your prompt response.

I'm not sure how to re-initialise the lightbox. When the page first loads I have...

[code=html]
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
[/code]

I have tried to put the two lines above in the innerhtml file but it doesn't seem to work.

Any ideas? I'm a complete noob with javascript.

Many thanks!
Copy linkTweet thisAlerts:
@FangApr 21.2009 — After you change the DOM, run [I]initLightbox()[/I]. This assumes the new elements have the required [I]rel[/I] value for Lightbox.
Copy linkTweet thisAlerts:
@thatboyjimauthorApr 21.2009 — Great thanks for your help. In this case, the line was...

[code=html]
initialize();
[/code]

But the same effect.

Thanks again.
×

Success!

Help @thatboyjim 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.19,
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,
)...