Re: [cgiapp] HTML::Prototype Example

[Bruce McKenzie <suppressed>]

Thanks Cees

Cees Hek wrote:
> Can you show us the resulting HTML from the examples you give below? 

Here's what I take to be the relevant bits in what I got from the 
scripts quoted at the bottom of the page:

    <ul class="sortablelist" id="sortablelist_1">
      <li style="position: relative;" class="listitem" id=
      "list1_1">Item 1.1
      </li>
      <li style="position: relative;" class="listitem" id=
      "list1_2">Item 1.2
      </li>
      <li style="position: relative;" class="listitem" id=
      "list1_3">Item 1.3
      </li>
      <li style="position: relative;" class="listitem" id=
      "list1_4">Item 1.4
      </li>
    </ul>
    <hr>
    <ul class="sortablelist" id="sortablelist_2">
      <li style="position: relative;" class="listitem" id=
      "list1_1">Item 2.1
      </li>
      <li style="position: relative;" class="listitem" id=
      "list1_2">Item 2.2
      </li>
      <li style="position: relative;" class="listitem" id=
      "list1_3">Item 2.3
      </li>
      <li style="position: relative;" class="listitem" id=
      "list1_4">Item 2.4
      </li>
    </ul>
    <div style="position: relative;" class="bluebox" id="test">
      Hi
    </div>
    <form>
      <input id="rm" name="rm" value="answer" type="hidden">
      <script type="text/javascript">
<!--
Sortable.create( 'sortablelist_1', { containment: 
["sortablelist_1","sortablelist_2"], onUpdate: function () {  new 
Ajax.Request(  '', { parameters: 
Sortable.serialize('sortablelist_1'),asynchronous: 1 } )  }, type: '' } )
//-->
</script> <script type="text/javascript">
<!--
Sortable.create( 'sortablelist_2', { containment: 
["sortablelist_1","sortablelist_2"], onUpdate: function () {  new 
Ajax.Request(  '', { parameters: 
Sortable.serialize('sortablelist_2'),asynchronous: 1 } )  }, type: '' } )
//-->
</script> <script type="text/javascript">
<!--
new Draggable( 'test', { revert: true } )
//-->
</script> <a href="draggablebox.pl" onclick=
" new Ajax.Updater( 'test', 'draggablebox.pl', { asynchronous: 1 } ) ; 
return false">
      test</a> <input name="rm" onclick=
      " new Ajax.Updater( 'test', 'draggablebox.pl?rm=answer', { 
asynchronous: 1 } ) ; return false"
      value="answer" type="button">
    </form>



> I have found that in some instances it is easier to just learn the
> prototype.js library and write the JavaScript directly, instead of
> using the HTML::Prototype helper methods.
>

Well -- of course, that's just what I'm trying so hard to avoid :-) 
JavaScript is never easier for me. I suppose it would be if I studied 
the prototype lib though.


> Also, to make handling runmodes much much easier, I use
> CGI::Application::Dispatch and embed the runmode in the PATH_INFO. 

Yes -- this works great, thanks.

> > Here's what I've got in the template:
> >
> > <form>
> > <input type="hidden" id="rm" name="rm" value="answer" />
> >
> > [% #this works
> >   c.prototype.sortable_element( 'sortablelist_1' {
> > containment='["sortablelist_1","sortablelist_2"]' } ) # this works %]
> > [% #this works
> >    c.prototype.sortable_element( 'sortablelist_2' {
> > containment='["sortablelist_1","sortablelist_2"]' } )   %]
> > [% #this works
> >     c.prototype.draggable_element( 'test', { revert => 'true' } );  %]
> >
> >
> > [% # this doesn't work -- runs result of default run mode
> >    c.prototype.link_to_remote( 'test', {
> >         update     => 'test',
> >         url    => 'draggablebox.pl',
> >
> >
> >     } )
> >
> >  %]
> >
> > [% # this doesn't work -- returns result of  default run mode
> >     c.prototype.submit_to_remote( "rm", "answer",  {
> >         update     => 'test',
> >         url    => 'draggablebox.pl?rm=answer',
> >     })
> >   %]
> >
> >
> > </form>


Bruce

---------------------------------------------------------------------
Web Archive:  http://www.mail-archive.com/suppressed/
             http://marc.theaimsgroup.com/?l=cgiapp&r=1&w=2
To unsubscribe, e-mail: suppressed
For additional commands, e-mail: suppressed