How do I use JQuery with Javascript variable

I'm trying to code some examples in the book I found JQuery JQuery in
Action, Second Edition.

The example has the following code snippet:

<script type="text/javascript">
      $(function(){
        $('#testButton').click(function(){
          var checkedValue = $('[name="someRadioGroup"]:radio:checked').val();
          $('#result').html('The radio element with value <tt>' +
checkedValue + '</tt> is checked.');
        });
      });
</script>

I do not know what to write on the line with a comment below:

        html document addLoadScript: (
                        (html jQuery: #testButton) onClick: (
                                (html jQuery: #result) load html: [:renderer| |checkedValue|
                                        checkedValue := 'What is equivalent to the code in the comment?'.
"var checkedValue =
$('[name=''someRadioGroup'']:radio:checked').val();"
                                        renderer html: 'The radio element with value <tt>' , checkedValue
, '</tt> is checked.'
                                ]
                        )
        ).

Thanks for any help.

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

Francisco,

If you want to include a callback to the server on click, this is how I would do it:

(html jQuery: #testButton) onClick: (
        (html jQuery ajax
                callback: [:val |  checkedValue := val]
                value: (JSStream on: '$(''[name=''someRadioGroup'']:radio:checked'').val()');
                onComplete: (html jQuery: #result) load html: [:renderer| renderer html: 'The radio element with value <tt>' , checkedValue, '</tt> is checked.'])

This effectively makes two callbacks: one to retrieve the value and one to render the html.

Johan

On 28 Jan 2012, at 23:55, Francisco Martins wrote:

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

Thanks Johan for your answer.

See my code below:

renderContentOn: html
        | checkedValue |
        (html jQuery: #testButton)
                onClick: (html jQuery ajax
                                callback: [:val | checkedValue := val]
                                value: (JSStream on: '$(''[name="someRadioGroup"]:radio:checked").val()');
                               
                                onComplete: ((html jQuery: #result) load
                                                html: [:renderer | renderer html: 'The radio element with value
<tt>' , checkedValue , '</tt> is checked.'])).
        html
                form: [html
                                div: [html label for: #radioYes;
                                                 with: 'What is your answer?'.
                                        html
                                                radioGroup: [:group |
                                                        html radioButton id: #radioYes;
                                                                 group: group;
                                                                 name: #someRadioGroup;
                                                                 value: #yes;
                                                                 selected: true;
                                                                 with: 'Yes'.
                                                        html radioButton id: #radioNo;
                                                                 group: group;
                                                                 name: #someRadioGroup;
                                                                 value: #no;
                                                                 with: 'No'.
                                                        html radioButton id: #radioMaybe;
                                                                 group: group;
                                                                 name: #someRadioGroup;
                                                                 value: #maybe;
                                                                 with: 'Maybe'.
                                                        html radioButton id: #radioConfused;
                                                                 group: group;
                                                                 name: #someRadioGroup;
                                                                 value: #confused;
                                                                 with: 'I dunno']].
                        html
                                div: [html button type: #button;
                                                 id: #testButton;
                                                 class: #green90x24;
                                                 with: 'Which?'].
                        html div id: #result]

Unfortunately the code did not work. I did something wrong?

--
Sds.,

Francisco Ary Martins
http://chicoary.wordpress.com
----
"A filosofia não é senão uma poesia sofisticada."
Montaigne
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Did you try putting a halt in both callbacks? Are they executed or not?

On 30 Jan 2012, at 02:09, Francisco Martins wrote:

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

Francisco,

Wait... now I see that you are just generating the script but you are not attaching it anywhere. The script is therefore never rendered to the client side.
You original code snippet contained:

html document addLoadscript: <script>

which is correct, but you can also attach the script to the testButton like this:

html button
        script: <script> ;
        id: ...

From there on, I think it should work but I'm also just writing this off the top of my head.

With <script> being:

        (html jQuery: #testButton)
                onClick: (html jQuery ajax
                                callback: [:val | checkedValue := val]
                                value: (JSStream on: '$(''[name="someRadioGroup"]:radio:checked").val()');
                               
                                onComplete: ((html jQuery: #result) load
                                                html: [:renderer | renderer html: 'The radio element with value
<tt>' , checkedValue , '</tt> is checked.'])).

best
Johan

On 30 Jan 2012, at 02:09, Francisco Martins wrote:

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