call a jQuery plugin

Hi -

I want to use this:

http://plugins.jquery.com/project/cyOverlabel

which is based on this:

http://www.alistapart.com/articles/makingcompactformsmoreaccessible

I have my divs and css set up to use the cyOverlabel() function
described in the first link and if I enter $('body').cyOverlabel(); in
the firebug console, the labels appear inside the textInputs on my
form and disappear when clicked as expected.

How can I call the $('body).cyOverlabel(); bit from Seaside when a
form is rendered or at a more appropriate time/place?

"best" failed attempts are below

Thanks -

Paul



This doesn't work, but is my best guess so far and I've added it to the form:

(html jQuery this)
        onLoad: ((html jQuery this) do: 'cyOverlabel();').

I've also tried in the form:

     | id |
     id:= html nextId.
     html div id: id.
     html document addLoadScript: 'document.getElementById(' , id
printString , ').cyOverlabel()'.
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

> (html jQuery this)
>        onLoad: ((html jQuery this) do: 'cyOverlabel();').

As you can see in the comment of #do: this method it iterates over
every matched DOM element (http://docs.jquery.com/Core/each#callback).
As far as I understand you just want to call 'cyOverlabel' on the
query. This is done like this:

    html jQuery this call: 'cyOverlabel'

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Thanks Lukas,

it worked as I wanted when I did this:

        html document addLoadScript: ((html jQuery expression 'body') call:
'cyOverlabel').

at the top of the renderContentOn: method for the main hub component.
I'll try to figure out how to have it work in the jQuery dialogs.

Is there a guide to including jQuery plugins in Seaside or is call:
the best way to go?  I have not found it through Google or the list
archives, and imagine its context specific.

Thanks again

Paul



On Sat, Sep 12, 2009 at 5:01 PM, Lukas Renggli <[hidden email]> wrote: _______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

> Is there a guide to including jQuery plugins in Seaside or is call:
> the best way to go?  I have not found it through Google or the list
> archives, and imagine its context specific.

Not yet, probably soon in the book though ;-)

In your case I would add an extension method ...

    JQueryInstance>>#cyOverlabel
        self call: 'cyOverlabel'

... so you can write instead ...

   (html jQuery: 'body') cyOverlabel

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

I am following through the example in the new book "Dynamic Web  
Development with Seaside" (great book btw!) and I am having a problem with  
the date input field. Obviously, I am pretty much a newbie with  
Seaside/Pharo/Smalltalk, so forgive me if I'm making a stupid error, and  
if this is not the right place for such messages, please point me in the  
right direction.

The problem is, when rendering the date input field, it displays itself  
twice (see the html at the end of this message)
These are some portions of the code:

ContactView>>renderContentOn: html
        html form:
                [ self
                        renderNameOn: html;
                        renderEmailOn: html;
                        renderGenderOn: html;
                        renderSendUpdatesOn: html;
                        renderDateOn: html;
                        renderSaveOn: html ].


ContactView>>renderDateOn: html
        html text: 'Date of birth: '.
        html dateInput
                callback: [ :value | self contact birthdate: value ];
                with: self contact birthdate.
        html break.

This is after the refactoring suggested in section 11.5 of the book, but  
the problem always occurred, from the first time the date input field was  
introduced.
It is using Pharo image 10448 (bet the problem existed long before that) -  
I don't know how to check the Seaside revision, but I suspect it is 2.8?  
or maybe 2.9 - it came with the Pharo image downloaded from the Pharo  
website on 2009-08-19. Any help would be appreciated.

Here is the html produced:


  <br/>Date of birth:
   <select name="13">
     <option value="14">January</option>
     <option value="15">February</option>
     <option value="16">March</option>
     <option value="17">April</option>
     <option value="18">May</option>
     <option value="19">June</option>
     <option value="20">July</option>
     <option value="21">August</option>
     <option value="22" selected="selected">September</option>
     <option value="23">October</option>
     <option value="24">November</option>
     <option value="25">December</option>
   </select>&nbsp;
   <input value="13" name="26" size="2" maxlength="2" type="text"  
class="text"/>&nbsp;
   <input value="2009" name="27" size="4" maxlength="4" type="text"  
class="text"/>
   <input name="28" type="hidden" class="hidden"/>
   <select name="29">
     <option value="30">January</option>
     <option value="31">February</option>
     <option value="32">March</option>
     <option value="33">April</option>
     <option value="34">May</option>
     <option value="35">June</option>
     <option value="36">July</option>
     <option value="37">August</option>
     <option value="38" selected="selected">September</option>
     <option value="39">October</option>
     <option value="40">November</option>
     <option value="41">December</option>
   </select>&nbsp;
   <input value="13" name="42" size="2" maxlength="2" type="text"  
class="text"/>&nbsp;
   <input value="2009" name="43" size="4" maxlength="4" type="text"  
class="text"/>
   <input name="44" type="hidden" class="hidden"/>
   <br/>


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Hi Simon,

> ContactView>>renderDateOn: html
>        html text: 'Date of birth: '.
>        html dateInput
>                callback: [ :value | self contact birthdate: value ];
>                with: self contact birthdate.
>        html break.

Sorry for the slow reply. To fix your problem use #value: instead of #with:.

I think that could be improved in Seaside and created a new issue.

http://code.google.com/p/seaside/issues/detail?id=469

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside