JQuery UI slider updates textfied and textfield updates slider: how to?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

JQuery UI slider updates textfied and textfield updates slider: how to?

LawsonEnglish
  I'm trying to connect the display of slider values to text input sorta
like the demos on the JQueryUI site, but I can't get the connection to
go both ways. Changing the value in the text field and pressing return
will reset the slider position, but changing the slider position doesn't
update the text field.

What am I doing worng?

Thanks.


Lawson


MyTestSlider>>renderContentOn: html
     self renderExplanationOn: html.
html form: [
           html text: 'slider value here: '.
       html textInput
          value: self current;
     callback: [ :value | self current: value ].
    html div script: (html jQuery new slider
       value: self current;
       onStop: (html jQuery ajax
  callback: [ :value | self current: value asNumber ]
value: (html jQuery this slider getValue)))
]

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

Lukas Renggli
On 27 August 2010 11:34, Lawson English <[hidden email]> wrote:
>  I'm trying to connect the display of slider values to text input sorta like
> the demos on the JQueryUI site, but I can't get the connection to go both
> ways. Changing the value in the text field and pressing return will reset
> the slider position, but changing the slider position doesn't update the
> text field.

You don't tell it to update the text field.

> MyTestSlider>>renderContentOn: html
>    self renderExplanationOn: html.
> html form: [
>          html text: 'slider value here: '.
>      html textInput
>         value: self current;
>    callback: [ :value | self current: value ].
>   html div script: (html jQuery new slider
>      value: self current;
>      onStop: (html jQuery ajax
>  callback: [ :value | self current: value asNumber ]
> value: (html jQuery this slider getValue))

Try to add something along the following lines to your onStop: event:

   , ((html jQuery id: 'id-of-your-textfield) value: html jQuery this
slider getValue)

Lukas

--
Lukas Renggli
www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

radoslav hodnicak
and if you wonder how to display the values of a range slider while you drag the gizmo, a snipped of my code:

html div script: (html jQuery new slider
    values: (Array with: from with: to);
    range: true;
    min: 0;
    max: 100;
    step: 5;
    onSlide: (JSFunction new
             add: ((html jQuery id: fromId) value: (html jQuery this slider getValueAt: 0));
             add: ((html jQuery id: toId) value: (html jQuery this slider getValueAt: 1));
             yourself)
     ).

jquery in seaside is fun

On Fri, Aug 27, 2010 at 12:19 PM, Lukas Renggli <[hidden email]> wrote:
On 27 August 2010 11:34, Lawson English <[hidden email]> wrote:
>  I'm trying to connect the display of slider values to text input sorta like
> the demos on the JQueryUI site, but I can't get the connection to go both
> ways. Changing the value in the text field and pressing return will reset
> the slider position, but changing the slider position doesn't update the
> text field.

You don't tell it to update the text field.

> MyTestSlider>>renderContentOn: html
>    self renderExplanationOn: html.
> html form: [
>          html text: 'slider value here: '.
>      html textInput
>         value: self current;
>    callback: [ :value | self current: value ].
>   html div script: (html jQuery new slider
>      value: self current;
>      onStop: (html jQuery ajax
>  callback: [ :value | self current: value asNumber ]
> value: (html jQuery this slider getValue))

Try to add something along the following lines to your onStop: event:

  , ((html jQuery id: 'id-of-your-textfield) value: html jQuery this
slider getValue)

Lukas

--
Lukas Renggli
www.lukas-renggli.ch
_______________________________________________


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

LawsonEnglish
In reply to this post by Lukas Renggli
  On 8/27/10 3:19 AM, Lukas Renggli wrote:

>> >  MyTestSlider>>renderContentOn: html
>> >      self renderExplanationOn: html.
>> >  html form: [
>> >            html text: 'slider value here: '.
>> >        html textInput
>> >           value: self current;
>> >      callback: [ :value | self current: value ].
>> >     html div script: (html jQuery new slider
>> >        value: self current;
>> >        onStop: (html jQuery ajax
>> >    callback: [ :value | self current: value asNumber ]
>> >  value: (html jQuery this slider getValue))
> Try to add something along the following lines to your onStop: event:
>
>     , ((html jQuery id: 'id-of-your-textfield) value: html jQuery this
> slider getValue)


I'm not quite getting the syntax. Not sure how the line you gave me fits
in with the rest (or what it does, for that matter).


Usually I can play with the syntax until the compiler accepts it, then I
can try to figure out WHY the compiler accepts it.

Can't get the compiler to accept an addition/modification along the
lines you suggest, and I'm not good enough with smalltalk to just "read
it" and tell what needs to go where.


Lawson
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

Julian Fitzell-2
On Sat, Aug 28, 2010 at 6:43 PM, Lawson English <[hidden email]> wrote:

>  On 8/27/10 3:19 AM, Lukas Renggli wrote:
>>>
>>> >  MyTestSlider>>renderContentOn: html
>>> >      self renderExplanationOn: html.
>>> >  html form: [
>>> >            html text: 'slider value here: '.
>>> >        html textInput
>>> >           value: self current;
>>> >      callback: [ :value | self current: value ].
>>> >     html div script: (html jQuery new slider
>>> >        value: self current;
>>> >        onStop: (html jQuery ajax
>>> >    callback: [ :value | self current: value asNumber ]
>>> >  value: (html jQuery this slider getValue))
>>
>> Try to add something along the following lines to your onStop: event:
>>
>>    , ((html jQuery id: 'id-of-your-textfield) value: html jQuery this
>> slider getValue)
>
>
> I'm not quite getting the syntax. Not sure how the line you gave me fits in
> with the rest (or what it does, for that matter).
>
>
> Usually I can play with the syntax until the compiler accepts it, then I can
> try to figure out WHY the compiler accepts it.
>
> Can't get the compiler to accept an addition/modification along the lines
> you suggest, and I'm not good enough with smalltalk to just "read it" and
> tell what needs to go where.

The added code generates JS that gets the text field by id ("html
jQuery id: 'id-of-your-textfield'") and sets its value ("value:") to
the value of the slider ("html jQuery this slider getValue"). Lukas is
suggesting that you need to this as well as sending the value back to
the smalltalk image. You can combine two JS actions using a comma so:

html div script:
   (html jQuery new slider
      value: self current;
      onStop:
         (html jQuery ajax
            callback: [ :value | self current: value asNumber ]
            value: (html jQuery this slider getValue)) ,
         ((html jQuery id: 'id-of-your-textfield)
            value: html jQuery this slider getValue))

Julian
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

LawsonEnglish
  Thanks guys. This is a fun system, but the subtleties are, well, subtle.

Lawson

On 8/28/10 3:31 PM, Julian Fitzell wrote:

> On Sat, Aug 28, 2010 at 6:43 PM, Lawson English<[hidden email]>  wrote:
>>   On 8/27/10 3:19 AM, Lukas Renggli wrote:
>>>
>>> Try to add something along the following lines to your onStop: event:
>>>
>>>     , ((html jQuery id: 'id-of-your-textfield) value: html jQuery this
>>> slider getValue)
>> [...]
>>
>> I'm not quite getting the syntax. Not sure how the line you gave me fits in
>> with the rest (or what it does, for that matter).
>> [...]
>>
> The added code generates JS that gets the text field by id ("html
> jQuery id: 'id-of-your-textfield'") and sets its value ("value:") to
> the value of the slider ("html jQuery this slider getValue"). Lukas is
> suggesting that you need to this as well as sending the value back to
> the smalltalk image. You can combine two JS actions using a comma so:
>
> html div script:
>     (html jQuery new slider
>        value: self current;
>        onStop:
>           (html jQuery ajax
>              callback: [ :value | self current: value asNumber ]
>              value: (html jQuery this slider getValue)) ,
>           ((html jQuery id: 'id-of-your-textfield)
>              value: html jQuery this slider getValue))
>
> Julian
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

LawsonEnglish
In reply to this post by Julian Fitzell-2
  Still not getting it, sorry. This still doesn't seem to do what I want:

renderContentOn: html
     | label1 |
     self renderExplanationOn: html.

     html form:
     [
     html text: 'slider value here: '.
     label1 := html nextId.
     html textInput
        value: self current;
        callback: [ :value | self current: value ].
    html div script:
     (html jQuery new slider
           value: self current;
           onStop:
             (html jQuery ajax
              callback: [ :value | self current: value asNumber ]
             value: (html jQuery this slider getValue)),
          ((html jQuery id: label1)
             value: html jQuery this slider getValue))
     ]


On 8/28/10 3:31 PM, Julian Fitzell wrote:

>
> The added code generates JS that gets the text field by id ("html
> jQuery id: 'id-of-your-textfield'") and sets its value ("value:") to
> the value of the slider ("html jQuery this slider getValue"). Lukas is
> suggesting that you need to this as well as sending the value back to
> the smalltalk image. You can combine two JS actions using a comma so:
>
> html div script:
>     (html jQuery new slider
>        value: self current;
>        onStop:
>           (html jQuery ajax
>              callback: [ :value | self current: value asNumber ]
>              value: (html jQuery this slider getValue)) ,
>           ((html jQuery id: 'id-of-your-textfield)
>              value: html jQuery this slider getValue))
>
> Julian
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

radoslav hodnicak
you are referencing DOM id label1, but not creating any DOM element with that id. you want

html textInput id: label1, value: ...

On Mon, Aug 30, 2010 at 3:10 PM, Lawson English <[hidden email]> wrote:
 Still not getting it, sorry. This still doesn't seem to do what I want:

renderContentOn: html
   | label1 |

   self renderExplanationOn: html.

   html form:
   [
   html text: 'slider value here: '.
   label1 := html nextId.

   html textInput
      value: self current;
      callback: [ :value | self current: value ].
  html div script:
   (html jQuery new slider
         value: self current;
         onStop:
           (html jQuery ajax
            callback: [ :value | self current: value asNumber ]
           value: (html jQuery this slider getValue)),
        ((html jQuery id: label1)

           value: html jQuery this slider getValue))
   ]


On 8/28/10 3:31 PM, Julian Fitzell wrote:

The added code generates JS that gets the text field by id ("html
jQuery id: 'id-of-your-textfield'") and sets its value ("value:") to
the value of the slider ("html jQuery this slider getValue"). Lukas is
suggesting that you need to this as well as sending the value back to
the smalltalk image. You can combine two JS actions using a comma so:

html div script:
   (html jQuery new slider
      value: self current;
      onStop:
         (html jQuery ajax
            callback: [ :value | self current: value asNumber ]
            value: (html jQuery this slider getValue)) ,
         ((html jQuery id: 'id-of-your-textfield)
            value: html jQuery this slider getValue))

Julian


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


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

LawsonEnglish
  On 8/30/10 6:20 AM, radoslav hodnicak wrote:
> you are referencing DOM id label1, but not creating any DOM element
> with that id. you want
>
> html textInput id: label1, value: ...

Thanks. I had to use  (html textInput id: label1)  value: ... to get it
to work though


Lawson



_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

radoslav hodnicak
er yes, that was a typo. it was supposed to be a semicolon, normal message cascade

On Mon, Aug 30, 2010 at 3:32 PM, Lawson English <[hidden email]> wrote:
 On 8/30/10 6:20 AM, radoslav hodnicak wrote:
you are referencing DOM id label1, but not creating any DOM element with that id. you want

html textInput id: label1, value: ...

Thanks. I had to use  (html textInput id: label1)  value: ... to get it to work though


Lawson





_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

mozillanerd
radoslav hodnicak <rh <at> 4096.sk> writes:

>
Would you mind repeating the entire working code for me?. I tried to follow, and
my version is suffering of my lack of understanding.

Thanks

P.S. Would it be feasible to set up a demo environment as provider for jQuery in
http://www.jsbin.com


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JQuery UI slider updates textfied and textfield updates slider: how to?

LawsonEnglish
  This is my version:

renderContentOn: html
     | label1 |

     html form:
     [
     html text: 'slider value here: '.
     label1 := html nextId.
     (html textInput id: label1)
        value: self current;
        callback: [ :value | self updateSlider: value].
    html div script:
     (html jQuery new slider
           value: self current;
           onSlide:
             (html jQuery ajax
              callback: [ :value | self updateSlider: value ]
             value: (html jQuery this slider getValue)),
          ((html jQuery id: label1)
             value: html jQuery this slider getValue))

     ]






On 8/31/10 9:05 PM, fritz schenk wrote:

> radoslav hodnicak<rh<at>  4096.sk>  writes:
>
> Would you mind repeating the entire working code for me?. I tried to follow, and
> my version is suffering of my lack of understanding.
>
> Thanks
>
> P.S. Would it be feasible to set up a demo environment as provider for jQuery in
> http://www.jsbin.com
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

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