thr3ads.net - Rails spinoffs - Scriptacoulous problem - 2 effects + prototype in one function? [Jul 2008]

If this information is useful, please help other people find it:
Share via:

Althalos

2008-Jul-04 10:56 UTC

Scriptacoulous problem - 2 effects + prototype in one function?

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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Diodeus

2008-Jul-04 14:18 UTC

head link

Re: Scriptacoulous problem - 2 effects + prototype in one function?

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...-cZ4SsK7xvA5jKbaFUhFE9FaTQe2KTcn/@public.gmane.org>
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Frederick Polgardy

2008-Jul-05 03:49 UTC

head link

Re: Scriptacoulous problem - 2 effects + prototype in one function?

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-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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.

--~--~---------~--~----~------------~-------~--~----~
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Althalos

2008-Jul-08 19:04 UTC

head link

Re: Scriptacoulous problem - 2 effects + prototype in one function?

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>
--~--~---------~--~----~------------~-------~--~----~
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Diodeus

2008-Jul-08 20:22 UTC

head link

Re: Scriptacoulous problem - 2 effects + prototype in one function?

You do realize that you''re calling your DIVs "content" and
"Content",
right?

On Jul 8, 3:04 pm, Althalos
<ca...-cZ4SsK7xvA5jKbaFUhFE9FaTQe2KTcn/@public.gmane.org>
wrote:> 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>--~--~---------~--~----~------------~-------~--~----~
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Althalos

2008-Jul-08 20:36 UTC

head link

Re: Scriptacoulous problem - 2 effects + prototype in one function?

Not in this last example I don''t, I revised it. Like in my last post
the names were container and content...

On 8 Juli, 22:22, Diodeus
<diod...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> You do realize that you''re calling your DIVs "content"
and "Content",
> right?
>--~--~---------~--~----~------------~-------~--~----~
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Diodeus

2008-Jul-08 20:57 UTC

head link

Re: Scriptacoulous problem - 2 effects + prototype in one function?

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.

On Jul 8, 4:36 pm, Althalos
<ca...-cZ4SsK7xvA5jKbaFUhFE9FaTQe2KTcn/@public.gmane.org>
wrote:> Not in this last example I don''t, I revised it. Like in my last
post
> the names were container and content...
>
> On 8 Juli, 22:22, Diodeus
<diod...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > You do realize that you''re calling your DIVs
"content" and "Content",
> > right?--~--~---------~--~----~------------~-------~--~----~
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Althalos

2008-Jul-09 12:57 UTC

head link

Re: Scriptacoulous problem - 2 effects + prototype in one function?

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
--~--~---------~--~----~------------~-------~--~----~
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Diodeus

2008-Jul-09 14:18 UTC

head link

Re: Scriptacoulous problem - 2 effects + prototype in one function?

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?


--~--~---------~--~----~------------~-------~--~----~
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Jul 2008 - Scriptacoulous problem - 2 effects + prototype in one function?

Scriptacoulous problem - 2 effects + prototype in one function?

Re: Scriptacoulous problem - 2 effects + prototype in one function?

Re: Scriptacoulous problem - 2 effects + prototype in one function?

Re: Scriptacoulous problem - 2 effects + prototype in one function?

Re: Scriptacoulous problem - 2 effects + prototype in one function?

Re: Scriptacoulous problem - 2 effects + prototype in one function?

Re: Scriptacoulous problem - 2 effects + prototype in one function?

Re: Scriptacoulous problem - 2 effects + prototype in one function?

Re: Scriptacoulous problem - 2 effects + prototype in one function?