Dynamic Ajax Content & js files

[lmellor]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem: I have previously posted on here but have since realised that I was completely wrong in what I had put so here goes (no wonder I got no response)...

I have set my site up using the ajax dymaic content script, this works fine for loading in external html into the current page, I can't for the life of me get this thing to work with js files however.

The page I have created works 100% fine on its own, it uses the Animated Contractible Div script (found here... (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm)).

I simply cannot get the two to play together at all, this is the 2nd script of this nature that I have attempted to introduce via AJAX, I gave up with the first one (wasn't as swanky as the animated div script).

Now I know that when I say I followed the instructions to the word I must be wrong (otherwise it would surely work) but I have been going over and over this for the past 3 hours. The only method I have found to work so far was long winded and didn't produce the results I was after (make ajax load a page containing an iframe which contained the page), I am not wanting any scrollbars within the pages themselves, otherwise I'd have just stuck with that idea (messy as it is).

The site i am doing this on is here (http://www.lavendertours.info/test/index.html)

The page that I am trying to load in with the script is here (http://www.lavendertours.info/test/holidays.html)

Maybe I've jumped into this javascript thing with both feet first, I'll happily admit that I am a newb to it, html I have very little problems with, either way, I am impressed with the way the pages work individually, I just want to get them both running together.

All help massively appreciated, you guys rock.

I am willing to offer out some photoshop help to anybody who needs it in exchange for this favour.

Thanks in advance.

Luke.

[jscheuer1]

Well, the problem is that the script needs to load with the 'top' page and then later to initialize the markup after the markup is added to the 'top' page.

Loading the script with the 'top' page is easy. Just put it on the 'top' page.

Then I would get rid of this type of thing on the external page:


<script type="text/javascript">//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("eastbourne", 800, true)</script>

And, instead do something like so (addition red):


<td width="210" height="25" valign="top">Eastbourne <a onmouseover="collapse1=new animatedcollapse('eastbourne', 800, true);" href="javascript:collapse1.slideit()" style="color:#666666">Show/Hide</a></td>

This may cause some other problems, but probably not, and should at least get it working.

[lmellor]

Hmmm, this seems to have made matters worse somehow, I have added the code you suggested but to no avail, any other ideas at all?

[jscheuer1]

Ooops, I made a typo, now fixed in my last post, it should be:


onmouseover="collapse1=new animatedcollapse('eastbourne', 800, true);

not:


onmouseover="collapse1=new animatedcollapse('eastbourne', 800, true;)

[jscheuer1]

I'm now seeing a repeat initialization problem. After you mouse over a couple times, it stops working in FF and Opera. This will fix that on the page by itself:


onmouseover="if (typeof collapse1=='undefined'){collapse1=new animatedcollapse('eastbourne', 800, true)}"

I cannot easily test it though when loaded via Ajax. It may it may not break down when the holidays page is replaced via Ajax and later brought back.

Oh, and you have two:


<script type="text/javascript" src="js/animatedcollapse.js"></script>

on the external page. There should be only one.