Forum: Rails Spinoffs (closed, excessive spam) Scriptacoulous problem - 2 effects + prototype in one function?

613cdeb318951f568212eaaf9bec19e7?d=identicon&s=25 Althalos (Guest)
on 2008-07-04 12:58
(Received via mailing list)
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>
969b153010f69ec07458fa1d9e8a413b?d=identicon&s=25 Diodeus (Guest)
on 2008-07-04 16:19
(Received via mailing list)
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 <ca...@ekdahlproduction.com> wrote:
>    new Effect.SlideDown($('Content'));
>   <meta http-equiv="Content-Type" content="text/html;
>   new Effect.SlideUp($('Content'));
>       <h1>Terrvik Trophy™</h1>
>       <li>Nyhetsexempeltest</li>
>       <li>Nyhetsexempeltest</li>
>

  </ul>
F490e41cd5de1393a9f6958b70dae6ab?d=identicon&s=25 Frederick Polgardy (Guest)
on 2008-07-05 05:49
(Received via mailing list)
Umm.... I don't think so.  You can pass an element here if you want to.

-Fred

On Fri, Jul 4, 2008 at 9:18 AM, Diodeus <diodeus@gmail.com> wrote:

>
> 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);
>


--
Science answers questions; philosophy questions answers.
613cdeb318951f568212eaaf9bec19e7?d=identicon&s=25 Althalos (Guest)
on 2008-07-08 21:06
(Received via mailing list)
Okey thanks for your answers. I read about queues and stuff and it
made me a lot smarter and wiser. Still I am having problems though, it
might have to do with my implementation of OnComplete.. here's the
code, the 2006-link is just a reference, the function works when I do
that.

<!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)
  {
  Effect.SlideUp('content');
  new Ajax.Updater('content', 'page.php?p=' + pageNumber, OnComplete:
{ new Effect.SlideDown($('Content')); return false; });
  return false;
  }
  </script>

nothing happen at all when I execute that function, changepage...
  </head>
  <body>
    <div class="container">
      <img src="terrviklogga.jpg" style="float: right; width: 414px;
height: 542px">
      <h1>Terrvik Trophy™</h1>
      <h3>
      <a href="#" onclick="Effect.SlideUp('content'); return
false;">2006</a>
      <a href="#" onclick="ChangePage(2007)">2007</a>
      <a href="#" onclick="ChangePage(2008)">2008</a>
      </h3>
      <div id="content">
      <div>
 content content
      </div>
      </div>
      <div class="nyheter">
      <ul>
      <li>link</li>
      <li>link</li>
      </ul>
      </div>
    </div>
  </body>
</html>
969b153010f69ec07458fa1d9e8a413b?d=identicon&s=25 Diodeus (Guest)
on 2008-07-08 22:23
(Received via mailing list)
You do realize that you're calling your DIVs "content" and "Content",
right?
613cdeb318951f568212eaaf9bec19e7?d=identicon&s=25 Althalos (Guest)
on 2008-07-08 22:37
(Received via mailing list)
Not in this last example I don't, I revised it. Like in my last post
the names were container and content...
969b153010f69ec07458fa1d9e8a413b?d=identicon&s=25 Diodeus (Guest)
on 2008-07-08 22:58
(Received via mailing list)
Effect.SlideUp('content');
new Ajax.Updater('content', 'page.php?p=' + pageNumber, OnComplete:
{ new Effect.SlideDown($('Content')); return false; }
); return false; }

Are you sure? Look in your code here.

new Ajax.Updater('content'...)  --- lowercase c

then

 Effect.SlideDown($('Content')) --- uppercase c.
613cdeb318951f568212eaaf9bec19e7?d=identicon&s=25 Althalos (Guest)
on 2008-07-09 15:00
(Received via mailing list)
I'm sorry... I fixed that now, but it doesn't change anything...
here's the site online: http://terrviktrophy.ekdahlproduction.com/ if
that helps.. :S
969b153010f69ec07458fa1d9e8a413b?d=identicon&s=25 Diodeus (Guest)
on 2008-07-09 16:31
(Received via mailing list)
I ran your site in Firefox with Firebug and it found an error on the
following line. I suggest you do the same. It makes debugging much
easier.

new Ajax.Updater('content', 'page.php?p=' + pageNumber, OnComplete:
{ new Effect.SlideDown('content'); return false; });

I believe this should be formatted in this manner:

new Ajax.Updater('content', 'page.php?p=' + pageNumber,  { onComplete:
function() {new Effect.SlideDown('content'); return false;} });

For some reason SlideUp was giving me an error, so I simplified the
program, swapping the effects for simple hide/show functions. I made
"test.htm" that just contains "###", instead of a PHP call. Here's
what I cooked up and it works:

<script type="text/javascript">
  function ChangePage()
  {
   Element.hide('content')
  new Ajax.Updater('content', 'test.htm',  { onComplete: function()
{new Element.show('content');} });

  }
  </script>


Is the site Latvian?
This topic is locked and can not be replied to.