A few problems here. One thing that can be hard to wrap your head
around is the non-linearity of code execution for what you're trying
to do.
1) Ajax calls are asynchronous, so your the content may come back from
the server AFTER your SlideDown has executed. I'm sure this isn't what
you intend. You'll need to wrap your SlideDown into the "onComplete:"
event of your Ajax call.
2) There's a syntax error in your Ajax call. You need to pass it the
ID of your DIV, not the DIV object reference.
new Ajax.Updater($('Content'), 'page.php?p=' + pageNumber);
should be
new Ajax.Updater('Content', 'page.php?p=' + pageNumber);
3) By default, Scriptaculous effects are executed in Parallel. i.e.
your SlideUp and SlideDown will happen at the same time, which won't
work the way you intend. Calling your SlideDown after the Ajax call
completes will fix this problem, but you should probably read up on
effect queues anyway:
http://github.com/madrobby/scriptaculous/wikis/effect-queues
Good luck.
On Jul 4, 6:56 am, Althalos <[EMAIL PROTECTED]> wrote:
> Hello
> I have been working with Scriptacoulous for easy functions before but
> this time it's a little bit more advanced than that. I want my div to
> first be pushed up with Effect.SlideUp, then change its content using
> Ajax.Updater and then finally slide it back down using
> Effect.SlideDown... so I created a function that looks like this:
> function ChangePage(pageNumber)
> {
> new Effect.SlideUp($('Content'));
> new Ajax.Updater($('Content'), 'page.php?p=' + pageNumber);
> new Effect.SlideDown($('Content'));
> return false;
> }
>
> But.... it doesn't seem to work. When executing the site and hitting
> the links from which I execute this function, nothing happens. I was
> hoping someone could help me. I include the entire site below...
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">
> <link rel="stylesheet" type="text/css" href="style.css" />
> <title>Terrvik Trophy™</title>
> <script src="javascripts/prototype.js" type="text/javascript"></
> script>
> <script src="javascripts/scriptaculous.js" type="text/javascript"></
> script>
> <script type="text/javascript">
> function ChangePage(pageNumber)
> {
> new Effect.SlideUp($('Content'));
> new Ajax.Updater($('Content'), 'page.php?p=' + pageNumber);
> new Effect.SlideDown($('Content'));
> return false;
> }
> </script>
> </head>
> <body>
> <div class="content">
> <img src="terrviklogga.jpg" style="float: right; width: 414px;
> height: 542px">
> <h1>Terrvik Trophy™</h1>
> <h3>
> <a href="#" onclick="ChangePage(2006)">2006</a>
> <a href="#" onclick="ChangePage(2007)">2007</a>
> <a href="#" onclick="ChangePage(2008)">2008</a>
> </h3>
> <div id="Content">
> Some text as a start...
> </div>
> <div class="nyheter">
> <ul>
> <li>Nyhetsexempeltest</li>
> <li>Nyhetsexempeltest</li>
>
</ul>
> </div>
> </div>
> </body>
> </html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to rubyonrails-spinoffs@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
